Leaflet、Topojson 和 layergroup

Question

我有一个包含三个级别的地理层：村庄 > 县 > 地区。

我的 topojson 由村庄的多边形组成，我有一个包含村庄 > 县 > 区域数据的 json。

我是这样加载的：

L.TopoJSON = L.GeoJSON.extend({
  addData: function(jsonData) {    
    if (jsonData.type === "Topology") {
      for (key in jsonData.objects) {
        geojson = topojson.feature(jsonData, jsonData.objects[key]);
        L.GeoJSON.prototype.addData.call(this, geojson);
      }
    }    
    else {
      L.GeoJSON.prototype.addData.call(this, jsonData);
    }
  }  
});
var topoLayer = new L.TopoJSON();

var village =  {};

$.getJSON('data/villages_data.json', function(data) {
  village = data;
  $.getJSON('data/villages_geo.json').done(addTopoData);
});
function addTopoData(topoData){
  topoLayer.addData(topoData);
  topoLayer.addTo(map);
  topoLayer.eachLayer(handleLayer);
}

我想在地图上显示三个级别：村庄、县和地区。我之前已经设法使用图层组，我正在考虑使用它来添加一个控件来切换每个管理级别。 我还想为每个行政级别设置不同的样式。

我本来希望直接在地图中进行。否则我看到的唯一解决方案是制作三个 shapefile，每个管理员级别一个，然后为三层制作一个 topojson。然后我想访问每个管理员级别会更容易；虽然我什至不确定我会处理它。

有什么建议吗？

Answer 1

有点困惑，因为我不清楚您的设置/解释，但根据我收集到的信息，这就是我会做的。您可以将 shapefile 导出为三个不同的 GeoJSON 文件并将它们转换为一个 TopoJSON 文件：

topojson -o topo.json -- villages.json counties.json regions.json

然后在客户端你可以这样做：

var overlays = {
    'villages': new L.GeoJSON(null, {
        'style': function () {
            return {
                'color': 'red'
            }
        }
    }),
    'counties': new L.GeoJSON(null, {
        'style': function () {
            return {
                'color': 'green'
            }
        }
    }),
    'regions': new L.GeoJSON(null, {
        'style': function () {
            return {
                'color': 'blue'
            }
        }
    })
};

var control = new L.Control.Layers(null, overlays).addTo(map);

$.getJSON('topo.json', function (topo) {
    for (key in topo.objects) {
        var geo = topojson.feature(topo, topo.objects[key]);
        overlays[key].addData(geo);
    }
});

一些类似的事情，但请注意：将其视为伪/未经测试的代码，因为我是徒手编写的，并且没有手动获得适当的 TopoJSON 文件来实际测试它。