根据数值改变Google热力图点的颜色

Question

我需要根据空气质量指数（AQI）为不同的点着色，以生成热力图。这是我创建热力图的第一次尝试，我的主管坚持要求我只使用谷歌热力图。我从Python视图传递一个JSON对象到我的HTML模板中获取数据。我了解到谷歌热力图是基于密度而非值，但在我的情况下密度并不是一个因素。我一直在搜索类似的问题：如何为谷歌热力图上的不同区域设置不同颜色，但目前还没有人回答它。

我想根据以下AQI值为点着色：

• 0-50 绿色
• 51-100 黄色
• 101-150 橙色
• 151-200 红色
• 201-300 紫色

我的JSON数据如下：

{
  "lat": 44.0682019, 
  "data_value": {"pm10": "0","pm25": "21"}, 
  "lon": -114.7420408, 
  "aqi": 70.0
}

这是我的JavaScript代码：

<script>     
      var json_data = {{ data|safe }};
      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: 0, lng: 0},
          minZoom: 2, 
          maxZoom: 18

        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          radius: 50,
          dissapating: false,
          map: map
        });
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 50);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
      }
      function getPoints() {
        var location = [];
        for(var i = 0; i < json_data.length; i++) {
          var obj = json_data[i];
          if(obj.aqi < 150) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 1)};
          } else if(obj.aqi > 150 && obj.aqi < 300) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 5)};
          } else {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 10)};
          }

        }
        return location;
      }
</script>

我在尝试调整权重以使其反映值的变化，而不是密度的变化，但我仍然没有得到期望的结果。

非常感谢您的所有帮助。

- Wiredo

---

听起来你只是想在指定的位置放置具有指定颜色的标记。你为什么需要热力图呢？ - geocodezip

我的公司想要使用热力图，因为它看起来很不错。我找到了这个网址http://jsfiddle.net/hzy0y6es/，它与我想做的类似。 - Wiredo

geocodezip，有没有办法改变热力图中特定点的颜色？ - Wiredo

Answer 1

我假设您已经了解谷歌热力图的基本工作原理。那么基本上，我的解决方案是根据所需颜色数量创建不同的数组，并且仍然基于颜色创建不同的热图变量。我承认这不是最好的解决方案（从性能角度考虑），但它起到了作用。与您不同，我正在使用从数据库中提取的数据，这些数据是使用Php进行提取的，但逻辑保持不变。以下是我的代码：

var dataheat = [];
var dataheat1 = [];
var dataheat2 = [];



function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: new google.maps.LatLng(-25.7479, 28.2293),
  mapTypeId: 'satellite',
  zoom: 6,
  maxZoom: 16,
  minZoom: 6
 });



 // pull data from database using php
  downloadUrl('location.php', function(data) {
  var xml = data.responseXML;

var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {

  var  aqi =  parseFloat(markerElem.getAttribute('aqi'));
  var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));


  for (var i=0; i <= markers.length; i++)
  {
    if(aqi < 98)
      {dataheat.push(point);}
    else if( aqi > 98 && aqi < 100)
      {dataheat1.push(point);}
    else if (aqi = 100)
     { dataheat2.push(point);}
    else{
        //nothing
    }

  }


});

   var yellow = [
            'rgba(255, 255, 0, 0)',
            'rgba(255, 255, 0, 1)'
            ];

  var red = [
        'rgba(255, 0, 0, 0)',
        'rgba(255, 0, 0, 1)'
        ];

  var green = [
          'rgba(0, 255, 0, 0)',
          'rgba(0, 255, 0, 1)'
          ];

 var heatmap = new google.maps.visualization.HeatmapLayer({

      data: dataheat,
      map:map,
      radius: 24

});
  var heatmap1 = new google.maps.visualization.HeatmapLayer({

      data: dataheat1,
      map:map,
      radius: 24

});
   var heatmap2 = new google.maps.visualization.HeatmapLayer({

      data: dataheat2,
      map:map,
      radius: 24

});

heatmap.set('gradient', heatmap.get('gradient') ? null : red);
heatmap1.set('gradient', heatmap1.get('gradient') ? null : yellow);
heatmap2.set('gradient', heatmap2.get('gradient') ? null : green);


   });
  }

  function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
  new ActiveXObject('Microsoft.XMLHTTP') :
  new XMLHttpRequest;

  request.onreadystatechange = function() {
  if (request.readyState == 4) {
  request.onreadystatechange = doNothing;
  callback(request, request.status);
  }
 };

  request.open('GET', url, true);
  request.send(null);
   }

  function doNothing() {}

- M. Stane