Question

我有这个剑道地图应用程序，每次我使用放大或缩小我都会丢失所选的颜色。我怎么能阻止这个？选择后，我可以使用任何属性使其永久化吗？这是我的地图代码：

 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

我认为这可能是由于$(document).on("click", "button", function(){ var pid = $(this).closest("tr").find(".class name of td where id available").html(); });而不是fill.set

时会发生什么

set.('fill'.

更改为

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

Answer 2

我设法在重置事件发生之前解决存储我所选国家/地区的问题。我使用 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);
            }
        } 
    });
}

如何在缩放后保留形状图选择颜色？

2 个答案: