Leaflet JS對象在美國地圖上包含所有「功能」在哪裏？

我正在與Leaflet US map example一起工作，我有一種情況，我需要在地圖頁面加載時已經突出顯示一個狀態。Leaflet JS對象在美國地圖上包含所有「功能」在哪裏？

亮點代碼相當簡單（這是直接從map example code和正常工作）：

function highlightFeature(e) { 
    var layer = e.target; 

    layer.setStyle({ 
     weight: 5, 
     color: '#666', 
    }); 

    if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } 
}

我的挑戰是，該代碼被調用時在其上產生一個鼠標懸停state--用戶輥事件，然後該事件（e）被傳遞給該函數，並且該函數可以使用事件中的細節來確定用戶指向哪個狀態。但是，當LOADS頁面沒有事件本身時。我不知道這些州的存儲位置。在哪裏/什麼是持有所有國家的JS對象？

我猜我的代碼將是最終是這樣的......

// on page load, highlight the active state 
var activeState = 'Arizona'; 

// loop through each state and find the one where 
// feature.properties.name == activeState 
// ...???... 

// highlight it by using setStyle() method

我的問題是，我不知道，所有的狀態都存儲在JS對象。一旦我有了，我認爲其餘的只是找到正確的狀態並使用setStyle()，就像你在高亮功能中看到的那樣。

來源

2015-05-16 Eric

想通了。他們的鑰匙是map.eachLayer()（more info here）。

// highlight active state (in this case, arizona) 
    // walk through all layers and find the states 
    map.eachLayer(function (layer) { 
     var n = ''; 
     if (typeof layer.feature !== 'undefined') { 
      var n = layer.feature.properties.name; 
     } 
     if (n.replace(/\s+/g, '-').toLowerCase() == 'arizona') { 
      // found the state-- go ahead and highlight it 
      layer.setStyle({ 
       weight: 3, 
       color: '#666', 
       dashArray: '', 
       fillOpacity: 0.7, 
       fillColor:'#499bc4' 
      }); 

      if (!L.Browser.ie && !L.Browser.opera) { 
       layer.bringToFront(); 
      } 
     }   
    });

來源

2015-05-16 19:02:59 Eric

當您添加一個GeoJSON圖層時，您將遍歷每個要素，併爲其提供其初始屬性。沿着這些路線的東西：

L.geoJson(JSON.parse(data.geoData), { 
        style: function (feature) { 
         if (feature.stateName === activeState) { 
          return styleForActiveState; 
         } else { 
          return styleForNormalState; 
         }});

來源

2015-05-16 19:03:49

使用示例（Leaflet US Map Example）外，GeoJSON數據存儲在文件US-states.js。在這個例子中，美states.js加載到GeoJSON的變量，在此代碼：

var geojson;// this is the variable you look for 
geojson = L.geoJson(null, { 
    style: style, 
    onEachFeature: onEachFeature 
}).addTo(map);

找到一個層通過它的屬性基本上都採用它的層ID找到一個層。因此，裝載以GeoJSON到GeoJSON的變量時，你需要分配以GeoJSON的功能ID是這樣的：

function onEachFeature(feature, layer) { 
    layer.on({ 
     mouseover: highlightFeature, 
     mouseout: resetHighlight, 
     click: zoomToFeature 
    }); 
    layer._leaflet_id = feature.id; //this is where you assign your custom id to it's layer. 
}

之後，你需要火這樣的「click」事件：

function FindALayerByCustomId(layerId){ 
    var id = parseInt(layerId); 
    var layer = geojson.getLayer(id); //find a layer using id 
    layer.fireEvent('click'); 
}

現在，你可以使用它的id來找到你需要的狀態。

//State of Arizona has id of 4 
FindALayerByCustomId(4); 

//Or, you can place that in your document ready event, 
$(document).ready(function() { 
    //State of Arizona has id of 4 
    FindALayerByCustomId(4); 
});

無需更改該示例中的任何內容。希望它有幫助！（對不起，我的英文很差）

來源

2016-01-08 14:04:45 bayu

Leaflet JS對象在美國地圖上包含所有「功能」在哪裏？

回答

相關問題