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

Question

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

例如:我有 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 的预期解决方案。
2) 在 map 上设置一个 ref，然后向 map 添加一个图层:

   <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 Prop 设置 geojson，如 this 中所示例子