Question

我正在使用Leaflet US map example，我有一种情况，我需要在地图页面加载时突出显示一个州。

突出显示代码非常简单（直接来自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(); }
}

我的挑战是，当用户滚动状态时调用此代码 - 生成鼠标悬停事件，然后将该事件（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()，就像你在高亮函数中看到的一样。

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

Answer 3

使用示例（Leaflet US Map Example），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);
});

无需更改该示例中的任何内容。希望它有所帮助！（抱歉我的英语不好）

Leaflet JS对象在哪里包含所有＆＃34;特征＆＃34;在美国地图上？

3 个答案: