Question

我正在使用角度为7的mapbox-gl-js。我使用https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/上给出的地图。

因此，我用于地图创建的代码如下：

初始化地图：

map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/light-v10',
  center: center,
  zoom: 15.5,
  pitch: 45,
  bearing: -17.6,
  container: 'map'
});

并添加建筑物：

map.on('load', function() {
  const layers = map.getStyle().layers;
  map.addSource('custom', {
    type: 'geojson',
    data: geojson
  });

  let labelLayerId;
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
      labelLayerId = layers[i].id;
      break;
    }
  }
  map.addLayer({
    id: '3d-buildings',
    source: 'composite',
    'source-layer': 'building',
    filter: ['==', 'extrude', 'true'],
    type: 'fill-extrusion',
    minzoom: 15,
    paint: {
      'fill-extrusion-color': '#aaa',
      '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': .6
    }
  }, labelLayerId);
});

我的目标是通过单击更改单个建筑物的颜色，然后获取建筑物中心的lngLat 。我深入研究了这些建筑物的结构，并拼命寻找某种“索引”来区分这些建筑物。首先，我创建了一个地图onclick侦听器，它将返回我查询的点e：

map.on('click', function(e) {
    const features = map.queryRenderedFeatures(e.point);
});

然后，我遍历找到的功能，并检查我的点击下方是否有建筑物。然后，此建筑物存储为const building。

我尝试添加使用map.setPaintProperty：

map.setPaintProperty('3d-buildings', 'fill-extrusion-color', [
        'match',
        ['get', 'id'], 
        building.id, '#fbb03b',
        /* other */ '#ccc'
      ]);

但是我注意到我需要找到一些唯一的标识符，最终我放弃了。

我还尝试添加：

'fill-extrusion': [
    'case',
    ['boolean', ['feature-state', 'clicked'], true],
    '#aaa',
    '#fbb03b'
]

与：

map.setFeatureState({source: '3d-buildings', id: building.id}, { clicked: true});

由于没有唯一的标识符，我也很努力。

我深入挖掘了以下属性：

building.layer
building.properties
building.geometry
building._vectorTileFeature.properties
building._vectorTileFeature._pbf
building._vectorTileFeature._values

尽管如此，即使我找到了一个看起来符合我的目的的东西，我也不知道如何给整个建筑物上色。

非常感谢您的帮助，谢谢。

单击更改特征绘制属性

0 个答案: