Leaflet & Heatmap.js - 无法在“CanvasRenderingContext2D”上执行“getImageData”答案

【问题标题】：Leaflet & Heatmap.js - Failed to execute 'getImageData' on 'CanvasRenderingContext2D'Leaflet & Heatmap.js - 无法在“CanvasRenderingContext2D”上执行“getImageData”
【发布时间】：2015-05-07 01:31:06
【问题描述】：

我目前有一个有效的传单地图，并希望在此基础上使用传单插件 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/,''));

高度返回为零。但是，宽度设置正确。

【问题讨论】：

您是否设置了 BaseLayer 并添加到地图对象中？
当我初始化地图时，我为它提供了一个可以正常工作的图层。你是这个意思吗？我没有在地图中设置任何 BaseLayer 属性。
啊，是的；另外，您的容器是否设置了宽度和高度？
是的，容器的高度和宽度为 100%。正如我提到的，地图运行良好，我已经能够添加标记、平移和缩放，没有任何问题。
你有嵌套的 div 吗？我只用
就可以运行代码。我几乎只是使用了来自github.com/pa7/heatmap.js/blob/develop/examples/leaflet-heatmap/… 的 HTML

标签： jquery rendering leaflet heatmap

【解决方案1】：

如果还有其他人仍在寻找解决方案，我通过实施解决了它

map.on('resize', function () {
            map.invalidateSize();
        })

在我的地图实例上。在我的情况下发生错误是因为屏幕分辨率动态变化。

【讨论】：

这特别帮助我在 Golden Layout 面板中使用 Leaflet，面板最初是隐藏的（非活动选项卡），这导致面板报告其大小为 0x0。

【解决方案2】：

找到了解决办法。原来，当我向它添加 heatMapLayer 时，地图还没有完全初始化。作为现在的修复，我已将 map.addLayer(heatmapLayer) 放在超时函数中，以确保地图已完全加载。

setTimeout(function(){
    map.addLayer(heatmapLayer);
},500)

【讨论】：

这为我节省了很多时间！谢谢！
这对我来说根本不起作用。我不认为您可以为此发布代码？
很遗憾，我手头没有代码了。但是，我已经用我采取的方法更新了答案。