[英]Heatmap.js Leaflet Heatmap
我正在嘗試通過Leafletplugin //www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html 實現 Leaflet 的熱圖,
但由於某種原因,它似乎忽略了我的“價值”,所以所有數據點都具有相同的顏色
window.onload = function() {
var baseLayer = L.tileLayer(
'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',{
attribution: 'Map data © <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: 20
}
);
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
"radius": 0.00007,
minOpacity: 0.5,
maxOpacity: 1,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
value: 'sig',
blur:0,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'1': 'red',
'.3': 'yellow',
'0.9': 'green'
},
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(52.400458, 13.052260),
zoom: 14,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
// make accessible for debugging
layer = heatmapLayer;
};
我的數據如下所示:
var testData = {
data:[{lat:52.40486, lng:13.04916, sig:30}, {lat:52.40486, lng:13.04916, sig:70}, {lat:52.40496, lng:13.04894, sig:67}, {lat:52.40496, lng:13.04894, sig:72}, {lat:52.40486, lng:13.04916, sig:74}, {lat:52.40486, lng:13.04916, sig:78}, {lat:52.40493, lng:13.04925, sig:67},]}
你可以在http://www.frief.de/heatmap/test2.html上看到它
如果有人有想法會很棒,我可能只是愚蠢
只是一個快速的建議。
您是否嘗試過使用Vladimir Agafonkin(Leaflet.js的作者本人)的Leaflet.Heatmap插件。 似乎未在插件頁面上列出。
我認為它更快,可能會是一個更好的解決方案: https : //github.com/Leaflet/Leaflet.heat http://mourner.github.io/simpleheat/demo/
我認為這不起作用,因為您的代碼在這里是錯誤的:
<div class="wrapper">
<div class="heatmap" id="map-canvas">
</div>
</div>
</script> <----THIS <script src="src/heatmap.js"></script>
<script src="src/leaflet-heatmap.js"></script>
您說的打開鏈接是演示頁,並檢查代碼。 修復此孤立的</script
標記,然后查看它是否正在運行。
我知道這很舊,但我剛剛遇到了這個問題,所以這就是我解決它的方法。 在“pa7_leaflet_hm.min.js”庫中,有一部分用於設置最小值/最大值,並且硬編碼為 1 和 0
this._data = [];
this._max = 1;
this._min = 0;
顯然,這會根據值控制點的強度,並且僅當useLocalExtrema
設置為 false 時才會被覆蓋,這將始終將其設置為最高可見點。
如果您不希望始終根據可見區域檢查最大值,您可以將this._max
值更改為更高的值,或者甚至將其設置為配置中的值,以公開它
this._data = [];
this._max = (this.cfg.max ? this.cfg.max : 1);
this._min = (this.cfg.min ? this.cfg.min : 0);
這樣,您將獲得更傳統的功能熱圖
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.