ReactMapGL добавить очки от geoJSON - PullRequest
0 голосов
/ 20 апреля 2020

Я пытаюсь добавить географические JSON точки в мой 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>
  )
}

Мой текущий вывод enter image description here

И мой ожидаемый вывод такой (из mapbox Studio) enter image description here

Может кто-нибудь помочь мне, пожалуйста? Я не могу найти слишком много информации об этом

1 Ответ

1 голос
/ 20 апреля 2020

Ваши исходные данные состоят только из точек, которые вы установили в своем слое type="fill". Тип заливки применяется только к полигонам, а не к точкам или линиям. Вместо этого вы захотите добавить круг или слой символов для точек.

...