プリロード（プレフィルタ）がポリマップAPIをポイントします

Question

私はポリマップJS lybraryを使用してプロジェクトを作成しています。私は約20万点をプロットする必要があります。ブラウザにポイントを読み込むのに時間がかかり、ナビゲータが非常に遅いです。

私はドキュメントを読んだので、データをページに追加する前にGeoJsonをフィルタリングするオプションはありません。

var po = org.polymaps; 
var map = po.map() 
.container(document.body.appendChild(po.svg("svg"))) 
.center({lat: 45.468318, lon: 9.1709}) 
.zoom(13) 
.add(po.interact()); 

//Skinning the map 
map.add(po.image() 
.url(po.url("http://{S}tile.cloudmade.com" 
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register 
+ "/998/256/{Z}/{X}/{Y}.png") 
.hosts(["a.", "b.", "c.", ""]))); 

//Importing the geoJSON 
map.add(po.geoJson() 
.url("test_4sq.json") 
.id("streets") 
.on("load", loadAreas) 
.tile(false)); 

map.add(po.compass() 
.pan("none")); 

// This function loads all the data and then do the filtering (very sluggish method) 
function loadAreas(obj) { 
for (var i = 0; i < obj.features.length; i++) { 
    var f = obj.features[i]; 
    var e = obj.features[i].element; 
    var p = obj.features[i].data.properties; 
    e.setAttribute('r', 4); 
    e.setAttribute('id', f.data.id); 
    e.setAttribute('title', p.venueName); 
    //console.log(e); 

    // Displaying the data in August (month propriety = '8') 
    if (p.month != "08") 
     console.log(e); 
    else 
     e.setAttribute('display', 'none'); 
} 
} 

Answer 1

私はスクリプトをより速くする方法を考え出しました。 まず、localhostまたはサーバー経由でアプリケーションを起動すると、すべての作業が高速になります。 私はいつもファイル（file：///pathTo_file/index.html）でアプリを開きます！それは間違っている。代わりにサーバーを使用する方がいいです（www.pathTo_file.com/またはlocalhost：//pathTo_file/index.html） 2番目に、インポートしたjsonを縮小しようとしました。私は読みやすくするためにスペースや改行をたくさん残していましたが、ロードするにはかなり重かったので、この無駄な文字をすべて削除しました。 第3に、ユーザーがdaypickerを使用する場合のみファイルをロードします。このようにして、アプリケーションは最初にすべてのタイルをロードし、2回目にユーザーが選択したデータをロードします。

somoneが興味がある場合のコードのサンプルを示します。

$(document).ready(function() { 



// DAY AND MONTH CORRECTION RELATED TO FILENAME 
function addZero(num){ 
    console.log("Function launched: addZero") 
    parseInt(num); 
    if(num>=1 && num<=9){ 
      num="0"+num; 
    } 
    return num; 
} 

$("#datepicker").datepicker({ 
    dateFormat: 'yy/mm/dd', 
    inline: true, 
    minDate: new Date(2011, 8 - 1, 20), 
    maxDate:new Date(2011, 12 - 1, 31), 
    altField: '#datepicker_value', 
     onSelect: function(){ 
     var selDay = $("#datepicker").datepicker('getDate').getDate();     
     var selMonth = $("#datepicker").datepicker('getDate').getMonth() + 1;    
     var selYear = $("#datepicker").datepicker('getDate').getFullYear(); 


//PLOTTING THE MAP WITH THE USER'S SELECTION - DATEPICKER PARAMETERS - 
plotMap(addZero(selDay), addZero(selMonth)); 
    } 
}); 
//INITIALISATING THE DATEPICKER 
$("#datepicker").datepicker('setDate', new Date()); 


    // JSON DATA IMPORT 
    var po = org.polymaps; 
    var map = po.map() 
      .container(document.body.appendChild(po.svg("svg"))) 
      .center({lat: 45.468318, lon: 9.1709}) 
      .zoom(13) 
      .add(po.interact()); 

    map.add(po.image() 
      .url(po.url("http://{S}tile.cloudmade.com" 
      + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register 
      + "/998/256/{Z}/{X}/{Y}.png") 
      .hosts(["a.", "b.", "c.", ""]))); 

    function plotMap(day, month){ 
     var jsonUrl = "json/4sq_"+day+"_"+month+"_min.json"; 
     map.add(po.geoJson() 
      .url(jsonUrl) 
      .on("load", loadSingleEvents)); 

      console.log("Ho caricato il file:" + jsonUrl); 
    }; 


    map.add(po.compass() 
      .pan("none")); 


//LOADING THE DATA 
    function loadSingleEvents(obj) { 
     console.log("Function launched: loadSingleEvents") 
     singleEvents=true; 

     $.each (obj.features, function (i, feat){ 
      var point = feat.element; 
      var propriety = feat.data.properties; 
      point.setAttribute('r', 3.5); 
      point.setAttribute('id', feat.data.id); 
      point.setAttribute('data-venueName', propriety.venueName); 
      point.setAttribute('data-hour', propriety.hour);   
     }); 
     console.log("Numero di Elementi visualizzati: (dovrebbe essere sui 3500) "+ obj.features.length);   

    } 



}); 

Answer 2

にGeoJSONタイルサーバーを使用している多くの要素と一緒に行くための唯一の方法のように思える：

は、誰かがこれより良い方法を提案することができます。 TileStacheをチェックしてください。これは役に立ちます： http://goalfinch.com/blog/2011/03/building-interactive-maps-with-polymaps-tilestache-and-mongodb-part-2/