在传单中上下切换层(更复杂的场景)
我正在使用jQuery的getJSON方法加载我在QGIS中创建的外部行数据。
我要做的是打开和关闭我的层-简单的复选框，没有单选按钮的基本地图。我也希望所有的层是关闭时，地图最初加载。
我的代码
var map=L.map('map').setView([41.9698, -87.6859], 12);
var basemap = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png',
{
//attribution: would go here
maxZoom: 17,
minZoom: 9
}).addTo(map);
//display geoJson to the map as a vector
var x = function(source, map)
{
var layers = L.geoJson(source,
{
style: function(feature){
var fillColor, side=feature.properties.side;
if (side==='Both') fillColor = '#309e2d';
else if (side==='Neither') fillColor = '#d90f0f';
else if (side==='West Only') fillColor = '#e27f14';
else if (side==='East Only') fillColor = '#2b74eb';
else if (side==='North Only') fillColor = '#eae42b';
else if (side==='South Only') fillColor = '#552d04';
else fillColor = '#f0f5f3';
return { color: fillColor, weight: 3.5, opacity: null };
},
onEachFeature: function(feature, geojson){
var popupText="<h1 class='makebold'>Border: </h1>"+feature.properties.name+"<br/>"+"<h1 class='makebold'>Which Side?: </h1>"+feature.properties.side;
geojson.bindPopup(popupText);
}
}).addTo(map);
};
$.getJSON("data/Knox.geojson", function(source){ x(source, map); });
$.getJSON("data/abc.geojson", function(source){ x(source, map); });
$.getJSON("data/xyz.geojson", function(source){ x(source, map); });我尝试在L.geoJson函数(var层)之前分配一个变量，然后分配一个似乎不起作用的L.control.layers(null, layers).addTo(map);。
如何为已经与一些回调函数(L.geoJson、style和onEachFeature)相关联的多个外部geojson创建一个层控制？提前谢谢。
回答 2
Stack Overflow用户
发布于 2015-11-18 08:12:43
编辑：
由于您澄清了只希望打开/关闭整个集合，所以它甚至更简单(几乎就像您将L.geoJson分配给var layers时所做的那样)，但是您必须照顾asynchronous processes。
为了避免这个问题，您可以这样做：
var myLayerGroup = L.layerGroup(), // do not add to map initially.
overlays = {
"Merged GeoJSON collections": myLayerGroup
};
L.control.layers(null, overlays).addTo(map);
function x(source, map) {
// Merge the GeoJSON layer into the Layer Group.
myLayerGroup.addLayer(L.geoJson({}, {
style: function (feature) { /* … */ },
onEachFeature: function (feature, layer) { /* … */ }
}));
}
$.getJSON("data/Knox.geojson", function(source){
x(source, map);
});然后，当myLayerGroup从jQuery getJSON请求接收到并由L.geoJson转换时，它们将逐渐填充到您的GeoJSON特性中。
如果我的理解是正确的，那么您希望能够独立地打开/关闭GeoJSON数据中的每个特性？
在这种情况下，您只需在构建layers层组时填充您的L.geoJson对象，例如在onEachFeature函数中：
var layers = {};
L.geoJson(source, {
style: function (feature) { /* … */ },
onEachFeature: function(feature, layer){
var popupText = "<h1 class='makebold'>Border: </h1>" +
feature.properties.name + "<br/>" +
"<h1 class='makebold'>Which Side?: </h1>" +
feature.properties.side;
layer.bindPopup(popupText);
// Populate `layers` with each layer built from a GeoJSON feature.
layers[feature.properties.name] = layer;
}
});
var myLayersControl = L.control.layers(null, layers).addTo(map);如果要加载更多的GeoJSON数据并将其转换为传单层，只需做完全相同的操作(在onEachFeature函数中将内置层添加到layers中)，最后只构建一次图层控件，或者使用myLayersControl.addOverlay(layer)。
注意:如果您将每个GeoJSON数据加载到一个单独的请求中，请确保您的代码结构考虑到了几个异步进程。请参考jQuery延迟对象。或者首先创建您的层控件并使用addOverlay方法。
如果您希望最初将它们隐藏在地图上，那么简单地说，不需要将geoJson层添加到地图…中
Stack Overflow用户
发布于 2015-11-24 14:54:43
我在传单中学到了更多关于图层控制的知识，这是非常棒的。@ghybs提供了非常有用的建议。
我的问题是打开和关闭外部geoJson文件，特别是使用getJSON jQuery方法。我试图在多个回调中赋值一个变量，例如：
var layers=L.geoJson(source,{ {style: /*....*/}, {onEachFeature: /*....*/}}
然后再去L.control.layers(null, layers).addTo(map);
那不管用(为什么？我仍然无法解释-我是相当初学者程序员)。我做到这一点的方法是分别创建style和onEachFeature函数，如下所示：
function borders (feature){
var fillColor, side=feature.properties.side;
if (side==='Both') fillColor = '#309e2d';
else if (side==='Neither') fillColor = '#d90f0f';
else if (side==='West Only') fillColor = '#e27f14';
else if (side==='East Only') fillColor = '#2b74eb';
else if (side==='North Only') fillColor = '#eae42b';
else if (side==='South Only') fillColor = '#552d04';
else fillColor = '#f0f5f3';
return { color: fillColor, weight: 3.5, opacity: null };
};和
function popUp (feature, geojson){
var popupText="<h1 class='makebold'>
Border: </h1>"+feature.properties.name+"<br/>"+"<h1 class='makebold'>
Which Side</h1>"+feature.properties.side;geojson.bindPopup(popupText);
};然后将它们直接作为回调分配到getJSON方法中。通过这样做，我可以在用geoJson将我的L.geoJson()“绘制”到映射之前创建一个变量。然后我可以动态地分配变量(？)到图层控件：
$.getJSON("data/xyz.geojson", function(source){
var xyz = L.geoJson(source, {
style: borders,
onEachFeature: popUp});
togglelayer.addOverlay(xyz, 'This name shows up on the control')});
});我将变量togglelayer存储如下：
var togglelayer = L.control.layers(null, null,{collapsed: false}).addTo(map);这篇文章也很有帮助：How to add two geoJSON feature collections in to two layer groups
https://stackoverflow.com/questions/33772326
复制相似问题
腾讯云开发者
