使用与相邻区域不同的颜色更改 amMap 中选定区域的颜色，

Question

在 amcharts amMap 中，当 select 是一个区域时，它会改变颜色。但是每次，当 select 多个区域时，它都是相同的颜色。如何使每个 selection 的颜色不同，并且一个区域的颜色应该与相邻区域不同。 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>

一个区域的 selection 给那个区域一些颜色，然后另一个区域 selected 那么它应该被赋予另一种颜色。如何实现这个东西？

Answer 1

您必须将新的单独颜色分配给区域本身，然后调用 validateNow or validateData 以使用更改重新绘制地图。在 areasSettings 中设置它可能会更改所有区域的颜色（但是，在您的情况下，它不会执行任何操作，因为您没有调用 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>

使用与相邻区域不同的颜色更改 amMap 中选定区域的颜色，

Change color of selected area in amMap with different color from adjacent area,

javascript

amcharts

ammap