在美国地图上拥有所有“功能”的Leaflet JS对象在哪里？

Question

我正在使用美国的Leaflet地图示例，并且遇到一种情况，需要在加载地图页面时突出显示一个状态。

高亮代码非常简单（直接来自地图示例代码 ，可以正常工作）：

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

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

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

我的挑战是，当用户将鼠标悬停在一个状态上时会调用此代码，该状态会生成一个鼠标悬停事件，然后将该事件（e）传递给函数，函数可以使用该事件中的详细信息来确定哪个用户指向的状态。 但是，当页面加载时，本身就没有事件。 我不知道这些状态存储在哪里。 包含所有状态的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() ，就像您在高亮功能中看到的那样。

Answer 1

添加GeoJSON图层时，您需要遍历每个要素，为其赋予其初始属性。 遵循以下原则：

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

Answer 2

弄清楚了。 他们的关键是map.eachLayer() （ 这里有更多信息 ）。

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

Answer 3

使用示例（ 美国地图传单示例 ），GeoJSON数据存储在文件us-states.js中。 在示例中，将us-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.
}

之后，您需要触发“点击”事件，如下所示：

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

无需在该示例上进行任何更改。 希望能有所帮助！ （对不起，我英语不好）