Google Maps 3 RedRaw Polyline Flickering
-
26-10-2019 - |
質問
かなり多数のLAT/LNGポイント(〜1000)でポリラインを描画しています。ユーザーが時間境界を調整できる2つのスライダー(開始と終了)があり、ポリラインを更新してこれらの2回の間にデータを表示します。
私の更新アルゴリズムは次のようになります:
var mvcPath = new google.maps.MVCArray();
for (var i = 0; i < gpsData.length; i++) {
if (gpsData[i]['timestamp'] <= endDate &&
gpsData[i]['timestamp'] >= startDate) {
mvcPath.push(gpsData[i]['location']);
}
}
this.path.setPath(mvcPath);
奇妙なことは、端のスライダーをドラッグすると、予想通りにラインの再描画をドラッグすることですが、スタートスライダーをドラッグすると、ラインの部分がわずかに動いているように見えます(そうではないように見えます(これは、近くにズームしたとき)。 GoogleがPolylineに適用されるアンチエイリアスアルゴリズムと関係があるかもしれないと思いましたが、エンドスライダーを移動してもそうではありません。
このちらつきの原因を知っている人はいますか?
解決
私は今のところうまくいくと思われるソリューションをハッキングしました。 APIが前面にポイントを追加するのを好まなかったように見えたため、ポイントの数を一貫して維持しようとしました。
1000ポイントのセットがあり、200〜900のみを表示したいとします。ポイント200、200回の位置を描くと、残りのデータをポイント900に描画すると、フリッカリングが停止します。 10-330を表示するには、ポイント10を10回描画し、残りのデータをポイント330に描画します。
これには、Googleがマップのラインを内部的に保存する方法があると思います。ラインの前面に追加すると、配列全体を再インデックスして、ラインをゼロから再描画する必要があります。
誰かがより良い答えを思い付く場合、私は今のところ答えを受け入れません。
所属していません StackOverflow