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

【问题标题】：how to Add Connecting Lines to Map Markers using react-map-gl如何使用 react-map-gl 将连接线添加到地图标记
【发布时间】：2017-12-13 10:38:27
【问题描述】：

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

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

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

【问题讨论】：

标签： react-map-gl

【解决方案1】：

几种方法：

1) 可能最好的方法是使用deck.glLineLayer。 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) 通过 this 示例中看到的 mapStyles 属性设置 geojson

【讨论】：