Question

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

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

mark1应该连接到mark2＆amp; mark3。 mark2应连接到mark1＆amp; 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）如this示例

中所示，通过mapStyles道具设置geojson

如何使用react-map-gl

1 个答案: