2

heatmap.jsプラグインを使用しているアプリに奇妙なバグがあり、問題がコードにあるのか、リーフレットにあるのか、プラグインにあるのかわかりません。

新しいヒートマップを動的に作成しています。古いものを消去して、heatmpa.js のデフォルトの動作である新しいものをトレースします。驚いたことに、ズームアウトまたはズームインするまで古いものは消去されません。

何が起こるかを理解するためのいくつかの画像を次に示します。

ステップ 1 :ボタンをクリックして、パリ周辺のヒートマップを描画します。 ヒートマップ

結果: 予想どおり、パリ周辺のヒートマップ。

ステップ 2:ボタンをクリックして東のヒートマップを描画します: ヒートマップ2 結果: 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();
   }

私の質問

問題を特定する方法についてアドバイスをいただければ幸いです。汚れはさらに良いでしょう。

4

1 に答える 1

2

問題は、プラグインの作成者がタイル レイヤーをリセットしてから更新する必要があることです。再描画関数が Leaflet でこれを行わない理由は不明であり、Leaflet のバグである可能性があると思われます。私はあなたの問題を再現することができました.それを機能させるために今できることは、レイヤーを自分でリセットして更新することです. 新しいデータを設定した後、次の操作を行ってください。

heatmapLayer.setData(Your data);
heatmapLayer._reset();
heatmapLayer._update();
于 2013-07-02T03:53:54.043 に答える