javascript - 将 amMap 中选定区域的颜色更改为与相邻区域不同的颜色，

Question

在 amcharts amMap 中，当选择一个区域时，它会改变其颜色。但当选择多个区域时，每次都是相同的颜色。如何使其每次选择都有不同的颜色，并且一个区域的颜色应该与相邻区域不同。 JsFiddle

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "black",
    "panEventsEnabled": true,
    "backgroundColor": "#00aeff",
    "backgroundAlpha": 1,
    "dataProvider": {
        "map": "indiaLow",
        "getAreasFromMap": true,
        "images": [{
            "id": "backButton",
            "label": "Back to continents map",
            "rollOverColor": "#ffffff",
            "labelRollOverColor": "#ffffff",
            "useTargetsZoomValues": true,
            "right": 100,
            "top": 30,
            "labelFontSize": 10,
            "selectable": true,
            "imageURL": "http://simplemaps.com/static/svg/in/in.svg",
            "width": 32,
            "height": 32,
            "label": "District Level Map"
        }]
    },
    "areasSettings": {
        "autoZoom": false,
        "color": "#CDCDCD",
        "colorSolid": "#5EB7DE",
        "selectedColor": "#5EB7DE",
        "selectedColor": getRandomColor(),
        "outlineColor": "#666666",
        "rollOverColor": "#ffffff",
        "rollOverOutlineColor": "#FFFFFF",
        "selectable": true
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function(event) {
        //I tried this but not working. I think map is not taking the new areasettinng values.
            map.areasSettings = {selectedColor : ""};
            map.areasSettings = {selectedColor : getRandomColor()};
            map.selectedObject = map.dataProvider;
            event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
            map.returnInitialColor(event.mapObject);
            var states = [];
            for (var i in map.dataProvider.areas) {
                var area = map.dataProvider.areas[i];
                if (area.showAsSelected) {
                    states.push(area.title);
                }
            }
        }
    }],
    "export": {
        "enabled": false
    }
});
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<div id="chartdiv"></div>

选择一个区域会给该区域一些颜色，然后选择另一个区域，然后应该给它另一种颜色。如何实现这个目标？

Answer 1

您必须将新的单独颜色分配给区域本身，然后调用 validateNow 或 validateData 来根据更改重新绘制 map 。在 AreaSettings 中设置它可能会更改所有区域的颜色(不过，在您的情况下，它不会执行任何操作，因为您没有调用 validateNow/Data)。这是更新后的 clickMapObject 事件:

"listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
        map.selectedObject = map.dataProvider;
        event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
        map.returnInitialColor(event.mapObject);
        var states = [];
        for (var i in map.dataProvider.areas) {
            var area = map.dataProvider.areas[i];
            if (area.showAsSelected) {  
                //set a new color only if it wasn't assigned before
                area.selectedColor = area.selectedColor || getRandomColor(); 
                states.push(area.title);
            }
        }

        // set same zoom levels to retain map position/zoom in case a selection was made after a zoom
        map.dataProvider.zoomLevel = map.zoomLevel();
        map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude();
        map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude();
        map.validateNow(); //redraw the map with the new selection/colors.
    }
}],

下面的演示:

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "black",
    "panEventsEnabled": true,
    "backgroundColor": "#00aeff",
    "backgroundAlpha": 1,
    "dataProvider": {
        "map": "indiaLow",
        "getAreasFromMap": true,
        "images": [{
            "id": "backButton",
            "label": "Back to continents map",
            "rollOverColor": "#ffffff",
            "labelRollOverColor": "#ffffff",
            "useTargetsZoomValues": true,
            "right": 100,
            "top": 30,
            "labelFontSize": 10,
            "selectable": true,
            "imageURL": "http://simplemaps.com/static/svg/in/in.svg",
            "width": 32,
            "height": 32,
            "label": "District Level Map"
        }]
    },
    "areasSettings": {
        "autoZoom": false,
        "color": "#CDCDCD",
        "colorSolid": "#5EB7DE",
        "selectedColor": "#5EB7DE",
        "selectedColor": getRandomColor(),
        "outlineColor": "#666666",
        "rollOverColor": "#ffffff",
        "rollOverOutlineColor": "#FFFFFF",
        "selectable": true
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function(event) {
            map.selectedObject = map.dataProvider;
            event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
            map.returnInitialColor(event.mapObject);
            var states = [];
            for (var i in map.dataProvider.areas) {
                var area = map.dataProvider.areas[i];
                if (area.showAsSelected) {  
                    //set a new color only if it wasn't assigned before
                	  area.selectedColor = area.selectedColor || getRandomColor(); 
                    states.push(area.title);
                }
            }
            
            // set same zoom levels to retain map position/zoom in case a selection was made after a zoom
            map.dataProvider.zoomLevel = map.zoomLevel();
            map.dataProvider.zoomLatitude = map.dataProvider.zoomLatitude = map.zoomLatitude();
            map.dataProvider.zoomLongitude = map.dataProvider.zoomLongitude = map.zoomLongitude();
            map.validateNow(); //redraw the map with the new selection/colors.
        }
    }],
    "export": {
        "enabled": false
    }
});
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<div id="chartdiv"></div>