这里跳过如何使用mapbox,直接上代码
// 地图撒点鼠标悬浮变成可点击状态
map.on('mouseenter', 'device_point', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'device_point', () => {
map.getCanvas().style.cursor = '';
});
// 加载3D建筑
map.on('style.load', () => {
const layers = this.mapBoxMap.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === 'symbol' && layer.layout['text-field']
).id;
this.mapBoxMap.addLayer(
{
'id': 'add-3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#bbb',
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height'] // 意思是地图层级大于15.05时取默认高度 这里可以直接写死 但要比下面的值大
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height'] // 意思是地图层级大于15.05时取默认最小高度 这里可以直接写死
],
'fill-extrusion-opacity': 0.9
}
},
labelLayerId
);
});