사전로드 (사전 필터)가 폴리맵 API를 가리키고 있습니다.

Question

폴리맵 JS lybrary를 사용하여 프로젝트를 만들고 있습니다. 나는 약 200,000 포인트를 음모해야한다. 포인트를 브라우저에로드하는 데 시간이 걸리고 탐색이 매우 느립니다.

문서를 읽었으며 데이터를 페이지에 추가하기 전에 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). 둘째, 가져온 json을 축소하려고했습니다. 더 나은 가독성을 위해 많은 공백과 줄 바꿈을했는데로드하는 데 꽤 어려웠습니다. 그래서이 쓸모없는 문자를 모두 제거했습니다. 셋째, 사용자가 낮 피커를 사용하는 경우에만 파일을로드합니다. 이 방법으로 앱은 모든 타일을 먼저로드하고 두 번째로 사용자가 선택한 데이터를로드합니다.

다음은 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/