如何根据地图范围将 GeoJSON 数据动态加载到我的 OpenLayers 3.5.0 地图层中？

Question

我正在从 OpenLayers 3.2.0 迁移到 3.5.0，但无法将我的 GeoJSON 数据加载到我的矢量图层中。我有它的工作，但在我将它们添加到我的矢量源之前，我正在从我的 GeoJSON 数据源转换特征的几何形状。

有没有办法让 OpenLayers 3.5.0 自动应用转换？

我的 GeoJSON 数据源中的数据使用 EPSG:4326，我认为我需要将几何重新投影到 EPSG:3857 以便在我的地图上显示它们。 GeoJSON 数据源的 crs 属性中有投影信息，我的矢量源也有投影集。尽管如此，特征几何体并没有自行转换。

我需要通过 URL 将可视地图区域的边界传递到我的 GeoJSON 数据源，我不想一次加载所有数据。我的矢量源上有一个加载程序函数，它获取当前地图范围并为请求构建 URL。

Sample Data from my GeoJSON 源可用，通过 linter 验证，我认为它是合理的。

以下是我目前使用的代码。

var vectorFormat = new ol.format.GeoJSON();
var featureStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
    fill: new ol.style.Fill(
      {color: 'rgba(255, 69, 0, 0.75)'}),
    stroke: new ol.style.Stroke(
      {color: 'rgba(255, 0, 0, 0.95)', width: 1})
    })
 });

var vectorSource = new ol.source.Vector({
    projection: new ol.proj.Projection({'code':'EPSG:3857'}),
    strategy: ol.loadingstrategy.bbox,
    loader: function(extent, resolution, projection) {
      var coordinate1 = ol.proj.transform([extent[0], extent[1]],
        'ESPG:3857', 'EPSG:4326')
      var coordinate2 = ol.proj.transform([extent[2], extent[3]],
        'ESPG:3857', 'EPSG:4326')
      var url = 'api/sites/geo/bounds/4326/' + coordinate1[1] 
        + ',' + coordinate1[0] + '/' + coordinate2[1] + ',' 
        + coordinate2[0] + "/";
        $.ajax({
            url: url,
            dataType: 'json'
        }).then(function(response) {
            var features = vectorFormat.readFeatures(response);
            var transformFn = ol.proj.getTransform(
              response.crs.properties.name, projection);
            for(index in features) {
                var feature = features[index];
                feature.getGeometry().applyTransform(transformFn);
            }
            vectorSource.addFeatures(features);
        });
    }
});

this.state.map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: vectorSource,
          style: featureStyle
        })
     ],
     view: new ol.View({
        center: this.transformToOl(this.state.center),
        zoom: this.state.zoom
      })
});

任何正确方向的帮助或指示将不胜感激。 :-D

Answer 1

是的，OpenLayers 可以为您进行重新投影。您甚至不必在源上设置投影。几何图形将自动重新投影到视图投影。

var vectorSource = new ol.source.Vector({
  url: 'file.json',
  format: new ol.format.GeoJSON()
});

http://jsfiddle.net/h9zwjf88/

更新

如果您想使用自定义加载器，您可以在解析特征时指定目标投影（另请参阅 ol.format.GeoJSON.html#readFeatures）：

var vectorSource = new ol.source.Vector({
  strategy: ol.loadingstrategy.bbox,
  loader: function(extent, resolution, projection) {
    $.ajax(url).then(function(response) {
      var features = format.readFeatures(response,
        {featureProjection: 'EPSG:3857'});
      vectorSource.addFeatures(features);
    });
  }
});

http://jsfiddle.net/h9zwjf88/1/

如何根据地图范围将 GeoJSON 数据动态加载到我的 OpenLayers 3.5.0 地图层中？

How do I dynamically load GeoJSON data, based on the map extent, into my OpenLayers 3.5.0 map layer?

geojson

openlayers-3