作者:飞儿gxj_505 | 来源:互联网 | 2023-05-19 12:05
如何解决《Leaflet和Heatmap.js-无法在'CanvasRenderingContext2D'上执行'getImageData'》经验,为你挑选了1个好方法。
我目前有一个工作的传单地图,并希望在此基础上使用传单插件Heatmap.js.http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html
我使用的代码与上面链接中的示例非常相似.
var testData = {
max: 8,
data: [{lat: 24.6408, lng:46.7728, radius:500, count: 3}]
};
var cfg = {
"radius": 2,
"maxOpacity": 8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
map.addLayer(heatmapLayer);
heatmapLayer.setData(testData);
当我运行地图时,我没有看到任何热图的迹象.然后,当我在地图上平移时,我在控制台中收到以下错误:
无法在'CanvasRenderingContext2D'上执行'getImageData':源高度为0.
知道如何解决这个问题吗?heatmap.js网站上的演示使用几乎完全相同的代码.
谢谢!
编辑:
我发现错误可能来自哪里.heatmap.js中的第316行是:
this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,''));
高度返回为零.但是正确设置了宽度.
1> illwalkwithy..:
找到了解决方案.当我向其添加heatMapLayer时,原来没有完全初始化地图.作为现在的修复,我已将map.addLayer(heatmapLayer)放在超时函数中以确保地图已完全加载.
setTimeout(function(){
map.addLayer(heatmapLayer);
},500)