javascript - AmMaps - 图像而不是区域的热图

Question

AmMaps 具有很酷且简单的功能，可以为区域创建热图: https://www.amcharts.com/demos/us-heat-map/

是否也可以将它用于点(图像) - 根据值、颜色步骤等计算图像颜色？

Answer 1

从技术上讲，热图功能不适用于图像。但是，使用非常基本的插件来应用相同的原理非常容易:

AmCharts.addInitHandler(function(map) {

  // check if `colorSolid` is set for `imagesSettings`
  if (map.imagesSettings.colorSolid === undefined)
    return;

  // calculate minimum and maximum value
  var minValue,
      maxValue;
  if (map.minValue === undefined || map.maxValue === undefined) {
    for (var i = 0; i < map.dataProvider.images.length; i++) {
      var image = map.dataProvider.images[i];
      if (image.value !== undefined) {
        if (minValue === undefined || (image.value < minValue))
          minValue = image.value;
        if (maxValue === undefined || (image.value > maxValue))
          maxValue = image.value;
      }
    }
  }

  // use map overrides if set
  if (map.minValue !== undefined)
    minValue = map.minValue;

  if (map.maxValue !== undefined)
    maxValue = map.maxValue;

  // set colors for each area
  for (var i = 0; i < map.dataProvider.images.length; i++) {
    var image = map.dataProvider.images[i];
    if (image.color === undefined && image.value !== undefined) {
      // we set colors for those images that don't have color set explicitly
      var percent = (image.value - minValue) / (maxValue - minValue);
      image.color = AmCharts.getColorFade(
        map.imagesSettings.color, 
        map.imagesSettings.colorSolid, 
        percent);
    }
  }

}, ["map"]);

将其添加到 map 代码之前的某个位置。另请确保在 imagesSettings 中设置 color 和 colorSolid。

这是完整的working example .