预加载(预过滤器)点到Polymaps API
Pre-Load (pre filter) points into Polymaps API
我正在使用Polymaps JS库创建一个项目。我要画出大约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');
}
}
使用geoJSON平铺服务器似乎是处理这么多元素的唯一方法。看看TileStache。这可能也有帮助:http://goalfinch.com/blog/2011/03/building-interactive-maps-with-polymaps-tilestache-and-mongodb-part-2/
我想出了如何使脚本更快。首先,通过本地主机或服务器启动应用程序可以使所有工作更快。我总是通过file (file:///pathTo_file/index.html)打开应用程序!这是错误的。最好使用服务器代替(www.pathTo_file.com/或localhost://pathTo_file/index.html)其次,我尝试最小化导入的json。为了更好的可读性,我保留了很多空格和换行符,但它的加载非常重,所以我删除了所有这些无用的字符。第三,我只在用户使用daypicker时加载文件。通过这种方式,应用程序首先加载所有磁贴,然后在第二次加载用户选择的数据。
如果有人感兴趣,这里有一个代码示例。
$(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);
}
});
相关文章:
- 如何更改bigquery API中的计费层选项
- Amazon S3 REST API大小不正确
- 客户端服务器REST API captcha实现
- 使用Facebook live API创建实时视频对象时的隐私设置
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- API密钥使用和检查示例
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- 谷歌地图JS API+JSON-多个标记没有显示
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 如何在 API 调用后和 if 语句中启用提交按钮
- 与运行长作业(javascript,node.js)的第三方API同步的最佳实践
- 搜索api在mac上显示对话框
- Backbone.js restful json API design
- 标记的实时更新,无需加载页面谷歌地图API V3
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 对API数据使用声明性绑定
- 预加载(预过滤器)点到Polymaps API