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

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

  •  0
  • CMartins  · 技术社区  · 7 年前

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

     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 回复  |  直到 7 年前
        1
  •  1
  •   Richard    7 年前

    我想可能是因为 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);
    
        2
  •  0
  •   CMartins    7 年前

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

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