2016-04-14 13 views
1

私はちょっとしたデータでリーフレットマップを作成しています。全体として、いつでも地図上に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の制御には何が欠けていますか?

+1

興味深い。私は現在、HTML表形式のデータを生成しており、一度それが数百行に達すると、Internet Explorerは表を計算するのに本当に時間がかかります。この種の行動にも解決策があるかどうかを知りたいと思います。 – Danmoreng

+0

地図上に多数のマーカー点を同時に表示させると、常にパフォーマンスの問題が発生します。数年前に数十万点を処理する必要があったシステムでは、より広いズームレベルのマーカー点ではなく、事前生成されたヒートマップオーバーレイグラフィックを使用し、地図が表示されたときにのみ実際のマーカーを示しましたウィンドウ領域に1000個未満のマーカーがあるレベルにズームインしました。また、ユーザーがスクロールしてメモリー内のマーカーの総数を特定のしきい値(5000、IIRC)以下に保つように、マーカーを動的に追加および削除しました – Simba

+0

はい。クラスタリングは私の現在のパフォーマンスの問題を減らそうとしています。本当にうまくいっていますが、現在はマーカーを追加するだけで苦労しています。私はIvanの勧告を検討しているが、ベータ版は現時点では安定していないようだ。 –

答えて

-1

profiling tools in your web browserを使用すると、その時間に何が食べられているのかを確認できます。あなたのケースでは

、私はそれがdblclickaddEventListenerへの呼び出しになるでしょう賭ける - 言い換えれば、Leaflet bug 3972Leaflet bug 4357、短い答えは、「1.0.0ベータリーフレットするリーフレット0.7.xからのアップグレード」です。

+0

20k +のマーカーがチラシマップに追加されていることをお勧めする場所はありますか?私はこれらの問題が現時点で私が経験しているものに似ているとは確信していません。私はそれらを読んで、1.0.0に安全に更新できるかどうかを確認します。 –

+0

はい...ベータ版は私の全体の地図を壊します...私はそれを調べますが、それは "安定版"に何の修正もされていません... –

+0

これは既知の問題リーフレット付き。私はこれが私の問題を解決することは証明できませんが、確かにより多くの問題を引き起こしています。 –

0

この質問にはいくつかの要因があります。最初の1つはリーフレットが主要な問題ではなく、(一見)不要なコードを複製することでした。

IEは、フェイルアウトする前に500万行のJavascriptを実行できます(編集されていない設定)。このロジックの欠点の1つは、スクリプトの間に待ち時間があっても実行される行数を節約するように見えるということです。この数値を厳密にリセットする唯一の方法はsetTimeoutです。これは完全な警察です。あなたがこれをしなくてはいけないのですが、何回もループしてIEで動作するスクリプトが必要な場合は、setTimeoutを追加する必要があります。

私はタイムアウト時間のための推奨を見つけましたが、50msはOKであるようです。その他の推奨事項は、ブラウザのデフォルトの時間で十分であるため、これを設定しないことでした。しかし、一部のブラウザでは400msに設定されていますが、これはほぼ半分の長さです...それは私には合理的ではないようです。だから50msです。これまでのところ問題はありません。

「あなたのコードをより良くする」と思うのは、これが本当にできることです。またはIEを取り除くだけです。ただ言って。

関連する問題