Heatmap.js w/Leaflet渲染問題

Question

我試圖在this jsfiddle中設置一個Patrick Wied's heatmap.js demo w/leaflet的稍微改變的版本，但無法獲取heatmap圖層進行渲染。

任何想法是怎麼回事？下面的代碼

在此先感謝您的任何幫助。

喬希

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 2個單張地圖（地圖在這裏和地圖帆布），而不是將覆蓋到一個單一的地圖。

您只需要創建一個包含儘可能多層的地圖。

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

此外，什麼是裁判層的作用是什麼？這層似乎是空的。你可能想要改變你的熱圖圖層的選項。

當您更改教程的版本時，最好解釋一下您希望達到的效果，而不是在初始教程中。