OpenLayers 想要访问多个 GeoJSON 文件来创建一个或多个矢量图层

Question

如果我有 200 多个定义世界各国边界的 GeoJSON 文件，我将如何让这些数据显示在地图上？阅读多个文件是我无法弄清楚的部分。我知道如何为单个 GeoJSON 文件执行此操作。这是我的单文件示例：

var map, layer;

function init() {
  layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0", {
      layers: 'basic'
    }, {
      style: 'min-height:700px'
    });

  map = new OpenLayers.Map('map');
  map.addLayer(layer);
  createCountryBorders(map);

  map.setCenter(new OpenLayers.LonLat(0, 0), 4);
  map.zoomToMaxExtent();
}

function createCountryBorders(map) {
  var geoJsonLayer = new OpenLayers.Layer.Vector("Country Borders", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
      url: "countryborders/sub/countries-hires-line.json",
      format: new OpenLayers.Format.GeoJSON()
    })
  });
  map.addLayer(geoJsonLayer);
}

Answer 1

您不限于使用 protocol 加载数据。您可以读取每个文件并将其提供给 GeoJSON parser, getting back an array of Vectors，然后可以将其添加到矢量图层。像这样：

var map = // ...
var vectorLayer = // ...
map.addLayer(vectorLayer);

var urls = ['country1.json', 'country2.json', 'country3.json'];
var parser = new OpenLayers.Format.GeoJSON();

urls.each(function(geoJsonUrl) {
  OpenLayers.Request.GET({
    url: geoJsonUrl,
    callback: function(response) {
      var geoJson = response.responseText;
      var vectors = parser.read(geoJson);
      vectorLayer.addFeatures(vectors);
    }
  });
})

请注意，通过网络传输 200 个文件然后处理每个文件会使初始化变得明显（甚至可能难以忍受！）

Answer 2

kryger 在上面的回答中说了什么：

Note that transferring 200 files over the network and then processing each of them is going to make initialization noticeable (and perhaps even unbearable!)

我会说难以忍受并跳过值得注意的部分。您应该充分利用 GeoJSON 的功能，一个国家边界应该只不过是一个多边形或多边形。这是一个特点。您可以创建一个包含多个特征的 GeoJSON 特征集合，如果需要，最多可达数千个，并将整个集合放在一个文件中。

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "id": "AFG",
        "properties": {
            "Afghanistan"
        },
        "geometry": {
            "type": "MultiPolygon".
            "coordinates": [......]
        }
    }, {
        "type": "Feature",
        "id": "ALB",
        "properties": {
            "Albania"
        },
        "geometry": {
            "type": "MultiPolygon",
            "coordinates": [......]
        }
    }]
}

检查 FeatureCollection 的 GeoJSON 规范：http://geojson.org/geojson-spec.html#feature-collection-objects

事实上，您不必自己这样做。有很多可以在网上找到。就像我在这个例子中使用的那个，我在 SO 上为某人制作的（请注意，它是传单，但它应该明白重点）在 Plunker 上：http://plnkr.co/edit/UGQ9xt?p=preview and here's the repo i used on Github: https://github.com/johan/world.geo.json 但是你看看周围还有很多其他的这些世界边界形状的来源，甚至非常详细。

Answer 3

根据 kryger 的建议，我能够让这段代码工作。然而，我真正想要的是一种从我从服务器收到的文件列表中生成 urls 数组的方法。

即使我最终只有 10 个左右的文件，如果可以避免的话，我也不想硬编码它们的值。

function createCountryBorders(map) {

    var vectorLayer = new OpenLayers.Layer.Vector("Country Borders");
    var urls = ['country1.json', 'country2.json', 'country3.json'];
    var parser = new OpenLayers.Format.GeoJSON();

    for( var ii in urls ) {
        var file = urls[ii];
        OpenLayers.Request.GET({
            url: 'countryborders/' + file,
            callback: function(response) {
              var geoJson = response.responseText;
              var vectors = parser.read(geoJson);
              vectorLayer.addFeatures(vectors);
            }
      });
    }

    map.addLayer(vectorLayer);
}

OpenLayers 想要访问多个 GeoJSON 文件来创建一个或多个矢量图层

OpenLayers want to access multiple GeoJSON files to create one or more vector layers

openlayers

geojson