WebGIS中利用AGS JS+eCharts实现一些数据展示的探索

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景

eCharts提供了迁徙图、热点图、夜视图等跟地图能够很好的结合起来的数据展示方式。但是如何将eCharts和我们的AGS JS框架以及自身的地图相结合,是一个很值得研究的地方。我所在小组中的一位同事上两周作为主力对eChart和我们目前所使用的AGS JS的结合做了一些研究,取得了不错的进展。我本人对其研究进行了跟进,这里作为二传手,将这些进展以及效果做一个小的总结,同时也利于我对他研究的进一步学习。感谢我这位优秀的同事。

2.必须解决的问题——坐标问题

series中的geoCoord参数是用来设置标注点地理坐标的。标注点是否能正确叠加到我们发布的地图上,此参数至关重要。

首先,我们将此参数中的值设置为与我们发布的地图相吻合的坐标值。比如,我们地图是使用的XIAN1980 的坐标系,以117度为经线做高斯投影后的地图。此时的参数我们设置为:

                       

我们研究eChart的源码可以发现,每个标注点之所以能显示在地图上,是因为它内部会首先在geoCoord中读取到该点的地理坐标,然后转换为此时的屏幕坐标。但是,如果我们已经给每一个标注点的X和Y赋予了值后,eChart内部会直接使用该值而不再自身进行转换。以下为eChart内部的该源码部分:

 

在了解了此过程后,我们便有了如下思路:

a.继承AGS上的基类Layer,扩展出一个eChartLayer。

b.将eChartLayer添加到AGS的Map中。

c.遍历Option中的Data,利用AGS提供的toScreen方法直接将geoCoord中的坐标点转换为此时的屏幕坐标,并赋予各标注点的X和Y。

通过测试,很好的解决了标注点能正确显示在地图上的问题。

3.进一步解决的问题

3.1频繁刷新问题

在将我们所写的eChartLayer加入到Map中后,我们会发现,每次地图开始平移时,eChart上的各种效果便开始不断的处于刷新重绘状态。

解决思路时,监听地图的平移事件,对eChart进行重绘控制。

3.2刷新后某些功能失效问题

eChart官网上提供的示例,因为是静止的,不会出现该问题。但是当把它们叠加到地图,对地图进行平移、放大、等需要经常刷新重绘的用途上时便会发生某些功能失效的问题。

比如,下图所示,当我们点击了图例中的案件数量时,以案卷数量为标题的标注点都会消失。但当我们平移地图后,所以位置点进行重绘时,相关设置便失效,之前消失的标注点又会被重绘出来。

                           

这里说一下我们自身的解决方法。

我们的思路时,将重绘分为两种,一种是重新参数绑定,一种是只改变标注点XY坐标的重绘。对于上述操作,我们进行只改变标注点坐标的重绘方式。该问题解决。

4.Iframe和eChart的兼容问题

在eChart中有大量的instanceof Array这样的代码。但是我们发现在Iframe中,此处会报出错误。所以如果在Iframe中应用eChart时,需要改写eChart中与此相关的代码。

5.效果展示

热点图:

 

荧光图:

 

迁徙图:

 

6.进一步研究的方向

eCharts中的地图显示部分提供了对GeoJson的支持。我们可以利用矢量切图生成各个GeoJson文件,然后通过eCharts对各矢量文件进行展示。由于eCharts本身使用的HTML5进行渲染,对大数据渲染支持的很好,我们既可以解决加速请求矢量数据的问题,也能解决大数据渲染问题。

 

                                                                   -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                           如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                        

时间: 2024-09-23 13:07:18

WebGIS中利用AGS JS+eCharts实现一些数据展示的探索的相关文章

服务器-请问如何在linux中利用springmv提供一个树结构的数据

问题描述 请问如何在linux中利用springmv提供一个树结构的数据 利用该数据完成一个jquery树插件,要求树的数据在服务器端提供缓存功能!

ASP.NET中利用SQLXML WEB服务访问XML数据

asp.net|sql|web|web服务|xml|访问|数据      引言 使用SQLXML 的Web 服务从你的ASP.net应用程序中直接访问XML 数据       SQLXML 是扩展SQL 服务器现有的对检索和储存XML 数据的支持的一套附加的工具. 有了SQLXML 3.0,你现在就能使用SQL服务器展示Web 服务了.在SQLXML的Web 服务可以让用户执行存储过程,用户定义的功能,并且它们支持模板.       在这篇文章中,你将看出怎样展示一个作为Web 服务并构建一个简

WPS表格中利用函数快速分类汇总复杂数据

在实际工作中,用户经常需要对WPS数据表中的明细数据进行汇总求和,如果用户希望对如图1的复杂数据明细表中所有小计项目进行快速汇总,可能不是一件容易的事情. 图1 用户数据明细表 下面将向用户介绍如何利用WPS表格的常用函数进行快速汇总. SUM函数快速汇总 WPS表格提供的SUM函数可以对用户选择的区域一次性添加公式,因此用户毋须分别对小计.合计和总计栏目手工输入,从而达到快速求和的目的. 选择数据区域 首先用户只需要将各个小计的区域逐步选定,区域选择的最终结果如图 2所示. 步骤1 先使用鼠标

webpack, react项目中利用外部JS库提升效率

前言 现在很多前端项目在构建时,都是一个vendor 公共JS文件和和一个app.js的文件,会造成一些弊端. 在项目的开发过程中,修改任何一个地方,都会触发JS的全局构建,需要等待非常久,长久下来大大的降低了开发效率. 另外一个弊端就是每次构建上线,vendor和app每次都会改变,任何一个小的更改都会使2个文件都改变,再次发布上线,用户的第一次加载速度都会很慢. 问题分析 实际在项目的过程中,依赖的外部库一般都会不改变的,所以可以把这一部分代码作为一个外部库,发布上线后通过CDN引入,无论再

在Python中利用Into包整洁地进行数据迁移的教程_python

动机 我们花费大量的时间将数据从普通的交换格式(比如CSV),迁移到像数组.数据库或者二进制存储等高效的计算格式.更糟糕的是,许多人没有将数据迁移到高效的格式,因为他们不知道怎么(或者不能)为他们的工具管理特定的迁移方法. 你所选择的数据格式很重要,它会强烈地影响程序性能(经验规律表明会有10倍的差距),以及那些轻易使用和理解你数据的人. 当提倡Blaze项目时,我经常说:"Blaze能帮助你查询各种格式的数据."这实际上是假设你能够将数据转换成指定的格式. 进入into项目 into

linux中利用shell定时清理网站缓存数据脚本

经过测试,脚本不成立!! 网站采用了一些方法进行加速(redis\cdn),这样就降低用户访问后端mysql的压力.以及前端速度不太好的问题,对用户请求到的所有页面进行了缓存,既然数据缓存了,解决用户看到的页面是否为最新页面就提上日程,下面这个脚本就诞生了.嘿嘿... Shell #!/bin/bash # Author:Byrd # Version:0.1 # Contact:root#t4x.org # define category for category in basic code d

(十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体功能便是,当激活I查询功能后,鼠标点击到某个要素上时,界面上会弹出一个对话框用来显示该要素的各属性信息.该功能截图如下:                         2.原理 在WebGIS中设计和实现该功能之前,我们有必要对该功能的原理做一个了解. 在OGC的WMS标准中规定了一个接口:Get

js中利用tagname和id获取元素的方法_javascript技巧

本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下 方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta cha

js中利用cookie实现记住密码功能_javascript技巧

在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo