无论容器的大小如何,我都希望我的Mapbox地图内容始终始终可见。
但是,当地图很小时,地图就会被裁剪。
这是我有https://codepen.io/eddydg/pen/BmReEm的例子
减小页面宽度时,它还会减小地图容器的高度,以保持其尺寸比例。但是地图不会进一步缩小以使所有图层均可见。
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [0, 0],
zoom: 0
});
window.addEventListener('resize', () => {
map.zoomTo(0);
});
body {
margin: 0;
padding: 0;
}
.content {
display: flex;
}
.column {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
border: thin black solid;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.map-wrapper {
position: relative;
width: 100%;
height: 30vw; /* 100% */
max-width: 100%;
max-height: 100%;
background-color: teal;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
<script src="https://www.mapbox.com/help/data/codepen-token.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js"></script>
<div class="content">
<div class="column"></div>
<div class="column"></div>
<div class="column">
<div class="map-wrapper">
<div id='map'></div>
</div>
</div>
</div>
最佳答案
我认为您的问题在于,为了调整地图的大小以使所有内容都保持在所讨论的微小尺寸,它必须缩小到超过缩放级别0。这是不可能的。可能您可以使用CSS破解某些东西,以使用像素比例或其他比例缩放实际渲染的地图。