在react-map-gl中删除行时是否出了什么问题？ 示例结果：结果为什么同一数据出现不同的行

如何解决在react-map-gl中删除行时是否出了什么问题？ 示例结果：结果为什么同一数据出现不同的行

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

示例

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

结果：

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

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]
    ]
  }
} 

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

结果

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

解决方法

看起来临时数据中的经度/纬度是相反的。以下对我有用。

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]
    ]
  }
}