我正在尝试将 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）
有人可以帮帮我吗？我似乎找不到太多关于此的信息