映射框更改突出显示3d建筑

问题描述

我认为没有解决方案，但是也许我错了，或者将来有可能。

在给定确切地址或GPS坐标的情况下，我试图在地图框（3d或2d）中突出显示建筑物。

甚至有可能在mapBox中唯一标识建筑物吗？

我在他们的documentation中找不到任何东西，并且很难破解，因为所有内容都绘制在一块画布上。

解决方法

是的，这是可行的，甚至是建筑物的一部分。 Mapbox中表示为建筑物的任何内容均基于1个或多个功能。为此，您需要查询功能，然后确定将只过滤某些功能以区分行为的属性是什么。

检查一下，这是how to change color and pointer on mouse over上的一个小提琴，在这里我仅对纽约市所有建筑物中的一个功能ID添加了一个过滤器，该过滤器将更改其状态为红色（“悬停； true”）并将鼠标指针更改为map.getCanvasContainer().style.cursor = 'pointer'。

这是相关代码：

    let mapConfig = {
      NYC: {
        origin: [-74.044514,40.689259,39],center: [-74.0137,40.70346,0],zoom: 16.2,pitch: 60,bearing: 35
      }
    }

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
    let point = mapConfig.NYC;
    var map = new mapboxgl.Map({
      style: 'mapbox://styles/mapbox/streets-v11',center: point.center,zoom: point.zoom,pitch: point.pitch,bearing: point.bearing,container: 'map',antialias: true,hash: true
    });

    map.on('style.load',function() {

      if (map.getSource('composite')) {
        map.addLayer({
          'id': '3d-buildings','source': 'composite','source-layer': 'building','type': 'fill-extrusion','minzoom': 14,'paint': {
            'fill-extrusion-color': [
              'case',['boolean',['feature-state','hover'],false],'#ff0000','#ddd'
            ],'fill-extrusion-height': ["number",["get","height"],5],'fill-extrusion-base': ["number","min_height"],'fill-extrusion-opacity': 1
          }
        },'road-label');
      }

      let fHover;

      map.on('click',function(e) {
        var features = map.queryRenderedFeatures(e.point,{
          layers: ['3d-buildings']
        });
        console.log(features[0].id);
      })

      map.on('mousemove',{
          layers: ['3d-buildings']
        });
        //we will change pointer and color for 42455719
        if (features[0] && features[0].id == 42455719) {
          mouseover(features[0]);
        } else {
          mouseout();
        }

      });

      map.on('mouseout',function(e) {
        mouseout();
      });

      function mouseout() {
        if (!fHover) return;
        map.getCanvasContainer().style.cursor = 'default';
        map.setFeatureState({
          source: fHover.source,sourceLayer: fHover.sourceLayer,id: fHover.id
        },{
          hover: false
        });

      }

      function mouseover(feature) {
        fHover = feature;
        map.getCanvasContainer().style.cursor = 'pointer';

        map.setFeatureState({
          source: fHover.source,{
          hover: true
        });
      }

    });