react-map-gl - 如何使用 react-map-gl 将连接线添加到地图标记

Question

如何使用 react-map-gl 将连接线添加到地图标记？

例如：我有 3 个标记（mark1、mark2、mark3）

mark1 应该连接到 mark2 & mark3 。mark2 应该连接到 mark1 &mark 3 .... 谁能帮帮我...

Answer 1

几种方法：

1）可能最好的方法是使用deck.gl LineLayer。Deck.gl 旨在与 一起使用react-map-gl，所以我想这是react-map-gl's预期的解决方案。
2）在你的地图上设置一个参考，然后在地图上添加一个图层：

   <ReactMapGL
      id={'map'}
      ref={'map'}
      onLoad={this.addLines}
     .... />

   addLines = () => {
     const map = this.refs.map.getMap()
     map.addLayer({
       "id": "route",
       "type": "line",
       "source": {
       "type": "geojson",
          "data": {
             "type": "Feature",
             "properties": {},
             "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.48369693756104, 37.83381888486939],
                    [116.48348236083984, 37.83317489144141],
                ]
              }
            }
      },
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "#888",
        "line-width": 8
      }
    });
  }

3) 如本例所示，通过 mapStyles 道具设置 geojson