vue mapbox设备撒点鼠标悬浮变成可点击状以及渲染3D建筑

这里跳过如何使用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
    );
});