從leaflet.js添加/刪除L.control地圖

Question

我有一張地圖可以根據四個單選按鈕更改拼貼。我需要彈出窗口，當您在不同地圖圖層更改時滾動切片時會出現此窗口。我已經得到它，但當我切換圖層時，地圖只是添加了另一個彈出窗口。我嘗試使用control.removeFrom（地圖），但它似乎不工作。我認爲我的邏輯可能被搞亂了。下面是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 

我很新的這兩個傳單和JavaScript，所以我不得不說，我不是很確定將Info.removeFrom（地圖）行放置在您提供的地圖鏈接上發佈的代碼中的位置，但是您在'info.removeFrom（地圖）'的正確軌道上。

我能夠擺弄這裏到處問題的解決我的動態傳說和信息框的問題：http://jsfiddle.net/opensas/TnX96/

Answer 2

儘管事實上，這個問題被問一年前，我最近不得不拿出一個解決方案對於類似的問題，我自己感覺好像我應該分享以防其他人像我一樣在這裏結束。

Leaflet中的L.control()對象在技術上並不是一個圖層，這就是爲什麼試圖添加和刪除它的一些操作與圖層不同的原因。

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

由於L.control構造函數需要你只能以「創建所有控件的neccessary 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

嗯，我明白你想同樣你如何添加刪除它的控制。

在這種情況下小葉提供類似於addTo(map)方法直接remove()方法。

例 -

每當你想刪除的傳奇控制使用下面的代碼 -

創建控制 -

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

刪除控制 -

legendControl.remove(); 

詳情refer/click here...

希望這將幫助你:)