Question

我需要根据空气质量指数（aqi）为我的热图中的不同点着色。这是我第一次尝试创建热图，我的主管坚持认为我只使用google热图创建它。我从一个JSON对象获取数据，该对象从python中的视图传递到我的HTML模板。我读到谷歌热图是基于密度而不是值，但密度不是我的情况。我一直在寻找并发现了一些类似的问题：Coloring Google Heat Maps in different colors但是还没有人回答过。我想根据aqi值对颜色进行着色，例如：

0-50 green
51-100黄色
101-150 orange
151-200 red
201-300 violet

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

我正在玩重量试图让它反映价值的变化而不是密度，但我仍然没有得到理想的结果。

提前感谢您的帮助。

Answer 1

我假设您了解Google热图的工作原理。所以基本上我得到的解决方案是根据你想要的颜色数量创建不同的数组，并且还根据颜色创建不同的热图变量。我承认它不是最好的解决方案（性能明智），但它确实可以解决问题。与您不同，我使用数据库中的数据，这些数据使用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() {}

根据值更改谷歌热图点颜色

1 个答案: