javascript - 更改 javascript map 中的图钉颜色？

Question

我们正在使用 amcharts map ，到目前为止，一切看起来都不错。

我想做的是根据来自 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;
  }
}

});

效果很好，但我想更改 map 中显示的图钉。理想情况下，我想使用从网上下载的图像(jpg、png 等)。

假设我的 json 如下所示:

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

如何更改引脚颜色/大小/字体(甚至图像)，以便如果“inservice”为真，则使用一个引脚。如果错误，则使用另一个引脚。

我尝试使用 SO 片段工具，但它没有渲染 map 。所以在 jsfiddle 中就是这样的:https://jsfiddle.net/wn61bfqb/

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

#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>	

谢谢。

Answer 1

在循环数据集的 dataLoader 函数内添加一个检查 inservice 是否为 true。基于此检查添加颜色。

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

我注意到您调用创建此 map 的端点尚未返回 inservice 字段。所以直到那时我们最终都会显示红色图钉。

jsFiddle link