Блог

Я пытаюсь настроить слегка измененную версию Patrick Wied heatmap.js демонстрация с листовкой в этом jsfiddle, но не могу заставить слой тепловой карты отрисовываться.

Есть идеи, что происходит? Код ниже

Заранее спасибо за любую помощь.

Джош

 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);
  

Проблема в том, что вы пытаетесь создать две карты листовок в двух подразделениях (map-here и map-canvas) вместо добавления наложений на одну карту.

Вам нужно создать только одну карту с таким количеством слоев, сколько вы хотите.

 //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 /

Кроме того, какова была роль слоя ссылок? Этот слой кажется пустым. И вы можете захотеть изменить параметры своего слоя тепловой карты.

Когда вы изменяете версию руководств, было бы здорово объяснить, чего вы надеялись достичь, чего не было в первоначальном руководстве.