Mapbox GL 3D构建样式动态更改

Question

我想知道3D建筑的“填充颜色”是否可以根据某些事件动态更改，例如将鼠标悬停在建筑物上时鼠标移动，突出显示3D建筑。

Answer 1

GL JS中没有内置悬停效果。你可以通过

自己实现这个效果

1. 为ggpairs(dat,upper=list(continuous=wrap("cor",size=2)), columns = c("a","b","c","d")) 事件
添加侦听器
2. 使用mousemove
在mousemove事件期间查找鼠标下方的功能
3. 使用Map#queryRenderedFeatures更改建筑物/建筑物的颜色

您可以在此处查看为GL JS实现悬停效果的示例：https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

Answer 2

尝试一下

map.on('load', function () {
        var layers = map.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
          if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
          }
        }
        map.addLayer(
          {
            'id': '3dbuildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            pitch: 60,
            bearing: -60,
            'paint': {
              'fill-extrusion-color': '#aaa',

              // use an 'interpolate' expression to add a smooth transition effect to the
              // buildings as the user zooms in
              'fill-extrusion-height': [
                'interpolate',
                ['linear'],
                ['zoom'],
                15,
                0,
                15.05,
                ['get', 'height']
              ],
              'fill-extrusion-base': [
                'interpolate',
                ['linear'],
                ['zoom'],
                15,
                0,
                15.05,
                ['get', 'min_height']
              ],
              'fill-extrusion-opacity': 0.6
            }
          },
          labelLayerId
        );

        map.addSource('currentBuildings', {
          type: 'geojson',
          data: {
            "type": "FeatureCollection",
            "features": []
          }
        });

        map.addLayer(
          {
            'id': 'highlight',
            'source': 'currentBuildings',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            pitch: 60,
            bearing: -60,

            'paint': {
              'fill-extrusion-color': '#f00',
              // use an 'interpolate' expression to add a smooth transition effect to the
              // buildings as the user zooms in
              'fill-extrusion-height': [
                'interpolate',
                ['linear'],
                ['zoom'],
                4,
                0,
                15.05,
                ['get', 'height']
              ],
              'fill-extrusion-base': [
                'interpolate',
                ['linear'],
                ['zoom'],
                4,
                0,
                15.05,
                ['get', 'min_height']
              ],
              'fill-extrusion-opacity': 0.6
            }
          },
          labelLayerId
        );


        map.on('click', '3dbuildings', function (e) {
          map.getSource('currentBuildings').setData({
            "type": "FeatureCollection",
            "features": e.features
          });
        });
        map.on('mousemove', '3dbuildings', function (e) {
          map.getSource('currentBuildings').setData({
            "type": "FeatureCollection",
            "features": e.features
          });
        });
      });