javascript - 从 Leaflet.js 地图添加/删除 L.control

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);
            }

您可以在此处查看（损坏的）地图。

score 4 · Accepted Answer

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

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

    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/

score 2 · Accepted Answer

我相信你想删除控件，就像你添加它一样。

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

例子-

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

创建控制-

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

删除控制-

legendControl.remove();

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

score 0 · Accepted Answer

Despite the fact that this question was asked a year ago, I recently had to come up with a solution to a similar problem myself so feel as if I should share in case anybody else ends up here like I did.

The L.control() object in Leaflet isn't technically a layer, and this is why trying to add and remove it some times doesn't work in the same way as for layers.

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

As the L.control constructor requires you only to "create all the neccessary DOM elements for the control", the HTML content of the div itself can be updated and deleted as and when required. Thus, to make a control feature appear and disappear from the map, and instead of adding and removing the L.control object, just adjust the HTML contents of the div contained by it. An empty div would result in no control feature being shown by the map.

Thus the above snippet would become:

//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='';

javascript - 从 Leaflet.js 地图添加/删除 L.control

3 回答 3

Related

Reference