我在使用heatmap.js插件的应用程序中遇到一个奇怪的错误,并且我不确定问题是否出在我的代码,leaflet或插件中。

我正在动态创建新的热图。因此,我想删除旧的并跟踪一个新的,这应该是heatmpa.js的默认行为。令人惊讶的是,直到我缩小或放大后,它才会擦除旧的。

这是一些了解发生什么情况的图像:

步骤1:点击按钮在巴黎周围绘制热图:


结果:与预期的一样,巴黎周围的热图。

第2步:单击按钮以在东部绘制热图:

结果:添加了第二个热图,但巴黎周围的一个不被擦除。 (错误)

第3步:点击加号图标以放大地图

结果:按预期缩放,巴黎周围的热图消失了。

这是setData函数heatmap-leaflet的代码,它替换数据并调用redraw:

 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();
   }


我的问题

我将不胜感激有关如何找到问题的任何建议。解决方案会更好。

最佳答案

问题在于插件的作者需要重置图块层,然后再对其进行更新。我不清楚为什么重绘功能在Leaflet中不执行此操作,并且怀疑它可能是Leaflet中的错误。我能够复制您的问题,现在要使其起作用,您可以做的是自己重置和更新该层。设置新数据后,只需执行以下操作:

heatmapLayer.setData(Your data);
heatmapLayer._reset();
heatmapLayer._update();

关于javascript - 除非使用Leaflet和heatmap.js更改了缩放比例,否则 Canvas 不会重绘,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17361232/

10-12 00:08
查看更多