私はちょっとしたデータでリーフレットマップを作成しています。全体として、いつでも地図上に0〜18000のマーカー点があります。長期実行スクリプトを修正するにはどうすればよいですか?
私が達成しようとしていますかを理解するために必要なコード:
var ds = L.markerClusterGroup({
disableClusteringAtZoom: 9,
maxClusterRadius: 120,
chunkedLoading: true,
iconCreateFunction: iconCreate
});
window.onload = function(){
map = L.map('map', {
layers: [baseLayer, ds],
worldCopyJump: true,
minZoom: 3,
inertiaMaxSpeed: 300
}).setView([lat, lng], zoom);
callAjax("/ajax/markers1.php", markers); // 4220 rows
// callAjax("/ajax/markers2.php", markers); // ~14000 rows
}
function callAjax(url, cb, options){
var xhttp = new XMLHttpRequest(),
opts = options || {};
xhttp.onreadystatechange = function(){
ajaxCheck(xhttp, cb, opts);
}
xhttp.open("POST", url, true);
xhttp.send();
}
function markers(xhttp){
var dJson = JSON.parse(xhttp.responseText);
for(var d = 0;d < dJson.length;d++){
addMarker(dJson[d]);
}
}
function addMarker(d){
L.marker([d.lat, d.lng], {
id: d.id
})
.addTo(ds);
}
上記のコードは、指定されたURLからJSONリクエストをつかみ、すでに結ばれるクラスタグループにマーカーを追加するためにリターンをループ地図に。 Chrome 49.0.2623.112 mでは、最初のAJAX応答は8秒後に戻り、さらに3〜5秒後にすべてのマーカーが読み込まれます。
IE 11では、長い実行スクリプトがあります。最初のマーカ・ランには4220のレコードがあります。私はループを100回だけ実行するように制限していますが、まだ長いスクリプトが実行されています。 1つのマーカだけを出力するようにしていますが、私はすべて4220(およびそれ以降の14000)が必要です。
"長時間実行されるスクリプト"が掲載されている場所が分かっていますが、それぞれが "あなたのコードをより良くする"と言います。私のコードを達成しようとしているタスクが完璧であると感じます。
このコードが正常に実行され、最終的にこのマップに18000以上のマーカーが追加されるように、IEの制御には何が欠けていますか?
興味深い。私は現在、HTML表形式のデータを生成しており、一度それが数百行に達すると、Internet Explorerは表を計算するのに本当に時間がかかります。この種の行動にも解決策があるかどうかを知りたいと思います。 – Danmoreng
地図上に多数のマーカー点を同時に表示させると、常にパフォーマンスの問題が発生します。数年前に数十万点を処理する必要があったシステムでは、より広いズームレベルのマーカー点ではなく、事前生成されたヒートマップオーバーレイグラフィックを使用し、地図が表示されたときにのみ実際のマーカーを示しましたウィンドウ領域に1000個未満のマーカーがあるレベルにズームインしました。また、ユーザーがスクロールしてメモリー内のマーカーの総数を特定のしきい値(5000、IIRC)以下に保つように、マーカーを動的に追加および削除しました – Simba
はい。クラスタリングは私の現在のパフォーマンスの問題を減らそうとしています。本当にうまくいっていますが、現在はマーカーを追加するだけで苦労しています。私はIvanの勧告を検討しているが、ベータ版は現時点では安定していないようだ。 –