在 react-map-gl 中画线时有什么问题吗？答案

【问题标题】：Is there anything goes wrong while drwaing line in react-map-gl?在 react-map-gl 中画线时有什么问题吗？
【发布时间】：2020-11-03 18:28:22
【问题描述】：

我正在使用 react-map-gl 作为 mapbox 在屏幕上绘制地图的 React 包装器。我想在地图中添加一条线。我可以使用Polyline 组件在传单中实现这一点。

示例

routes = data.map((points, i) => (
  <Polyline key={i} positions={points} color="red" weight={4} lineCap="square" />
));

结果：

我认为我们可以使用Source 和Layer 组件在react-map-gl 中实现这一目标。

Index.js

import Route1 from "./Route1"
    <ReactMapGL
                {...viewport}
                ref={mapRef}
                mapStyle={mapStyle}
                mapboxApiAccessToken="API__KEY"
                onViewportChange={nextViewport => setViewport(nextViewport)}
            >
                <Route1/>
            </ReactMapGL>

Route1

import React from "react";
import {Source, Layer} from "react-map-gl";
import * as tempdata from "./temp-data";
const Routes=()=>{
    return <Source type="geojson" data={tempdata.route1}>
        <Layer {...tempdata.layer}/>
    </Source>
}
export default Routes;

temp-dara

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': 'red',
      'line-width': 8
  }
}
export const route1={
    
  type: "Feature",
  properties: {},
  geometry: {
    type: "LineString",
    coordinates: [
        [31.780632, 76.994168],
        [31.781929, 76.993894],
        [31.783204 ,76.997771],
        [31.782787 ,77.005974],
        [31.786132 ,77.007503],
        [31.788978 ,77.009612],
        [31.794107 ,77.012691],
        [31.796991 ,77.017183],
        [ 31.797196, 77.020515],
        [31.794456 ,77.032804],
        [31.794735 ,77.050037],
        [31.791744 ,77.052444],
        [31.792045, 77.053965]
    ]
  }
}

相同的坐标被传递到传单中。

结果

为什么相同的数据会出现不同的行。

【问题讨论】：

标签： reactjs mapbox react-map-gl

【解决方案1】：

您的临时数据中的经度/纬度似乎相反。以下对我有用。

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': 'red',
      'line-width': 8
  }
}
export const route1={

  type: "Feature",
  properties: {},
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168, 31.780632],
        [76.993894, 31.781929],
        [76.997771, 31.783204],
        [77.005974, 31.782787],
        [77.007503, 31.786132],
        [77.009612, 31.788978],
        [77.012691, 31.794107],
        [77.017183, 31.796991],
        [77.020515, 31.797196],
        [77.032804, 31.794456],
        [77.050037, 31.794735],
        [77.052444, 31.791744],
        [77.053965, 31.792045]
    ]
  }
}

【讨论】：