Question

我们正在使用amcharts地图，到目前为止，它看起来都很不错。

我尝试做的是根据来自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}]

如何更改引脚颜色/尺寸/字体（甚至图像），以便在＆＃34; inservice＆＃34;是的，然后使用一个引脚。如果它是假的，那么使用另一个引脚。

我尝试使用SO片段工具，但它没有渲染地图。所以这里是jsfiddle：https://jsfiddle.net/wn61bfqb/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

感谢。

Answer 1

在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

在javascript地图中更改引脚颜色？

1 个答案: