Mapbox GL JS 是一个用于在网页上创建交互式地图的 JavaScript 库。它基于 WebGL 技术,能够高效地渲染大规模地理数据。3D 建筑物是通过 Mapbox 的 3D 地图功能实现的,允许用户在地图上以三维形式查看建筑物。
Mapbox GL JS 提供了多种类型的地图数据,包括:
在较低的缩放级别下,默认情况下,Mapbox GL JS 可能不会显示 3D 建筑物,因为这可能会导致性能问题。
可以通过设置 mapboxgl.style.layers
中的 visibility
属性来控制 3D 建筑物的显示。以下是一个示例代码:
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 15
});
map.on('load', function () {
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'filter': ['==', ['get', 'extrude'], 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'min_height'],
'fill-extrusion-opacity': .6
}
});
// 控制 3D 建筑物的显示
map.setFilter('3d-buildings', ['>=', ['zoom'], 15]);
});
在这个示例中,我们通过 map.setFilter
方法设置了一个过滤器,只有在缩放级别大于等于 15 时,3D 建筑物才会显示。
通过以上方法,你可以有效地控制在较低的缩放级别下显示 3D 建筑物,同时保持良好的性能和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云