传单：单击 map_1 更改 map_2 的样式

Question

我是 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"}}

第二个map_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_1.layer 的样式如下

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

，但我无法更改 map_2 中目标的样式，因为 map_2.target 是 'undefined'.

我做错了什么？

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

点击 map_1 中的某个区域时，Leaflet 是否可以为 map_2 的省份着色？

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

传单：单击 map_1 更改 map_2 的样式

Leaflet: Change style of map_2 on click of map_1

javascript

callback

geojson

leaflet