如何在 OpenLayers 中手动加载 GeoJSON 图层

Question

我正在尝试从 URL.

加载一些 GeoJSON

当我将 url 传递给矢量源时，一切都按预期工作：

function aircraftLayerFunction() {
  var format = new ol.format.GeoJSON();
  return new ol.layer.Vector({
    source: new ol.source.Vector({wrapX: false, url:"/aircraft", format: format}),
    style: function (feature, resolution) {
      return new ol.style.Style({
        image: new ol.style.Circle({
          radius: 3,
          fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
          stroke: new ol.style.Stroke({color: 'red', width: 1})
        }),
        text: new ol.style.Text({
          text: feature.get('name'),
          offsetY: 8
        })
      });
    }
  });
}

然而，当我传递 loader 时，我什么也没得到，甚至控制台上没有错误消息：

function aircraftLayerFunction() {
  var format = new ol.format.GeoJSON();
  return new ol.layer.Vector({
    source: new ol.source.Vector({wrapX: false, format: format, loader: function(extent, resolution, projection) {
        $.getJSON("/aircraft", function(response) {
          format.readFeatures(response)
        });
      }
    }),
    style: function (feature, resolution) {
      return new ol.style.Style({
        image: new ol.style.Circle({
          radius: 3,
          fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
          stroke: new ol.style.Stroke({color: 'red', width: 1})
        }),
        text: new ol.style.Text({
          text: feature.get('name'),
          offsetY: 8
        })
      });
    }
  });
}

我希望能够传递 loader 而不是 url，这样我就有机会在响应的特性添加到图层之前更改响应。

特别是我想使用 GraphQL 将我的 /aircraft REST 端点替换为更灵活的东西。但是 GraphQL 不断在我的响应中添加 'data' 和 'aircraft' 节点...

Answer 1

readFeatures 只是 returns 一组特征。加载器需要将它们添加到源中（在视图投影中）

  loader: function(extent, resolution, projection) {
    var source = this;
    $.getJSON("/aircraft", function(response) {
      source.addFeatures(format.readFeatures(response, { featureProjection: projection }));
    });
  }

如何在 OpenLayers 中手动加载 GeoJSON 图层

How to manually load a GeoJSON layer in OpenLayers

jquery

openlayers

geojson

graphql