Jquery 缩放后如何保持形状贴图选择颜色？

我有这个剑道地图应用程序，每次使用放大或缩小时，我都会丢失选定的颜色。我怎样才能防止这种情况？选择后，是否有任何属性可用于使其永久化？ 这是我的地图代码：

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

    }

}

var shapesById={}；
函数onReset（）{
shapesById={}；
}
函数onShapeCreated（e）{
var id=e.shape.dataItem.id；
shapesById[id]=shapesById[id]| |[]；
shapesById[id].push（e.shape）；
}
函数onClick（e）{
变量位置=e.marker.tooltip.marker.options.tooltip.content；
$.each（数据、函数（索引、值）{
如果（位置==value.countryName）{
var id=value.shapeCode；
var shapes=shapesById[id]；
var shape=shapes.dataItem；
形状[0].options.fill.set（“颜色”、“橙色”）；
形状[0].options.set（“fill.opacity”，1）；
}
});
if（$（“#国家/地区列表范围：包含（“+location+”））。长度）{
//console.log（“列表中存在国家”）；
}否则{
$（“#国家列表”）。追加（“”）；
选择的国家/地区。推送（位置）；
地点=地点；
console.log（“选定国家：”，选定国家）；
}
}

---

每次我放大或缩小所选颜色时，我的数组值都被保留

我认为这可能是由于

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

---

在重置事件触发之前，我设法解决了存储所选国家/地区的问题。我使用zoomEnd事件，但也可以在重置之前使用来实现

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

Zoomend（e）上的函数{ $.each（shapesById、函数（索引、值）{ var checkCountry=shapesById[index][0].dataItem.properties.name； var check=$.inArray（checkCountry，selectedCountries）； 如果（检查>-1）{ log（“名称：”，checkCountry，shapesById[index].length）； 对于（var i=0；i不起作用。我意识到正在缩放开始和缩放结束之间启动重置功能