不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏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加载大量点数据的更多相关文章

  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. 坦克大战,看你能坚持几秒 ~~Duang~~Duang

    闲来无事,写了一个坦克大战的小游戏,打开页面就能看到源码,代码还没有来得及整理.大家闲来玩玩吧,看谁玩的时间长! http://xiaohaibaomu.com/home/index

  2. c++ 使用shell命令

    #include <iostream> #include <stdio.h> #include <vector> #include <unistd.h> ...

  3. ios开发中遇到的编译错误总结

    1:Undefined symbols for architecture arm64: ? 1 2 3 <code>Undefined symbols for architecture a ...

  4. get_list_or_404(klass, *args, **kwargs)和get_object_or_404(klass, *args, **kwargs)区别

    get_object_or_404() 是通过调用get()方法从model管理器上获取数据, 如果对象不存在,它会报Http404的异常,而不是model的 DoseNotExist异常. get_ ...

  5. SparkSQL DataFrames操作

    Hive中已经存在emp和dept表: select * from emp; +--------+---------+------------+-------+-------------+------ ...

  6. QTP处理各类鼠标事件fireEvent

    在做web测试时,页面上的HTML标签会包含各类事件:单击(onclick).双击(onDblClick).光标聚集(OnBlur).onchange.onfocus.onmousedown.onmo ...

  7. .net 中select和where的区别

    Select(p=>p.ID==id) 这里选择的结果是通过p,访问迭代器,然后选取的是p.ID==id的结果,选择到的是bool对象 Where(p=>p.ID==id) 这里是过滤,p ...

  8. JSTL函数标签库 fn标签

    JSTL函数标签库 fn标签 在使用jstl的函数标签库之前需要在页面中引入: <%@ taglib prefix="fn" uri="http://java.su ...

  9. HTML 浏览器显示控制

    //强制浏览器以最高版本运行页面 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" ...

  10. 这些年正Android - 大学

     还记得,第一次看见小周是在大一的操场上. 她正向教学楼站着,一身白配粉的休闲上衣搭配湖蓝色的牛仔裤,穿着一双很平凡的凉鞋,手里拿着当年的Nokia 3110c,皙清的手指,素颜的站着不言不笑.现在回 ...