从leaflet.js地图添加/删除L.control

我有一个地图，可以根据四个单选按钮更改切片。 我需要在您滚动图块时显示的弹出窗口，以便在不同的图层更改时进行更改。 我已经让它出现但是当我切换图层时，地图只会添加另一个弹出窗口。 我尝试使用control.removeFrom（map），但它似乎不起作用。 我认为我的逻辑可能会搞砸到某个地方。 这是if语句之一：

if (two == true && black == true) { function blkNineStyle(feature) { return { fillColor: getColor(feature.properties.pctBlack9000), weight: 2, opacity: 1, color: '#666', dashArray: '2', fillOpacity: 0.9 }; } //Tried to us this to take off the control. info.removeFrom(map); map.removeLayer(geojson); geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map); var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (props) { this._div.innerHTML = '
Percent White population change
' + (props ? '' + props.name + '
' + props.pctBlack9000 + '%' : 'Hover over a tract'); }; info.addTo(map); } 

你可以在这里看到（破碎的）地图。

Answer 1

我自己也有同样的问题而且我刚解决了。

我必须在全局环境中定义一个空变量（在你正在使用的任何函数之外）。 这不是一个完整的脚本或任何东西，但我所描述的一般想法如下：

  var info; // CREATING INFO VARIABLE IN GLOBAL ENVIRONMENT function makeMap() { ..... geojsons, styles, other stuff .... // REMOVING PREVIOUS INFO BOX if (info != undefined) { info.removeFrom(map) } // making current layer's info box info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (props) { this._div.innerHTML = '
Data by Zip Code
' + (props ? 'Zip Code: ' + props.id + '
Value: ' + matchKey(props.id, meanById) : 'Hover over a zip code'); }; info.addTo(map); ..... other stuff again ...... } // end function 

我对Leaflet和javascript都很新，所以我不得不说我不确定在你提供的地图链接中发布的代码中放置info.removeFrom（map）行的位置，但是你在使用’info.removeFrom（map）’的正确轨道。

通过在这里摆弄，我能够通过动态传说和信息框来解决我的问题： http ： //jsfiddle.net/opensas/TnX96/

Answer 2

尽管这个问题是在一年前提出来的，但我最近不得不想出一个类似问题的解决方案，所以我觉得我应该分享以防其他人像我一样在这里结束。

Leaflet中的L.control()对象在技术上并不是一个层，这就是为什么尝试添加和删除它有时不像图层一样。

http://leafletjs.com/reference.html#icontrol

由于L.control构造函数只需要“为控件创建所有必需的DOM元素”，因此可以在需要时更新和删除div本身的HTML内容。 因此，要使控件function在地图中显示和消失，而不是添加和删除L.control对象，只需调整其包含的div的HTML内容即可。 空div将导致地图不显示控制function。

因此上面的代码片段将成为：

 //construct control, initialize div info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; if (two == true && black == true) { function blkNineStyle(feature) { return { fillColor: getColor(feature.properties.pctBlack9000), weight: 2, opacity: 1, color: '#666', dashArray: '2', fillOpacity: 0.9 }; } //set div content to empty string; makes control disappear from map info.getContainer().innerHTML=''; map.removeLayer(geojson); geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map); //update content of control to make the control reappear info.update = function (props) { this._div.innerHTML = '
Percent White population change
' + (props ? '' + props.name + '
' + props.pctBlack9000 + '%' : 'Hover over a tract'); }; } //other cases... if (two == false && black == true) { //delete and update control where necessary info.getContainer().innerHTML=''; 

Answer 3

好吧，正如我所知，你想要删除控件同样如何添加它。

在这种情况下，leaflet提供类似于addTo(map)方法的直接remove() addTo(map)方法。

例-

每当您想要删除图例控件时，请使用以下代码 –

创建控制 –

 var legendControl = L.control({position: 'bottomleft'}); legendControl.addTo(mymap); 

删除控制 –

 legendControl.remove(); 

有关详细信息， 请参阅/单击此处…

希望这会帮助你:)