代码之家 › 专栏 › 技术社区 › CMartins

缩放后如何保持形状贴图选择的颜色?

kendo-ui events jquery

CMartins · 技术社区 · 8 年前

我有这个剑道地图应用程序,每次我使用放大或缩小,我失去了选定的颜色。我怎样才能防止这种情况?在选择之后,是否有任何属性可用于使其永久化? 这是我的地图代码:

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

    }

}

每次我放大或缩小选定的颜色都会消失,我的数组值会保持不变。

2 回复 | 直到 8 年前

Richard 8 年前

我想可能是因为 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);

CMartins 8 年前

在重置事件被触发之前,我设法解决了存储所选国家/地区的问题。我用的是 动物修复 但也可以通过 复位前

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