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地图图层中？

1 个答案: