我正在使用美国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() ,就像您在高亮功能中看到的那样。

===============>>#1 票数:1

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

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

===============>>#2 票数:0 已采纳

弄清楚了。 他们的关键是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();
            }
        }           
    });

===============>>#3 票数:0

使用示例( 美国地图传单示例 ),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);
});

无需在该示例上进行任何更改。 希望能有所帮助! (对不起,我英语不好)

  ask by Eric translate from so

未解决问题?本站智能推荐:

1回复

Leaflet-将功能添加到json对象并将结果放在地图上

我正在制作Leaflet Map,并且我有一个json对象,我将要添加Leaflet javascript的L.GeoJson所需的所有必要属性。 因此,我阅读了文档,并使用此功能对象的文档中所述,使用“功能”,“几何”和“属性”构建了一个“ 功能集合” ,因此我在javascript中创建了
1回复

在leaflet.js地图上创建矩形网格

如何将leaflet.js映射划分为矩形网格,以便为我单击的每个矩形触发一个不同的事件?
1回复

覆盖leaflet.js地图上的文本框

这似乎是一个非常简单的问题,但我在其他地方寻找答案没有运气! 如何将简单文本框覆盖到在地图加载时加载的Leaflet地图(不固定到地图上的任何点) - 例如,在实际地图对象中提供标题和更多信息。 没有什么花哨。
1回复

mapbox / leaflet js地图上的粗白线

我已经在d3.js中的javascript生成的HTML工具提示中嵌入了地图。 从功能上讲,它可以工作,但是在所有缩放级别上都有两条白色的水平线出现: 这些行仅在嵌入到弹出窗口中时显示。 如果我不在弹出窗口中,则这些行会消失。 我已经检查过CSS,并且没有白线会造成这种情况(我相
1回复

在Leaflet.js地图上使用Cloudmade的样式

我正在为我的Web项目使用Leaflet。 对于地图图块,我正在使用Cloudmade图像。 我尝试将样式添加到此地图中,但是样式不起作用。 我只想在河流和海洋上涂上蓝色。 谢谢。
1回复

同一张地图上的传单JS多边形

我使用Leaflet JS,并且在一张地图上需要相同的多边形 现在: 我需要: 谢谢你的帮助! 如果我在tileLayer或worldCopyJump:true上设置noWrap:true,则会得到: 小提琴– jsfiddle.net/paRxe/5
1回复

Leaflet.js-创建标记并在地图上显示弹出窗口

当我单击某个HTML元素时,我正在使用Leaflet JavaScript API创建弹出窗口。 问题是弹出窗口不会显示在我的地图上。 我不确定我的代码有什么问题。 以下是json文件中功能的示例。 注意,为了方便起见,我将整个json对象分配为var dataset 。 以
1回复

如何清除传单地图上的所有路径和标记?

我添加了一个clear_btn ,我想从标记和路径中清除地图。 但是,不会从地图中删除任何内容。 您将如何重构此代码以使其实现?
1回复

传单:如何在地图上显示所有图层?

我正在尝试创建一个按钮,单击该按钮将在除某些特定图层之外的所有图层上切换。 我无法完成这项工作。 我如何显示除名为“ stuff”和“ stuff2”的叠加层以外的所有层? var map = L.map("map"); L.tileLayer("http://{s}.t
1回复

传单:如何影响地图上的所有标记?

基本上,我的传单地图上有几个标记。 我正在使用jQuery。 目前,如果我想用AJAX填充标记的弹出窗口,则必须使用以下代码: 显然,这远非理想。 在jQuery中,这很简单: 我该怎么做呢? 我知道地图的ID,但无法弄清楚Leaflet为其标记,弹出窗口和其他元素分配的