我正在使用Polymaps JS歌词库创建一个项目。我必须绘制约200,000点。将点加载到浏览器中需要一段时间,然后导航非常缓慢。

我已经阅读了文档,在将GeoJson的数据添加到页面之前,没有用于筛选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');
}
}

最佳答案

使用geoJSON切片服务器似乎是处理这么多元素的唯一方法。看看TileStache。这也可能会有所帮助:http://goalfinch.com/blog/2011/03/building-interactive-maps-with-polymaps-tilestache-and-mongodb-part-2/

关于javascript - 预加载(预过滤器)指向Polymaps API,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7378161/

10-12 01:34