惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

SecWiki News
SecWiki News
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
Visual Studio Blog
博客园 - 叶小钗
S
SegmentFault 最新的问题
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
酷 壳 – CoolShell
酷 壳 – CoolShell
腾讯CDC
D
Darknet – Hacking Tools, Hacker News & Cyber Security
V
V2EX
阮一峰的网络日志
阮一峰的网络日志
L
Lohrmann on Cybersecurity
量子位
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tor Project blog
J
Java Code Geeks
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
博客园 - 三生石上(FineUI控件)
Attack and Defense Labs
Attack and Defense Labs
AI
AI
The Cloudflare Blog
T
Tailwind CSS Blog
S
Schneier on Security
爱范儿
爱范儿
PCI Perspectives
PCI Perspectives
Stack Overflow Blog
Stack Overflow Blog
S
Secure Thoughts
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
T
The Exploit Database - CXSecurity.com
博客园 - 【当耐特】
V2EX - 技术
V2EX - 技术
S
Securelist
P
Proofpoint News Feed
T
Threat Research - Cisco Blogs
Help Net Security
Help Net Security
C
Cisco Blogs
N
News and Events Feed by Topic
人人都是产品经理
人人都是产品经理
B
Blog RSS Feed
K
Kaspersky official blog
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
S
Security Affairs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Simon Willison's Weblog
Simon Willison's Weblog

博客园 - dataxiu.com

[原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现 [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取 [原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色 [原创.数据可视化系列之七]阿里竞赛作品技术展示 [原创.数据可视化系列之六]使用openlyaers进行公网地图剪切 [原创.数据可视化系列之五]韩国"萨德"系统防御图 [原创.数据可视化系列之四]跨平台,多格式的等值线和等值面的生成 [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布 [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据 管理类软件的界面模板。 使用SilverLight开发ARPG游戏(一) 买联想学生机器的遭遇:问联想1(连载) 联想09年春节学生机开卖了。 谈UrlRewriter在XP和2003上IIS设置的差异 使用SilverLight构建插件式应用程序(九) —聊天插件客户端的实现 .NET 访问JAVA的WebService使用SOAP头 使用SilverLight构建插件式应用程序(八) —聊天插件Duplex WCF的实现 使用SilverLight构建插件式应用程序(七) 使用SilverLight构建插件式应用程序(六)
[原创.数据可视化系列之三]使用Ol3加载大量点数据
dataxiu.com · 2016-05-29 · via 博客园 - dataxiu.com

      不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏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进行显示对比一下性能:

image

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