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

Question

我需要根据该点的空气质量指数 (aqi) 为热图中的不同点着色。这是我第一次尝试创建热图，我的主管坚持让我只使用谷歌热图来创建它。我从 JSON 对象获取数据，该对象从 Python 中的 View 传递到我的 HTML 模板。我读到谷歌热图是基于密度而不是值(value)，但密度不是我的一个因素。我一直在搜索并发现了一些类似的问题:Coloring Google Heat Maps in different colors但还没有人回答。我想根据 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>

我一直在研究权重，试图让它反射(reflect)值的变化而不是密度的变化，但我仍然没有得到想要的结果。

预先感谢您的所有帮助。

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() {}