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

Question

我正在使用 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>

路线1

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

Same coordinates are passed into leaflet.

结果

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

Answer 1

看起来 longitude/latitude 在你的 temp-data 中是相反的。以下对我有用。

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

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

Is there anything goes wrong while drwaing line in react-map-gl?

mapbox

reactjs

react-map-gl

例子

结果：

结果

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