更改JavaScript地圖中的引腳顏色？

我們正在使用amcharts地圖，到目前爲止，它看起來都很不錯。更改JavaScript地圖中的引腳顏色？

我想要做的是改變基於一些價值來自我們的json流的引腳的顏色。

javascript：

AmCharts.makeChart("mapdiv", { 
"type": "map", 
"theme": "light", 
"imagesSettings": { 
    "rollOverColor": "#089282", 
    "rollOverScale": 1, 
    "selectedScale": 0.5, 
    "selectedColor": "#089282", 
    "color": "#13564e", 
    "selectable": false, 
    "bringForwardOnHover": false 
}, 
"areasSettings": { 
    "color": "#D3D3D3", 
"autoZoom": true 
}, 
"data": { 
    "map": "puertoRicoHigh", 
    "getAreasFromMap": true 
}, 
"dataLoader": { 
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/716619/30189.json", 
    "format": "json", 
    "showErrors": true, 
    "postProcess": function(data, config, map) { 
    // create a new dataProvider 
    var mapData = map.data; 

    // init images array 
    if (mapData.images === undefined) 
     mapData.images = []; 

    // create images out of loaded data 
    for(var i = 0; i < data.length; i++) { 
     var image = data[i]; 
     image.type = "circle"; 
     mapData.images.push(image); 
    } 
    return mapData; 
    } 
}

}）;

這很好，但我想更改地圖中顯示的針腳。理想情況下，我想使用我從網上下載的圖像（jpg，png等）。

所以我們可以說，我的json看起來像這樣：

[{"title":"Site1","longitude":18.4262,"latitude":-67.1483,"inservice":true}, 
{"title":"Site2","longitude":18.3663,"latitude":-66.1887,"inservice":false}]

我怎樣才能改變管腳顏色/尺寸/字體（甚至像），這樣，如果「役」爲真，則使用一個針。如果它是假的，則使用另一個引腳。

我嘗試使用SO片段工具，但它沒有渲染地圖。所以這裏，在的jsfiddle：https://jsfiddle.net/wn61bfqb/

\t AmCharts.makeChart("mapdiv", { 
 
    "type": "map", 
 
    "theme": "light", 
 
    "imagesSettings": { 
 
    "rollOverColor": "#089282", 
 
    "rollOverScale": 1, 
 
    "selectedScale": 0.5, 
 
    "selectedColor": "#089282", 
 
    "color": "#13564e", 
 
    "selectable": false, 
 
    "bringForwardOnHover": false 
 
    }, 
 
    "areasSettings": { 
 
    "color": "#D3D3D3", 
 
\t "autoZoom": true 
 
    }, 
 
    "data": { 
 
    "map": "puertoRicoHigh", 
 
    "getAreasFromMap": true 
 
    }, 
 
    "dataLoader": { 
 
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/716619/30189.json", 
 
    "format": "json", 
 
    "showErrors": true, 
 
    "postProcess": function(data, config, map) { 
 
     // create a new dataProvider 
 
     var mapData = map.data; 
 
     
 
     // init images array 
 
     if (mapData.images === undefined) 
 
     mapData.images = []; 
 
     
 
     // create images out of loaded data 
 
     for(var i = 0; i < data.length; i++) { 
 
     var image = data[i]; 
 
     image.type = "circle"; 
 
     mapData.images.push(image); 
 
     } 
 
     return mapData; 
 
    } 
 
    } 
 
});

#mapdiv { 
 
    width: 100%; 
 
    height: 300px;

<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/puertoRicoHigh.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/light.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.js"></script> 
 
<div id="mapdiv"></div> \t

感謝。

來源

2017-10-12 rbhat

裏面的dataLoader函數在循環數據集添加一個檢查，如果inservice是真實的。根據此檢查添加一種顏色。

for (var i = 0; i < data.length; i++) { 
    var image = data[i]; 
    image.type = "circle"; 
    if(data[i].inservice){ 
    image.color = 'green'; // if inservice is true 
    } else { 
    image.color = 'red'; // if inservice is false or undefined 
    } 
    mapData.images.push(image); 
    }

我注意到，您打電話來創建這個地圖的終點沒有返回inservice尚未場。因此，直到那時我們一直都在顯示紅色的針腳。

jsFiddle link

來源

2017-10-12 20:35:19 sbr

更改JavaScript地圖中的引腳顏色？

回答

相關問題