我的应用程序中使用 heatmap.js 有一个奇怪的错误插件,我不确定问题是否出在我的代码中,在 leaflet 中,或在插件中。
我正在动态创建新的热图。所以我想删除旧的并跟踪一个新的,这应该是 heatmpa.js 的默认行为。令人惊讶的是,直到我缩小或放大之前,它都不会删除旧的。
这里有一些图片可以帮助您了解发生的情况:
第 1 步:单击按钮绘制巴黎周围的热图:
结果:正如预期的那样,巴黎周围的热图。
第2步:点击按钮绘制东部热图: 结果:添加了第二个热图,但巴黎周围的热图未被删除。 (错误)
第 3 步:点击加号图标放大 map 结果:按预期缩放,巴黎周围的热图消失。
这里是heatmap-leaflet的setData函数的代码,它替换数据并调用重绘:
setData: function ( dataset )
{
var self = this;
var latLngs = [];
this._maxValue = 0;
dataset.forEach( function ( d )
{
latLngs.push( new L.LatLng( d.lat, d.lon ) );
self._maxValue = Math.max( self._maxValue, d.value );
} );
this._bounds = new L.LatLngBounds( latLngs );
this._quad = new QuadTree( this._boundsToQuery( this._bounds ), false, 6, 6 );
dataset.forEach( function ( d )
{
self._quad.insert( {
x: d.lon,
y: d.lat,
value: d.value
} );
} );
this.redraw();
}
我的问题
如果您能提供有关如何定位问题的建议,我将不胜感激。如果有解决方案就更好了。
最佳答案
问题是插件的作者需要重置tile层然后更新它。我不清楚为什么重绘函数没有在 Leaflet 中执行此操作,并怀疑这可能是 Leaflet 中的错误。我能够复制您的问题,您现在可以做的就是自行重置和更新图层。设置新数据后只需执行以下操作:
heatmapLayer.setData(Your data);
heatmapLayer._reset();
heatmapLayer._update();
关于javascript - 除非使用 leaflet 和 heatmap.js 更改缩放,否则 Canvas 不会重绘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17361232/