OpenLayers加载用户选择JSON文件生成矢量图层失败求助

问题核心 #

GeoJSON中[0,0]坐标能正常显示，但更换为[10,5]、[10,0]等坐标后无法显示，本质是投影转换参数缺失导致坐标解析错误。

原因分析 #

GeoJSON默认采用WGS84坐标系（EPSG:4326，经纬度格式），而OpenLayers默认地图使用Web墨卡托坐标系（EPSG:3857）。你的代码仅设置了featureProjection: 'EPSG:3857'，但未指定dataProjection，OpenLayers会默认数据投影与要素投影一致，导致非[0,0]的经纬度坐标被错误当成Web墨卡托坐标解析，最终出现在地图可视范围外（[0,0]在两种投影下坐标值几乎一致，因此能显示）。

修复代码 #

在readFeatures方法中同时明确指定数据投影和要素投影：

const vectorSource = new VectorSource({
  features: new GeoJSON().readFeatures(json, {
    dataProjection: 'EPSG:4326', // GeoJSON默认坐标系
    featureProjection: 'EPSG:3857' // 地图使用的坐标系
  })
});
const vectorLayer = new VectorLayer({ source: vectorSource });

map.addLayer(vectorLayer);
// 可选：让地图自动定位到要素所在范围
map.getView().fit(vectorSource.getExtent());

额外验证 #

如果修复后仍看不到要素，添加map.getView().fit(vectorSource.getExtent())可让地图自动缩放到要素区域，避免因当前视图范围不对导致无法看到内容。

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