Question

我正在尝试在Patrick Wied's heatmap.js demo中设置this jsfiddle w / leaflet的略微更改版本，但无法让热图图层渲染。

知道发生了什么事吗？代码

提前感谢您的任何帮助。

约什

HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://unpkg.com/heatmap.js@2.0.5"></script>
<script src="https://unpkg.com/leaflet-heatmap@1.0.0"></script>
<div class="map-container">
  <div id="map-here" style="width: 100%; height: 500px"></div>
  </div>
<div class="heatmap" id="map-canvas">

</div>
<div class="map-controls">

JAVASCRIPT:

var map = L.map('map-here').setView([37.7829, -122.1312], 10);
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '[[Attribution]]',
  id: 'mapbox.streets'
}).addTo(map);

var refs = new L.LayerGroup()
refs.addTo(map)
map.refs = refs

var cfg = {
  "radius": 2,
  "maxOpacity": .8,
  "scaleRadius": true,
  "useLocalExtrema": true,
  latField: 'lat',
  lngField: 'lng',
  valueField: 'count'
};


var heatmapLayer = new HeatmapOverlay(cfg);

var testData = {
  max: 8,
  data: [{
    lat: 37.7829,
    lng: -122.1312,
    count: 3
  }, {
    lat: 37.7829,
    lng: -122.1312,
    count: 1
  }, {
    lat: 37.7821,
    lng: -122.1312,
    count: 1
  }, {
    lat: 37.783,
    lng: -122.1312,
    count: 1
  }]
};

var map = new L.Map('map-canvas', {
  center: new L.LatLng(37.7829, -122.1312),
  zoom: 4,
  layers: [refs, heatmapLayer]
});


heatmapLayer.setData(testData);

Answer 1

问题在于您尝试在两个div（map-here和map-canvas）中创建两个Leaflet贴图，而不是将叠加添加到一个单独的贴图中。

您只需要根据需要创建一个包含多个图层的地图。

//You don't need that map - commeted out
//var map = L.map('map-here').setView([37.7829,-122.1312], 10);
 var baseLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {
      maxZoom: 18,
      attribution: '[[Attribution]]',
      id: 'mapbox.streets'
    }
    )
  //.addTo(map);

  var refs = new L.LayerGroup()
  //refs.addTo(map)
  //map.refs = refs

  var cfg = {
    "radius": 2,
    "maxOpacity": .8, 
    "scaleRadius": true, 
    "useLocalExtrema": true,
    latField: 'lat',   
    lngField: 'lng',   
    valueField: 'count' 
  };


  var heatmapLayer = new HeatmapOverlay(cfg);

  var testData = {
  max: 8,
  data: [{lat:37.7829,lng:-122.1312,count:3},{lat:37.7829,lng:-122.1312,count:1},{lat:37.7821,lng:-122.1312,count:1},{lat:37.783,lng:-122.1312,count:1}]
  };

  var map = new L.Map('map-here', {
    center: new L.LatLng(37.7829,-122.1312),
    zoom: 6,
    layers: [baseLayer,refs, heatmapLayer]
  });

  heatmapLayer.setData(testData);

请看这个视觉小提琴：https://jsfiddle.net/vaillant/un1rogw2/

此外，refs图层的作用是什么？这层似乎是空的。您可能想要更改热图图层的选项。

当您更改教程的版本时，很好地解释您希望实现的内容，而不是在初始教程中。

Heatmap.js w / Leaflet Rendering Questions

1 个答案: