小编Dev*_*evC的帖子

如何使用mapbox在同一图层中绘制多个不同颜色的点?

我想使用 Mapbox 在同一层中绘制多个点,并且所有这些点都将拥有自己的属性,例如颜色和标签。并且在单击单个点时,它应该显示一个带有该点 ID 的弹出窗口。

这是否可以实现,到目前为止,我一直在循环点数组,并且对于每个点,我正在创建一个单独的源和图层。

for(let i = 0; i < buildings.length; i++){
      let mapSource = map.getSource(buildings[i].building_id);
      if(!mapSource){
        map.addSource(buildings[i].building_id, {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': buildings[i].centroid.coordinates
            }
          }
        });
      }
      let mapLayer = map.getLayer(buildings[i].building_id);
      if(!mapLayer){
          map.addLayer({
            'id': buildings[i].building_id,
            'type': 'circle',
            "paint": {
              "circle-radius": 6,
              "circle-color": SectionColors[buildings[i].section[0]]
            },
            "source": buildings[i].building_id
          });
      }
      let mapLabel = map.getLayer(`${buildings[i].building_id}-label`);
      if(!mapLabel){
        map.addLayer({
          'id': `${buildings[i].building_id}-label`,
          'type': 'symbol',
          'source': buildings[i].building_id,
          'layout': {
            'text-field': `${buildings[i].building_id}`,
            'text-size': 14,
            'text-variable-anchor': ["left"],
            'text-radial-offset': 0.3, …
Run Code Online (Sandbox Code Playgroud)

reactjs mapbox-gl-js

2
推荐指数
1
解决办法
1606
查看次数

标签 统计

mapbox-gl-js ×1

reactjs ×1