[原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死。但有的时候,还真的需要,比如,我要加载全球的AQI的测站和数据,这些站点在全球有4000多个,如何加载这些点并提高,OL3的ImageVector是一个很好地选择,简单的说,就是把这些要素渲染到一张图上,这样提高性能。代码如下:
//加载JSON数据
mainxiu.loaddata=function(options)
{
var that=this;
var styleCache = {};
var colors=['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)'];
var createStyle = function(feature, resolution) { var colorkey=0;
var reskey=2; var dataval= parseFloat(feature.data.aqi);
if(dataval>=0 && dataval<=50)
{
colorkey=0;
}else if(dataval>50 && dataval<=100)
{
colorkey=1;
}
else if(dataval>100 && dataval<=150)
{
colorkey=2;
}
else if(dataval>150 && dataval<=200 )
{
colorkey=3;
}
else if(dataval>200 && dataval<=300 )
{
colorkey=4;
}
else
{
colorkey=5;
} if(resolution<4)
{
reskey=16;
}else if(resolution<19)
{
reskey=12;
}
else if(resolution<76)
{
reskey=8;
}
else if(resolution<305)
{
reskey=6;
}
else
{
reskey=3;
}
var style = styleCache[colorkey+"-"+reskey];
if (!style) { style = [new ol.style.Style({
image: new ol.style.Circle({
radius: reskey,
fill: new ol.style.Fill({
color: colors[colorkey],
})
}) })];
styleCache[colorkey+"-"+reskey]=style;
} return style;
}; $.getJSON(options.url, function(result) { var tmpLayer = that.getLayerById(options.id); if (tmpLayer == null)
{
tmpLayer = new ol.layer.Image({
id: options.id,
opacity: 0.95,
maxzoom: 1224,
minzoom: 0.0001
});
that.olmap.addLayer(tmpLayer);
} var features=[];
$(result).each(function(i, val) { geom = new ol.geom.Point(ol.proj.transform([ parseFloat(val.g[1]), parseFloat(val.g[0]) ], 'EPSG:4326', 'EPSG:3857')); feature = new ol.Feature(geom);
features.push(feature); feature.data = val; }); // Source and vector layer
var vectorSource = new ol.source.Vector({
features : features
}); var vimage= new ol.source.ImageVector({
source:vectorSource,
});
vimage.setStyle(createStyle); tmpLayer.setSource(null);
tmpLayer.setSource(vimage); that.setLayerVisible(options.id, true); });
};
大家可以不使用ImageVector进行显示对比一下性能:
使用ImageVector的方式,极大地提高了性能。另外如果是arcgis的话,使用WMS发布或许是一个更好的选择。因为grahpic加载这样的数据,性能确实是一个问题。
[原创.数据可视化系列之三]使用Ol3加载大量点数据的更多相关文章
- [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...
- 如何实现Echart不刷新页面,多语言切换下的地图数据重新加载,api请求数据加载,soketed数据实时加载
可视化项目中经常用到ecahrt,各种异步加载,连接socket,多语言切换等问题,现在汇总一下: Ecahrt初始化,全局统一init,可以初始化为0,等待后续数据操作 1.如果是api重新请求,数 ...
- springboot源码解析-管中窥豹系列之BeanDefine如何加载(十三)
一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...
- jsTree 的简单用法--异步加载和刷新数据
首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- 异步加载回来的数据不受JS控制了
写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...
- hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)
数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...
- echarts 图表重新加载,原来的数据依然存在图表上
问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...
- mxnet自定义dataloader加载自己的数据
实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...
随机推荐
- Android sdk tool android 命令参数
命令参数说明: $ ./android --? Error: Flag '--?' is not a valid global flag. Did you mean to specify it a ...
- [手机取证] CelleBrite UFED Touch系列使用视频
CelleBrite UFED Touch系列产品使用指导视频 (持续更新中) 1. CelleBrite UFED Touch产品介绍
- LinkedList详细分析
一.源码解析1. LinkedList类定义2.LinkedList数据结构原理3.私有属性4.构造方法5.元素添加add()及原理6.删除数据remove()7.数据获取get()8.数据复制clo ...
- 修改.gitignore后让其生效
在使用git的时候我们有时候需要忽略一些文件或者文件夹.我们一般在仓库的根目录创建.gitignore文件在提交之前,修改.gitignore文件,添加需要忽略的文件.然后再做add commit p ...
- 简单设置eworkflow条件的方式
在eworkflow自定义工作流产品中,设置条件节点,是在节点的后续连线上设置的.每一个处理节点(除结束节点外)都至少有一条连线连接到下一个节点,当有多条连线连接到其他节点的时候,就需要在多出的连线上 ...
- mapreduce核心原理
1:第一阶段: 第一阶段的task每一个nodemanager并发运行程序,完全并发,各不影响.这就是map阶段 运行的task时maptask 2:第二个阶段的task并发实例互不相干,但是他们的数 ...
- Linux里的2>&1
我们在Linux下经常会碰到nohup command>/dev/null 2>&1 &这样形式的命令.首先我们把这条命令大概分解下首先就是一个nohup表示当前用户和系统 ...
- 如何存session,取session
存session: Session["codes"] =要存的session字段 用哈希函数存多个: System.Collections.Hashtable hs = new S ...
- KETTLE实现数据的删除和更新
一.实现目标 源数据库的数据更新或者删除之后,目标数据库的数据跟着更新或删除,整体流程截图如下: 一.准备工作 源数据库ORACLE 目标数据库MongoDB,在源数据库添加删除.更新触发器 二.操 ...
- git Could not read from remote repository 解决
错误: fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote reposit ...