Блог

Главная - Вопросы по программированию - Листовка: изменение стиля map_2 по щелчку map_1

Листовка: изменение стиля map_2 по щелчку map_1

#javascript #callback #leaflet #geojson

#javascript #обратный вызов #листовка #geojson

Вопрос:

Я новичок в Leaflet и не очень хорошо разбираюсь в Javascript. Я создал две карты, представляющие в map_1 регионы Италии, а в map_2 — провинции, на основе примера интерактивной карты Choropleth. В первом 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, в противном случае покрасить их в серый цвет (см. Изображения ниже).

Щелкните область в map_1 Покрасьте в map_2 выбранную область в 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 с помощью map_2.fitBounds(e.target.getBounds()); без проблем, и я могу установить стиль map_1.layer следующим образом

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

, но я не могу изменить стиль цели в map_2, потому что map_2.target ‘undefined’ .

Что я делаю не так?

Есть ли способ передать в качестве аргумента map_2 в функции ‘zoomFeature1’ и изменить его стиль?

Есть ли способ с помощью листовки раскрасить провинцию map_2 по щелчку области в map_1?

Комментарии:

1. Вы пытались вызвать fillColor: 'yellow' вместо FIllColor ? Вы немного путаете вещи, или это выглядит так. Когда вы можете вызвать map_2.fitBounds(e.target.getBoudns()) then map_2 , он уже передан zoomFeature1 функции. Также вы не можете стилизовать карту, вы можете стилизовать только слои, поэтому, пожалуйста, не спрашивайте, как стилизовать карту. То, что map_2.target не определено, понятно, потому map_2 что не имеет свойства target , только событие e имеет target = layer . Также вам следует изменить на L.geoJson update(map_2) .addTo(map_2);

2. Большое спасибо! Вы правы: 1. Я исправил fillColor:yellow 2. Я не могу изменить стиль карты.

Ответ №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);
};
Метки: