TS环境下react-leaflet GeoJSON组件不渲染Point且报类型错误求助

• 类型报错原因：TypeScript导入本地JSON文件时，会将所有字符串字段推导为通用string类型，而@types/geojson定义中type字段是固定的字面量联合类型，二者类型不匹配触发TS2322错误。
• 点位不渲染原因：GeoJSON规范强制要求坐标顺序为[经度, 纬度]，你提供的坐标写反了经纬度顺序，导致点位被渲染到了地图上不可见的区域。

类型报错修复 #

提供两种可选方案：

方案1：JSON导入时添加类型断言 #

直接在导入JSON的位置做类型声明，无需修改原JSON文件：

import sensors from "./../Sensors/sensors.json";
// 类型断言为合法的GeoJSON FeatureCollection
const geoJsonData = sensors as GeoJSON.FeatureCollection;

方案2：TS文件导出GeoJSON数据 #

你之前的TS导出方案只需调整类型定义即可，不需要手动给每个type字段加断言：

export const featureCollection: GeoJSON.FeatureCollection<GeoJSON.Point> = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        // 调整经纬度顺序为[经度, 纬度]
        coordinates: [24.75224, 59.433421],
      },
      properties: {
        name: "SomeSensor",
      },
    },
  ],
};

点位渲染修复 #

将所有GeoJSON数据中的coordinates字段顺序调整为[经度, 纬度]，比如你原JSON中的[59.433421, 24.75224]要改成[24.75224, 59.433421]。

调整后直接传入GeoJSON组件即可正常渲染：

<GeoJSON data={geoJsonData} key="mydata" />

如果需要自定义点位样式、绑定弹窗，可以通过pointToLayer属性配置：

import L from "leaflet";

<GeoJSON 
  data={geoJsonData} 
  key="mydata"
  pointToLayer={(feature, latlng) => {
    return L.marker(latlng).bindPopup(feature.properties.popupContent)
  }}
/>

注意：react-leaflet内置的Marker、Popup等组件的位置参数格式为[纬度, 经度]，和GeoJSON的坐标顺序刚好相反，开发时不要混淆。

内容的提问来源于stack exchange，提问作者Madkoo