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

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

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

我说难以忍受，并跳过了明显的部分。你应该充分利用GeoJSON的功能，一个countryborder应该只是一个多边形或多边形。这是一个功能。您可以创建具有多个功能的GeoJSON featurecollection，如果需要，最多可以创建数千个，并将整个集合放在一个文件中。

{
    "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

事实上，你不必自己这样做。在网上有很多可以找到的。就像我在这个例子中使用的那个我在这里为某人制作的那个（请注意，它是传单，但它应该得到重点）这里是关于Plunker：http://plnkr.co/edit/UGQ9xt?p=preview这里是我在Github上使用的回购：{{3但是你看看周围有很多其他来源的世界边界形状，即使是非常高的细节。

Answer 2

您不仅限于使用protocol加载数据。您可以阅读每个文件并将其提供给GeoJSON parser，然后返回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 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文件以创建一个或多个矢量图层

3 个答案: