如何使用react-map-gl在两个点之间绘制线？

Question

如何使用react-map-gl在两个点之间绘制线？

8

我正在尝试使用 react-map-gl 库在两个点之间绘制一条线。然而，我在官方文档中找不到示例。因此，我正在尝试从以下使用 Mapbox 库的代码片段中复现相同的行为。

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function() {
    map.addSource('route', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    [-122.483696, 37.833818],

                    [-122.493782, 37.833683]
                ]
            }
        }
    });
    map.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#888',
            'line-width': 8
        }
    });
});

这是沙盒，我在控制台上没有看到任何错误，但线条没有显示出来：
https://codesandbox.io/s/draw-line-between-two-point-v0mbc?file=/src/index.js:214-226

- Sean Liu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charlie G · Accepted Answer

在沙盒中的代码实际上是可以运行的（至少对我是这样），但它会误导你，因为所绘制的线与视口毫无关系。需要注意的是，坐标是以[经度，纬度]的数组形式给出的，这可能不是大多数人所想象的。例如，如果您从谷歌地图复制并粘贴旧金山的[纬度，经度]，则会得到[37.77909036739809，-122.41510269913951]。然后你需要将它们反转并放入代码中。

const dataOne = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "LineString",
        coordinates: [
            [-122.41510269913951, 37.77909036739809],
            [39.5423, -77.0564]
        ]
    }
};

此外，示例代码中有一些冗余的内容。编辑变量dataOne而不是其他未使用的地方。

现在你会看到一条从旧金山到南极洲某个随机点的线路，这很容易被忽视。

以防链接失效，完整代码如下：

import React, { Component } from "react";
import { render } from "react-dom";
import ReactMapGL, { Source, Layer } from "react-map-gl";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 38.63738602787579,
        longitude: -121.23576311149986,
        zoom: 6.8,
        bearing: 0,
        pitch: 0,
        dragPan: true,
        width: 600,
        height: 600
      }
    };
  }

  render() {
    const { viewport } = this.state;
    const MAPBOX_TOKEN =
      "pk.eyJ1Ijoic21peWFrYXdhIiwiYSI6ImNqcGM0d3U4bTB6dWwzcW04ZHRsbHl0ZWoifQ.X9cvdajtPbs9JDMG-CMDsA";


    const dataOne = {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: [
          [-122.41510269913951, 37.77909036739809],
          [39.5423, -77.0564]
        ]
      }
    };
    return (
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onViewportChange={(newViewport) => {
          this.setState({ viewport: newViewport });
        }}
      >
        <Source id="polylineLayer" type="geojson" data={dataOne}>
          <Layer
            id="lineLayer"
            type="line"
            source="my-data"
            layout={{
              "line-join": "round",
              "line-cap": "round"
            }}
            paint={{
              "line-color": "rgba(3, 170, 238, 0.5)",
              "line-width": 5
            }}
          />
        </Source>
      </ReactMapGL>
    );
  }
}

render(<App />, document.getElementById("root"));