Angular中使用Mapbox加载GeoJSON多边形报TS2322错误如何解决

这个TypeScript报错是GeoJSON类型校验规则导致的：项目中引入的@types/geojson类型定义里，Feature类型强制要求传入properties属性，你当前构造的GeoJSON要素只包含type和geometry字段，缺少必填的properties，因此类型检查不通过。
注意：Mapbox官方JS示例可以省略properties是因为JavaScript是弱类型语言，不会做编译期类型校验，在TypeScript项目中必须符合类型定义要求。

方案1（推荐，符合GeoJSON规范） #

在GeoJSON Feature对象中补充properties字段即可，如果你暂时不需要给多边形绑定自定义属性，直接传空对象就行。
修改后的数据源添加代码如下：

map.addSource('maine', {
    'type': 'geojson',
    'data': {
        'type': 'Feature',
        // 补充必填的properties字段
        'properties': {},
        'geometry': {
            'type': 'Polygon',
            // 多边形轮廓坐标
            'coordinates': [
                [
                    [-67.13734, 45.13745],
                    [-66.96466, 44.8097],
                    [-68.03252, 44.3252],
                    [-69.06, 43.98],
                    [-70.11617, 43.68405],
                    [-70.64573, 43.09008],
                    [-70.75102, 43.08003],
                    [-70.79761, 43.21973],
                    [-70.98176, 43.36789],
                    [-70.94416, 43.46633],
                    [-71.08482, 45.30524],
                    [-70.66002, 45.46022],
                    [-70.30495, 45.91479],
                    [-70.00014, 46.69317],
                    [-69.23708, 47.44777],
                    [-68.90478, 47.18479],
                    [-68.2343, 47.35462],
                    [-67.79035, 47.06624],
                    [-67.79141, 45.70258],
                    [-67.13734, 45.13745]
                ]
            ]
        }
    }
});

补全后TS报错会直接消失，多边形渲染逻辑和官方示例完全一致，不会有功能问题。后续如果需要给多边形绑定名称、ID等属性，直接在properties对象里添加键值对即可。

方案2（不推荐，仅用于快速绕开校验） #

如果不想补充properties字段，可以通过类型断言强制跳过TS的类型检查，写法如下：

map.addSource('maine', {
    'type': 'geojson',
    'data': {
        'type': 'Feature',
        'geometry': {
            // 原有坐标配置保持不变
        }
    } as any // 类型断言跳过校验
});

这种写法不符合GeoJSON标准规范，后续如果需要读取要素属性容易出现空值问题，非必要不使用。

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