Предварительная загрузка (предварительная фильтрация) точек в Polymaps API - PullRequest
Новая
       22

Предварительная загрузка (предварительная фильтрация) точек в Polymaps API

1 голос
/ 11 сентября 2011

Я создаю проект, используя библиотеку Polymaps JS.Я должен построить около 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');
} 
}

Ответы [ 2 ]

0 голосов
/ 18 октября 2011

Я разобрался, как сделать скрипт быстрее. Прежде всего, запуск приложения через локальный хост или сервер заставляет все работать быстрее. Я всегда открываю приложение через файл (файл: ///pathTo_file/index.html)! Это неверно. Вместо этого лучше использовать сервер (www.pathTo_file.com/ или localhost: //pathTo_file/index.html) Во-вторых, я попытался минимизировать импортированный JSON. Я оставил много пробелов и разрывов строк для лучшей читабельности, но загрузить его было довольно тяжело, поэтому я удалил все эти бесполезные символы. В-третьих, я загружаю файл, только если пользователь использует дневник. Таким образом, приложение загружает все плитки в первую очередь, а во второй раз пользователь выбирает данные.

Вот пример кода, если сомони заинтересован. 

$(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);           

    }



});
0 голосов
/ 14 октября 2011

Использование сервера листов geoJSON кажется единственным способом использования такого количества элементов.Проверьте TileStache.Это также может быть полезно: http://goalfinch.com/blog/2011/03/building-interactive-maps-with-polymaps-tilestache-and-mongodb-part-2/

...