无法在 Openlayers 5 中加载 Vanilla GeoJSON

Question

我从一些我使用 https://geojson.io 构建的有效 GeoJSON 开始。我的愿望是将其加载到 Openlayers 5 地图中。

我从 this tutorial 开始，并尝试使用远程源代替本地源。相关块如下所示：


var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: "map",
  view: new View({
    center: [-13739617.939346, 6179221.917031],
    zoom: 11
  })
});

map.once("postrender", () => {
  axios.get(jsonUrl).then(({ data } = {}) => {
    const jsonSource = new VectorSource({
      features: new GeoJSON().readFeatures(data, {
        featureProjection: "EPSG:4326"
      })
    });

    const jsonLayer = new VectorLayer({
      source: jsonSource,
      style: jsonStyleFunction
    });

    map.addLayer(jsonLayer);
  });
});

当我无法加载时，我能够使用控制台日志来确定断点不是 get 请求。我还能够看到 jsonSource const 中的 featureChangeKeys_ 数量与我的 JSON 对象中的特征数量相同：

featureChangeKeys_:
39: (2) [{…}, {…}]
41: (2) [{…}, {…}]
43: (2) [{…}, {…}]
45: (2) [{…}, {…}]
47: (2) [{…}, {…}]

Answer 1

问题是您试图在与地图本身不同的坐标参考系统 (CRS) 中加载数据。默认情况下，地图在 EPSG:3857 投影中加载，而大多数 GeoJSON 在 EPSG:4326 中。

您可以通过 "looking for Null Island" 进行测试。将地图平移到经纬度 (0, 0)，您可能会看到如下所示的小点：

如果您看到像上面这样的小斑点，那么这肯定是问题所在。要解决这个问题，您可以通过定义 featureProjection 和 dataProjection 属性让 Openlayers 动态转换数据：

const jsonSource = new VectorSource({
      features: new GeoJSON().readFeatures(data, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
      })
    });

无法在 Openlayers 5 中加载 Vanilla GeoJSON

Unable to Load Vanilla GeoJSON in Openlayers 5

openlayers

openlayers-5