Heatmap.js 리플릿 렌더링 질문

Question

Patrick Wied's heatmap.js demo/전단지를 this 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); 

Answer 1

문제는 대신 하나의지도에 오버레이를 추가하는 두 개의 div의 두 리플릿지도 작성 (지도-여기 및지도 캔버스를)하려고하는 것입니다.

원하는만큼 많은지도를 만들면됩니다.

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

을의 심판 층의 역할은 무엇 이었습니까? 이 레이어는 비어있는 것 같습니다. 히트 맵 레이어의 옵션을 변경하고자 할 수 있습니다.

자습서 버전을 변경하면 초기 자습서에 없었던 바를 설명하는 것이 좋습니다.