Question

我有一张地图可以根据四个单选按钮更改切片。我需要在您滚动图块时显示的弹出窗口，以便随着不同的图层更改而更改。我已经让它出现但是当我切换图层时，地图只会添加另一个弹出窗口。我尝试使用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 = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
                };

                info.addTo(map);
            }

您可以看到（已损坏）地图here.

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 = '<h4>Data by Zip Code</h4>' + (props ?
    '<b>Zip Code:  ' + props.id + '</b><br />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内容。因此，要使控件功能在地图中显示和消失，而不是添加和删除L.control对象，只需调整其中包含的div的HTML内容即可。空div将导致地图无法显示控制功能。

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

//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 = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
            };

        }

 //other cases...
if (two == false && black == true) { 

//delete and update control where necessary

    info.getContainer().innerHTML='';

Answer 3

嗯，正如我所知，你想要删除控件，就像你添加它一样。

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

示例 -

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

创建控件 -

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

删除控件 -

legendControl.remove();

有关详细信息refer/click here...

希望这会对您有所帮助：）

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

3 个答案: