不管是百度地圖還是高德地圖恭陡，都很難得見到在地圖上加載大量點要素蹬音，比如同屏1000的，因為這樣客戶端性能會很低休玩，尤其是IE系列的瀏覽器著淆，簡直是卡的要死。但有的時候拴疤，還真的需要永部，比如，我要加載全球的AQI的測站和數(shù)據(jù)呐矾，這些站點在全球有4000多個苔埋，如何加載這些點并提高，OL3的ImageVector是一個很好地選擇蜒犯，簡單的說组橄，就是把這些要素渲染到一張圖上，這樣提高性能罚随。
//加載JSON數(shù)據(jù)
mainxiu.loaddata=function(options)
{
varthat=this;
varstyleCache = {};
varcolors=['rgba(0, 153, 102, 0.99)',
'rgba(255, 222, 51, 0.99)',
'rgba(255, 153, 51, 0.99)',
'rgba(204, 0, 51, 0.99)',
'rgba(102, 0, 51, 0.99)',
'rgba(126, 0, 35, 0.99)'];
varcreateStyle =function(feature, resolution) {
varcolorkey=0;
varreskey=2;
vardataval=parseFloat(feature.data.aqi);
if(dataval>=0 && dataval<=50)
{
colorkey=0;
}elseif(dataval>50 && dataval<=100)
{
colorkey=1;
}
elseif(dataval>100 && dataval<=150)
{
colorkey=2;
}
elseif(dataval>150 && dataval<=200 )
{
colorkey=3;
}
elseif(dataval>200 && dataval<=300 )
{
colorkey=4;
}
else
{
colorkey=5;
}
if(resolution<4)
{
reskey=16;
}elseif(resolution<19)
{
reskey=12;
}
elseif(resolution<76)
{
reskey=8;
}
elseif(resolution<305)
{
reskey=6;
}
else
{
reskey=3;
}
varstyle = styleCache[colorkey+"-"+reskey];
if(!style) {
style = [newol.style.Style({
image:newol.style.Circle({
radius: reskey,
fill:newol.style.Fill({
color: colors[colorkey],
})
})
})];
styleCache[colorkey+"-"+reskey]=style;
}
returnstyle;
};
$.getJSON(options.url,function(result) {
vartmpLayer = that.getLayerById(options.id);
if(tmpLayer ==null)
{
tmpLayer =newol.layer.Image({
id: options.id,
opacity: 0.95,
maxzoom: 1224,
minzoom: 0.0001
});
that.olmap.addLayer(tmpLayer);
}
varfeatures=[];
$(result).each(function(i, val) {
geom =newol.geom.Point(ol.proj.transform([parseFloat(val.g[1]),parseFloat(val.g[0]) ], 'EPSG:4326', 'EPSG:3857'));
feature =newol.Feature(geom);
features.push(feature);
feature.data = val;
});
// Source and vector layer
varvectorSource =newol.source.Vector({
features : features
});
varvimage=newol.source.ImageVector({
source:vectorSource,
});
vimage.setStyle(createStyle);
tmpLayer.setSource(null);
tmpLayer.setSource(vimage);
that.setLayerVisible(options.id,true);
});
};
大家可以不使用ImageVector進行顯示對比一下性能：
