Question

我想将[传奇/工具提示示例] [1]与[传单热图示例] [2]结合起来。但是，传单热图示例创建地图对象的实例，图例/工具提示示例使用方法h337.create()创建heatmapInstance。

所以我的脚本看起来像这样：

window.onload = function() {
var testData = {
  max: 40,
  data: [
    {lat: 51.491287, lng:7.555110, count: 26},
    {lat: 51.946134, lng:7.602111, count: 21},
    {lat: 50.963217, lng:6.906907, count: 11}          
    ]
};

// HEATMAP CONFIG
var cfg = {
  "radius": 0.5,
  "maxOpacity": .4, 
  "scaleRadius": true, 
  "useLocalExtrema": true,
  latField: 'lat',
  lngField: 'lng',
  valueField: 'count'
};

// LEGEND CODE
var legendCanvas = document.createElement('canvas');
legendCanvas.width = 100;
legendCanvas.height = 10;
var min = document.querySelector('#min');
var max = document.querySelector('#max');
var gradientImg = document.querySelector('#gradient');
var legendCtx = legendCanvas.getContext('2d');
var gradientCfg = {};
function updateLegend(data) {
  min.innerHTML = data.min;
  max.innerHTML = data.max;
  if (data.gradient != gradientCfg) {
    gradientCfg = data.gradient;
    var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
    for (var key in gradientCfg) {
      gradient.addColorStop(key, gradientCfg[key]);
    }
    legendCtx.fillStyle = gradient;
    legendCtx.fillRect(0, 0, 100, 10);
    gradientImg.src = legendCanvas.toDataURL();
  }
};

// LAYERS FOR LEAFLET HEATMAP
var baseLayer = L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
  }
);
var heatmapLayer = new HeatmapOverlay(cfg);

所以现在我必须创建将要输出的对象。对于传单Heatmap，我必须创建一个新的L.Map，如下所示：

// MAP FROM LEAFLET HEATMAP
var map = new L.Map('map', {
  center: new L.LatLng(51.491287, 7.555110),
  zoom: 9,
  layers: [baseLayer, heatmapLayer]
});

但是对于图例/工具提示热图，我必须使用h337.create（）创建一个heatmapInstance。

var heatmapInstance = h337.create({
            container: document.querySelector('.heatmap'),
            onExtremaChange: function(data) {
              updateLegend(data);
            }
          });

在那之后，有一些方法提示可以起作用。

    var demoWrapper = document.querySelector('.demo-wrapper');
    var tooltip = document.querySelector('.tooltip');
    function updateTooltip(x, y, value) {
      // + 15 for distance to cursor
      var transl = 'translate(' + (x + 15) + 'px, ' + (y + 15) + 'px)';
      tooltip.style.webkitTransform = transl;
      tooltip.innerHTML = value;
    };

    demoWrapper.onmousemove = function(ev) {
      var x = ev.layerX;
      var y = ev.layerY;
      // getValueAt gives us the value for a point p(x/y)
      var value = map.getValueAt({
        x: x, 
        y: y
      });
      tooltip.style.display = 'block';
      updateTooltip(x, y, value);
    };
    // hide tooltip on mouseout
    demoWrapper.onmouseout = function() {
      tooltip.style.display = 'none';
    }; 

    heatmapLayer.setData(testData);

    layer = heatmapLayer;
};

我的HTML看起来像这样：

<div id="map"></div>
<div class="tooltip"></div>
<div class="legend-area">
  <h4>Legend Title</h4>
  <span id="min"></span>
  <span id="max"></span>
  <img id="gradient" src="" style="width:100%">
</div>

您有一个主意吗，如何使用带有传单热图的图例/工具提示图？

将Lengend / Tooltip与传单热图结合

0 个答案: