不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死。但有的时候,还真的需要,比如,我要加载全球的AQI的测站和数据,这些站点在全球有4000多个,如何加载这些点并提高,OL3的ImageVector是一个很好地选择,简单的说,就是把这些要素渲染到一张图上,这样提高性能。代码如下:

  1. //加载JSON数据
  2.     mainxiu.loaddata=function(options)
  3.     {
  4.         var that=this;
  5.         var styleCache = {};
  6.         var colors=['rgba(0, 153, 102, 0.99)',
  7.         'rgba(255, 222, 51, 0.99)',
  8.         'rgba(255, 153, 51, 0.99)',
  9.         'rgba(204, 0, 51, 0.99)',
  10.         'rgba(102, 0, 51, 0.99)',
  11.         'rgba(126, 0, 35, 0.99)'];
  12.         var createStyle = function(feature, resolution) {
  13.  
  14.             var colorkey=0;
  15.             var reskey=2;
  16.  
  17.             var dataval= parseFloat(feature.data.aqi);
  18.             if(dataval>=0 && dataval<=50)
  19.             {
  20.                 colorkey=0;
  21.             }else if(dataval>50 && dataval<=100)
  22.             {
  23.                 colorkey=1;
  24.             }
  25.             else if(dataval>100 && dataval<=150)
  26.             {
  27.                 colorkey=2;
  28.             }
  29.             else if(dataval>150 && dataval<=200 )
  30.             {
  31.                 colorkey=3;
  32.             }
  33.              else if(dataval>200 && dataval<=300 )
  34.             {
  35.                 colorkey=4;
  36.             }
  37.             else
  38.             {
  39.                 colorkey=5;
  40.             }
  41.  
  42.             if(resolution<4)
  43.             {
  44.                 reskey=16;
  45.             }else  if(resolution<19)
  46.             {
  47.                  reskey=12;
  48.             }
  49.            else  if(resolution<76)
  50.             {
  51.                  reskey=8;
  52.             }
  53.             else  if(resolution<305)
  54.             {
  55.                  reskey=6;
  56.             }
  57.             else
  58.             {
  59.                reskey=3;
  60.             }
  61.            var style = styleCache[colorkey+"-"+reskey];
  62.             if (!style) {
  63.  
  64.               style = [new ol.style.Style({
  65.                 image: new ol.style.Circle({
  66.                   radius: reskey,
  67.                   fill: new ol.style.Fill({
  68.                     color: colors[colorkey],
  69.                   })
  70.                 })
  71.  
  72.               })];
  73.               styleCache[colorkey+"-"+reskey]=style;
  74.             }
  75.  
  76.             return style;
  77.         };
  78.  
  79.         $.getJSON(options.url, function(result) {
  80.  
  81.             var tmpLayer = that.getLayerById(options.id);
  82.  
  83.             if (tmpLayer == null)
  84.             {
  85.                 tmpLayer = new ol.layer.Image({
  86.                     id: options.id,
  87.                     opacity: 0.95,
  88.                     maxzoom: 1224,
  89.                     minzoom: 0.0001
  90.                 });
  91.                 that.olmap.addLayer(tmpLayer);
  92.             }
  93.  
  94.             var features=[];
  95.         $(result).each(function(i, val) {
  96.  
  97.         geom = new ol.geom.Point(ol.proj.transform([ parseFloat(val.g[1]), parseFloat(val.g[0]) ], 'EPSG:4326', 'EPSG:3857'));
  98.  
  99.         feature = new ol.Feature(geom);
  100.         features.push(feature);
  101.  
  102.         feature.data = val;
  103.  
  104.         });
  105.  
  106.         // Source and vector layer
  107.         var vectorSource = new ol.source.Vector({
  108.         features : features
  109.         });
  110.  
  111.             var vimage= new ol.source.ImageVector({
  112.                 source:vectorSource,
  113.             });
  114.         
  115.  
  116.             vimage.setStyle(createStyle);
  117.  
  118.             tmpLayer.setSource(null);
  119.             tmpLayer.setSource(vimage);
  120.  
  121.             that.setLayerVisible(options.id, true);
  122.  
  123.         });
  124.     };

大家可以不使用ImageVector进行显示对比一下性能:

使用ImageVector的方式,极大地提高了性能。另外如果是arcgis的话,使用WMS发布或许是一个更好的选择。因为grahpic加载这样的数据,性能确实是一个问题。

[原创.数据可视化系列之三]使用Ol3加载大量点数据的更多相关文章

  1. [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化

    11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...

  2. 如何实现Echart不刷新页面,多语言切换下的地图数据重新加载,api请求数据加载,soketed数据实时加载

    可视化项目中经常用到ecahrt,各种异步加载,连接socket,多语言切换等问题,现在汇总一下: Ecahrt初始化,全局统一init,可以初始化为0,等待后续数据操作 1.如果是api重新请求,数 ...

  3. springboot源码解析-管中窥豹系列之BeanDefine如何加载(十三)

    一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...

  4. jsTree 的简单用法--异步加载和刷新数据

    首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...

  5. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  6. 异步加载回来的数据不受JS控制了

    写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...

  7. hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)

    数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...

  8. echarts 图表重新加载,原来的数据依然存在图表上

    问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...

  9. mxnet自定义dataloader加载自己的数据

    实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...

随机推荐

  1. mysql on Mac OS

    在新买的macbook pro15上安装了mysql,发现2个问题 一个是workbench基本无法正常退出,都要force quit 第二是我正常通过workbench连接后,查看系统log,会发现 ...

  2. tornado 反向代理后 获取真实客户端IP

    首先,nginx必定会设置一个Header传送过来真实的IP nginx.conf server { proxy_set_header X-Real-IP $remote_addr; location ...

  3. background-position值为像素时的使用方法

    以前一直都知道这个属性,但是每次使用的时候都是试来试去,感觉很麻烦,所以花了一点小时间研究了一下,很简单,跟大家分享一下. 此属性需要在background属性中使用,有关background属性的值 ...

  4. 使用U盘安装win7系统

    --------------------------------------------------- 步骤1:制作可启动U盘(如果已经有可启动U盘则直接跳到步骤2) 1.下载系统镜像,请百度搜索“w ...

  5. Ejabberd作为推送服务的优化手段

    AVOS Cloud目前还在用Ejabberd做Android的消息推送服务.当时选择Ejabberd,是因为Ejabberd是一个发展很长时间的XMPP实现,并且基于Erlang,设想能在我们自主研 ...

  6. eclipse下的webservice开发

    关于eclipse下的webservice开发,有非常多的教程,这里只记下学习过程中的弯路: 1.无论是CXF模式还是AXIS模式,在出现start server之后,点击next报错:"s ...

  7. iOS开发-- RunLoop的基本概念与例子分析

    看了一下,上一篇貌似5个月前的

  8. iOS中的round ceil floorf表示的含义

    round:如果参数是小数,则求本身的四舍五入. ceil:如果参数是小数,则求最小的整数但不小于本身. floor:如果参数是小数,则求最大的整数但不大于本身.  

  9. python:让源码更安全之将py编译成so

    应用场景 Python是一种面向对象的解释型计算机程序设计语言,具有丰富和强大的库,使用其开发产品快速高效. python的解释特性是将py编译为独有的二进制编码pyc文件,然后对pyc中的指令进行解 ...

  10. webstorm编辑RN代码提示功能

    需要下载一个文件. 1. 进入你想存储这个文件的目录,按住shift+鼠标右键,选择“在此处打开命令窗口” 2. 在命令窗口中输入  git clone https://github.com/virt ...