ReactMapGL从geoJSON添加点

Question

我正在尝试将geoJSON点添加到我的ReactMapGL，但它似乎没有呈现...控制台也没有任何错误

我的代码如下

const Map = ({ question, updateCurrent }) => {
  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: -41.189,
    longitude: 175.309,
    zoom: 4.49,
  })
  const mapData = {
    features: [
      {
        type: 'Feature',
        properties: {
          name: 'Canterbury',
        },
        geometry: {
          coordinates: [172.479644, -43.475418],
          type: 'Point',
        },
        id: '28682b312c41375af64f65b452c4c32c',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Southland',
        },
        geometry: {
          coordinates: [167.905597, -45.838703],
          type: 'Point',
        },
        id: '317db867d0fc3c2f629cf4cea1df3077',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Gisborne',
        },
        geometry: {
          coordinates: [177.926385, -38.53651],
          type: 'Point',
        },
        id: '3b30468c228e2ee576cc1943f86dfe75',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Manawatu - Wanganui',
        },
        geometry: {
          coordinates: [175.434562, -39.524608],
          type: 'Point',
        },
        id: '79df70a0e4371c7eb0d7db4db9a86b06',
      },
      {
        type: 'Feature',
        properties: {
          name: 'West Coast',
        },
        geometry: {
          coordinates: [172.185093, -41.514477],
          type: 'Point',
        },
        id: '7f471be1cdfe51a2b5d7ca0c5c826c64',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Nelson / Tasman / Marlborough',
        },
        geometry: {
          coordinates: [172.981906, -41.267511],
          type: 'Point',
        },
        id: '806c715276e1ef82edd796e5934f8e4a',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Wellington - Wairarapa',
        },
        geometry: {
          coordinates: [175.486838, -41.197457],
          type: 'Point',
        },
        id: '9768592cef2eee2dc7f6e874e1944084',
      },
   ],
    type: 'FeatureCollection',
  }
  return (
    <Container>
      <ReactMapGL
        {...viewport}
        width="80vw"
        height="70vh"
        mapStyle="mapbox://styles/mapbox/light-v9"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      >
        <Source id="New Zealand" type="geojson" data={mapData} />
        <Layer
          id="anything"
          type="fill"
          source="New Zealand"
          paint={{ 'fill-color': '#228b22', 'fill-opacity': 0.4 }}
        />
      </ReactMapGL>
    </Container>
  )
}

我当前的输出是

我的预期输出是这个（来自mapbox Studio）

有人可以帮我吗？我似乎找不到太多有关此的信息

Answer 1

您的源数据仅包含您已设置为type="fill"的图层中的点。填充类型仅适用于多边形，而不适用于点或线。您需要添加圆形或符号层来代替点。