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/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
WebGIS中利用AGS JS+eCharts实现一些数据展示的探索的更多相关文章
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
- 利用HTML5和echarts开发大数据展示及大屏炫酷统计系统
想这样的页面统计及展示系统都是通过echarts来发开的及ajax数据处理,echarts主要是案例,在案例上修改即可,填充数据 echarts的demo案例如下: http://echarts.ba ...
- 【转】asp.net中利用session对象传递、共享数据[session用法]
来自:http://blog.unvs.cn/archives/session-transfer-method.html 下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值 ...
- asp.net中利用session对象传递、共享数据[session用法]
下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值: 首先定义将一个文本值或单独一个值赋予session,如下: session[“name”]=textbox1.text ...
- WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...
- MVC中利用knockout.js实现动态uniqueId
题目比较拗口,但是这篇文章确实直说这一点. knockout.js是一个JS库,它的官网是http://knockoutjs.com/ 这篇文章的重点是knockout在工作的一个功能中的应用.最终效 ...
- vue中利用Promise封装jsonp并调取数据
Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败 ...
- 前端技术之:如何在Vue中使用clipboard.js复制服务端数据
第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...
- 转《在浏览器中使用tensorflow.js进行人脸识别的JavaScript API》
作者 | Vincent Mühle 编译 | 姗姗 出品 | 人工智能头条(公众号ID:AI_Thinker) [导读]随着深度学习方法的应用,浏览器调用人脸识别技术已经得到了更广泛的应用与提升.在 ...
随机推荐
- jzoj5929. 【NOIP2018模拟10.26】情书
动态规划: #include<bits/stdc++.h> using namespace std; int n,iv[30]; #define mo 998244353 typedef ...
- Flask 中的路由系统
基本用法 Django的路由系统url集中在一起,而Flask的路由系统以装饰器的形式装饰在视图上如: @app.route("/",methods=["GET" ...
- HTTP 总结
一.概念 特性 1. HTTP协议用于客户端和服务端之间的通信 2. 通过请求和响应的交互达成通信 : HTTP协议规定,请求从客户端发出,最后服务器端响应请求并返回,也就是说,肯定是从客户端开始建立 ...
- Hexo的next主题安装
通过Git+Hexo搭建的个人博客地址:https://liangh.top/ 1.使用git克隆最新版本 2.先在themes目录创建一个next文件夹,然后在hexo站点目录下右键打开Git Ba ...
- RabbitMQ常见错误2
java.io.IOException at com.rabbitmq.client.impl.AMQChannel.wrap(AMQChannel.java:105) at com.rabbitmq ...
- app自动化测试之实战应用(百度app简单测试)
模拟在百度app中搜索python相关内容代码如下: from appium import webdriver desired_caps = {} desired_caps['deviceName'] ...
- Django --ORM常用的字段和参数 多对多创建形式
1 ORM字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. IntegerField 一个整数类型 ...
- mysql 开发进阶篇系列 24 查询缓存下
一. 查询缓存 1.开启缓存 [root@xuegod64 etc]# vim my.cnf 设置了缓存开启,缓存最大限制128M,重启服务后,再次查询 -- 开启查询缓存后 SHOW VARIABL ...
- Ajax经典交互讲解
资料: XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.XMLHttp ...
- leetcode — longest-palindromic-substring
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/longest-palindromic-substri ...