传单：点击 map_1 更改 map_2 的样式答案

【问题标题】：Leaflet: Change style of map_2 on click of map_1传单：点击 map_1 更改 map_2 的样式
【发布时间】：2021-01-21 00:03:28
【问题描述】：

我是 Leaflet 的新手，对 Javascript 不是很精通。我根据Interactive Choropleth Map example 创建了两张地图，在 map_1 中代表意大利的地区，在 map_2 中代表省份。在带有区域的第一个 map_1 中，我有以下 GeoJson 结构

var regionsData = {
         "type":"Feature",
         "geometry":{"type":"MultiPolygon","coordinates":[...]},
         "properties":{"reg_name":"XXXX"}}

在与各省的secondmap_2中，我有以下GeoJson结构

var provincesData= {
         "type":"Feature",
         "geometry":{"type":"MultiPolygon","coordinates":[...]},
         "properties":{"prov_name":"YYYYY","reg_name":"XXXX"}

我的想法是将map_2放大到map_1中的选定区域，如果map_2的省份属于map_1中点击的区域，则将它们涂成红色，否则将这些区域涂成灰色（见下图）。

Click of a region in map_1 Color in map_2 the selected region in map_1

我定义了以下变量

var map_1 = L.map('map_reg').setView([42.5, 12.5],5);
var map_2 = L.map('map_prov').setView([42.5, 12.5],5);
var geojson_1;
var geojson_2;

对于 map_1，点击操作的以下回调函数：

geojson_1 = L.geoJson(regionsData, {
                  onEachFeature: onEachFeatureClosure(map_1,map_2)}).addTo(map_1);

...

function onEachFeatureClosure(obj_map1, obj_map2) {
return function onEachFeature(feature, layer) {
layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    //click: zoomToFeature
    });
layer.on("click", function(e) {
    zoomToFeature_1(e, obj_map1, obj_map2)})
}
}

.....

function zoomToFeature_1(e, obj_map1, obj_map2) {
    map_2.fitBounds(e.target.getBounds());

    L.geoJson(provincesData, {
        // onEachFeature:function(feature, layer) {
        style: function(feature) {
            if (feature.properties.reg_name!==e.target.feature.properties.reg_name) {
                return {'fillColor': 'yellow',};
            }
            else{
                return {'fillColor': 'yellow',};

                // e.target.setStyle({fillColor:getColor_prov(e.target.feature.properties.data_val.perc)})
            }
        // }
    }
}).update(map_2);
};

在我的回调函数 zoomFeature_1 中，我可以毫无问题地使用 map_2.fitBounds(e.target.getBounds()); 放大 map_2，并且可以设置样式map_1.layer 如下

e.target.setStyle({fillColor:'#888'})

，但是我不能改变map_2中目标的样式，因为map_2.target是'undefined'。

我做错了什么？

有没有办法将函数'zoomFeature1'中的map_2作为参数传递并更改它的样式？

Leaflet 有没有办法在点击 map_1 中的区域时为 map_2 的省份着色？

【问题讨论】：

您是否尝试过拨打fillColor: 'yellow' 而不是FIllColor？你把事情搞砸了，或者看起来像那样。当您可以调用map_2.fitBounds(e.target.getBoudns()) 时，map_2 已经传递给zoomFeature1 函数。此外，您无法设置地图样式，只能设置图层样式，因此请不要询问如何设置地图样式。 map_2.target 未定义很清楚，因为 map_2 没有属性 target 只有事件 e 具有 target = 层。此外，您应该将L.geoJson 的update(map_2) 更改为.addTo(map_2);
非常感谢！你是对的：1.我更正了fillColor:yellow 2.我无法更改地图的样式。

标签： javascript callback leaflet geojson

【解决方案1】：

我终于找到了解决方案。我更正了函数zoomToFeature_1，如下所示。

function zoomToFeature_1(e, obj_map1, obj_map2) {
    map_2.fitBounds(e.target.getBounds());
    map_2.removeLayer(geojson_2);
    L.geoJson(provincesData, {
        style:   function(feature) {
            if (feature.properties.reg_name!==e.target.feature.properties.reg_name) {
                return {fillColor: 'gray',};
            }
            else{
                return {fillColor: 'red'};
            }
    }
}).addTo(map_2);
};

【讨论】：