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

大佬教程收集整理的这篇文章主要介绍了传单：单击 map_1 更改 map_2 的样式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决传单：单击 map_1 更改 map_2 的样式？

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

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

在带有省份的 secondmap_2 中，我有以下 GeoJson 结构@H_489_3@

var provincesData= {
         "type":"Feature","propertIEs":{"prov_name":"YYYYY","reg_name":"XXXX"}

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

Click of a region in map_1 Color in map_2 the SELEcted region in map_1@H_489_3@

我定义了以下变量@H_489_3@

var map_1 = l.map('map_reg').setVIEw([42.5,12.5],5);
var map_2 = l.map('map_prov').setVIEw([42.5,5);
var geoJson_1;
var geoJson_2;

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

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

...@H_489_3@

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

.....@H_489_3@

function zoomToFeature_1(e,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 中，我可以使用 @H_816_43@map_2.fitBounds(e.target.getBounds()); 放大 map_2 @R_801_11355@题，我可以设置样式map_1.layer 如下@H_489_3@

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

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

我做错了什么？@H_489_3@

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

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

解决方法

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 的样式全部内容，希望文章能够帮你解决传单：单击 map_1 更改 map_2 的样式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。