如何将源和图层添加到我的 react-map-gl答案

【问题标题】：how can i add source and layer to my react-map-gl如何将源和图层添加到我的 react-map-gl
【发布时间】：2020-12-14 01:30:44
【问题描述】：

我正在尝试在我的地图上添加源和图层，即使正在渲染地图，它也不会渲染。但是每当我将源类型更改为矢量时，它就可以工作，但我想使用的类型是 geojson（为了使用多边形和折线），但它似乎不起作用。

我不知道我做错了什么，我已经尝试解决这个问题好几个小时了，即使阅读了文档，我仍然不知道我做错了什么。

这是下面的代码。

import ReactMapGL, {Source, Layer} from 'react-map-gl'

      const data = {
        type: "Feature",
        geometry: {
        type: "Polygon",
        coordinates: [
        [
        -107.814303,
        37.935657
        ],
        [
        -107.814424,
        37.936094
        ],
        [
        -107.816288,
        37.936826
        ],
        [
        -107.814644,
        37.940931
        ],
        [
        -107.80993,
        37.939892
        ],
        [
        -107.807686,
        37.939376
        ],
        [
        -107.80932,
        37.935416
        ],
        [
        -107.809507,
        37.935014
        ],
        [
        -107.810191,
        37.934835
        ],
        [
        -107.810765,
        37.934708
        ],
        [
        -107.811377,
        37.934732
        ],
        [
        -107.813902,
        37.935372
        ],
        [
        -107.814303,
        37.935657
        ]
        ]
        }
        }


       <ReactMapGL
       mapStyle='mapbox://styles/mapbox/dark-v10'
       mapboxApiAccessToken={accessKey}
       onViewportChange={viewport => {
        setViewport(viewport)
    }}
       {...viewport}
       >
       <Source id="route" type="geojson" data={data} />
       <Layer
            id="route"
            type="line"
            source="route"
            paint={{
              'line-color': "green"
            }} />

       </ReactMapGL> }

提前感谢您的帮助。

【问题讨论】：

标签： reactjs mapbox mapbox-gl-js react-map-gl

【解决方案1】：

也许这就是你要找的。p>

<Layer
  {...{
    id: "zone",
    type: "fill",
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-118.5687542, 34.0412107],
              [-118.4082538, 33.8727824],
              [-118.3717758, 33.8729961],
              [-118.3688574, 33.9671539],
              [-118.3363247, 33.9894178],
              [-118.2811303, 34.0096732],
              [-118.1707964, 34.0336193],
              [-118.0576271, 34.0671419],
              [-118.0600304, 34.1575335],
              [-118.1163354, 34.2083719],
              [-118.5152764, 34.2268251],
              [-118.5687542, 34.0412107],
            ],
          ],
        },
      },
    },
    layout: {},
    paint: {
      "fill-color": "rgb(5, 30, 52)",
      "fill-opacity": 0.1,
    },
  }}
/>

【讨论】：