Блог

Главная - Вопросы по программированию - Как правильно использовать setStyle в geojson с leaflet 1.6.0?

Как правильно использовать setStyle в geojson с leaflet 1.6.0?

#javascript #leaflet

Вопрос:

Я использую листовку 1.6.0. Я хочу регулярно менять цвет геоджсона, что следует делать, если не ошибаюсь, с setStyle помощью .

Для достижения этой цели я использую интервал, подобный следующему:

         geo_json = L.geoJSON(geo, {
            style: {
                stroke: true,
                color: "black",
                fillColor: "blue"
            }
        }).addTo(map);
        function high(obj) {
            const current_color = obj.options.style.color
            console.log(obj.options.style)
            if (current_color == "black") {
                console.log("to blue")
                obj.setStyle({
                    color: "blue",
                    fillColor: "yellow",
                    stroke: true
                })
            } else {
                console.log("to black")
                obj.setStyle({
                    color: "black",
                    fillColor: "back",
                    stroke: true
                })
            }
        }
        var inter = setInterval(high, 100, geo_json)

Однако это не работает.

При первом прохождении high функции цвет устанавливается правильно. Но во время следующих итераций значение obj.options.style.color по-прежнему остается «черным». Как следствие, он никогда больше не превратится из синего в черный. Похоже setStyle , что это не влияет на свойства объекта, даже если он меняет свой цвет.

Вот скрипка.

Как я должен правильно использовать setStyle , чтобы повторно обновить цвет моего geojson ?

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

1. Просто для справки, это действительно ожидаемое поведение, и оно может действительно подойти для вашего случая: обновляя только стиль дочерних слоев, стиль группы слоев GeoJSON остается на своем начальном значении, что позволяет использовать resetStyle() метод.

Ответ №1:

Проблема в том, что функция setStyle L. GeoJOSN изменяет только стиль дочерних слоев, а не его самого:

     setStyle: function (style) {
        return this.eachLayer(function (layer) {
            this._setLayerStyle(layer, style);
        }, this);
    },

https://github.com/Leaflet/Leaflet/blob/d6d6051ac6acbc2c68b6b0f8ef1707cf91054f16/src/layer/GeoJSON.js#L148

Если вы хотите изменить параметр стиля слоя GeoJSON, вам необходимо обновить свойство вручную:

 var newStyle = {
   color: "black",
   fillColor: "back",
   stroke: true
};

obj.setStyle(newStyle);
obj.options.style = Object.assign({}, obj.options.style, newStyle); // merge the new style into the old one
Метки: