Question

假设我以通常的方式设置了Google热图图层：

  heatmap = new google.maps.visualization.HeatmapLayer({
    radius: 20,
    opacity: 0.5,
    gradient: g
  });

  heatmap.setMap(map);

其中：

  var g = [
    'rgba(255, 0, 0, 1)',
    'rgba(255, 255, 0, 0.9)',
    'rgba(0, 255, 0, 0.7)',
    'rgba(173, 255, 47, 0.5)',
    'rgba(152, 251, 152, 0)',
    'rgba(152, 251, 152, 0)',
    'rgba(0, 0, 238, 0.5)',
    'rgba(186, 85, 211, 0.7)',
    'rgba(255, 0, 255, 0.9)',
    'rgba(255, 0, 0, 1)'

]

我正在热映射的事情取0到1的范围。我想显示一个热点，接近0和接近1的值和接近0.5的中性（冷）点。这就是为什么我在g变量的开头和结尾附近有更高的不透明度。

问题是热图图层将NO数据解释为0，因此将地图的空白区域热映射为红色。我想要的是0和1附近的数据是红色的，没有数据的区域是单独的。

有什么建议吗？

Answer 1

您应该将第一个渐变设置为no（或很少）不透明度。

var g = [
'rgba(255, 0, 0, 0)',
'rgba(255, 255, 0, 0.9)',
'rgba(0, 255, 0, 0.7)',
'rgba(173, 255, 47, 0.5)',
'rgba(152, 251, 152, 0)',
'rgba(152, 251, 152, 0)',
'rgba(0, 0, 238, 0.5)',
'rgba(186, 85, 211, 0.7)',
'rgba(255, 0, 255, 0.9)',
'rgba(255, 0, 0, 1)']

Answer 2

在绘制数据之前，你能修改数据吗？

if (num > 0.5)
    num = 1 - num

现在0附近的数字与1附近的数字相同，可以使用常规梯度。

Google Maps API热图图层 - 单个渐变，两个极端

2 个答案: