Oop ReactMapGL从geoJSON添加点

我正在尝试将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>
  )
}

const-Map=（{question，updateCurrent}）=>{
const[viewport，setViewport]=useState({
宽度：400，
身高：400，
纬度：-41.189，
经度：175.309，
缩放：4.49，
})
常量映射数据={
特点：[
{
键入：“功能”，
特性：{
名称：“坎特伯雷”，
},
几何图形：{
座标：[172.479644，-43.475418]，
键入：“点”，
},
id:'28682B312C41375AF64F65B452C42C'，
},
{
键入：“功能”，
特性：{
名称：'南方'，
},
几何图形：{
座标：[167.905597，-45.838703]，
键入：“点”，
},
id:'317db867d0fc3c2f629cf4cea1df3077'，
},
{
键入：“功能”，
特性：{
姓名：'吉斯伯恩'，
},
几何图形：{
座标：[177.926385，-38.53651]，
键入：“点”，
},
id:'3b30468c228e2ee576cc1943f86dfe75'，
},
{
键入：“功能”，
特性：{
名称：“Manawatu-Wanganui”，
},
几何图形：{
座标：[175.434562，-39.524608]，
键入：“点”，
},
id:'79df70a0e4371c7eb0d7db4db9a86b06'，
},
{
键入：“功能”，
特性：{
名称：“西海岸”，
},
几何图形：{
座标：[172.185093，-41.514477]，
键入：“点”，
},
id:'7f471be1cdfe51a2b5d7ca0c5c826c64'，
},
{
键入：“功能”，
特性：{
名称：“纳尔逊/塔斯曼/马尔伯勒”，
},
几何图形：{
座标：[172.981906，-41.267511]，
键入：“点”，
},
id:'806c715276e1ef82edd796e5934f8e4a'，
},
{
键入：“功能”，
特性：{
名称：“惠灵顿-韦拉拉帕”，
},
几何图形：{
座标：[175.486838，-41.197457]，
键入：“点”，
},
id:'9768592CEF2EE2DC7F6E874E1944084'，
},
],
类型：“FeatureCollection”，
}
返回(
setViewport（nextViewport）}
mapboxApiAccessToken={mapboxApiAccessToken}
>
)
}

我当前的输出是

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

---

有人能帮帮我吗？我似乎找不到太多关于这方面的信息。您的源数据只包含您设置的图层中的点。填充类型仅适用于多边形，而不适用于点或线。您可能希望为点添加一个圆或符号层。

嘿，我的评论似乎消失了，但感谢您解决了我的问题。在一个稍微相关的注释中，我如何显示该点的名称？是的，我通过电子邮件看到了你的评论，可能是一个过于热心的mod决定删除它，不知道。文本作为符号层完成，相同的符号层可用于图标+文本，或者可以使用圆形层作为文本的图标+符号层。