Как сохранить цвет выделения карты формы после увеличения?

Question

У меня есть это приложение с картой Kendo, и каждый раз, когда я использую увеличение или уменьшение масштаба, я теряю выбранные цвета.Как я могу предотвратить это?Есть ли свойство, которое я могу использовать, чтобы сделать его постоянным после выбора?Вот мой код карты:

 var selectedCountries = [];
var hitLocation = '';

function createMap() {
    $("#map").kendoMap({
        controls: {
            navigator: false
        },
        center: [45.268107, 17.744821],
        zoom: 3,
        minZoom:2,
        markerClick: onClick,
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                transport: {
                    read: "../Scripts/countries.geo.json"
                }
            },
            style: {
                fill: {
                    color: "#0091DA",
                    opacity: 0.2
                },
                stroke: {
                    width: 2,
                    color: "#FFF"
                }
            }
        }

        ],            
        shapeCreated: onShapeCreated,

        markers: mrks // markers data on the js file

    });
}

А вот как я выбираю фигуры, попадающие в маркер:

 var shapesById = {};

function onReset() {
    shapesById = {};
}

function onShapeCreated(e) {
    var id = e.shape.dataItem.id;
    shapesById[id] = shapesById[id] || [];
    shapesById[id].push(e.shape);
}
 function onClick(e) {

    var location = e.marker.tooltip.marker.options.tooltip.content;

    $.each(data, function (index, value) {
        if (location == value.countryName) {

            var id = value.shapeCode;
            var shapes = shapesById[id];
            var shape = shapes.dataItem;
            shapes[0].options.fill.set("color", "orange");
            shapes[0].options.set("fill.opacity", 1);

        }

    });


    if ($('#country-list span:contains("' + location + '")').length) {
        // console.log("country exist on the list");
    } else {
        $('#country-list').append("<a href='#'><span class='badge badge-primary'>" + location + "&nbsp;<i class='fa fa-times-circle'></i></span></a>");
        selectedCountries.push(location);
        hitLocation = location;
        console.log("selected countries:", selectedCountries);

    }

}

Каждый раз, когда я увеличиваю или уменьшаю выбранный цвет, исчезает моя задницазначение массива сохраняется.

Answer 1

Мне удается решить проблему с сохранением выбранных стран до того, как будет запущено событие сброса.Я использую событие zoomEnd , но оно также может быть достигнуто с помощью beforeReset

function onZoomEnd(e) {

    $.each(shapesById, function (index, value) {
        var checkCountry = shapesById[index][0].dataItem.properties.name;            
        var check = $.inArray(checkCountry, selectedCountries);

        if (check > -1) {
            console.log("name:", checkCountry, shapesById[index].length);
            for (var i = 0; i < shapesById[index].length; i++) {
                shapesById[index][i].options.fill.set("color", "orange");
                shapesById[index][i].options.set("fill.opacity", 1);
            }
        } 
    });
}

Answer 2

Я думаю, это может быть связано с fill.set вместо set.('fill'.

Что происходит, когда

        shapes[0].options.fill.set("color", "orange");
        shapes[0].options.set("fill.opacity", 1);

изменяется на

        shapes[0].options.set("fill.color", "orange");
        shapes[0].options.set("fill.opacity", 1);