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

article/2025/9/10 13:16:21

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/

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

                                        

转载于:https://www.cnblogs.com/naaoveGIS/p/4248819.html


http://chatgpt.dhexx.cn/article/x8A0wGTV.shtml

相关文章

AngularJS所有版本下载地址

AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题。 大家可以从下面地址获取AngularJS所以版本: https://code.angularjs.org/ 各种版本应有尽有&a…

视频教程-Web前端进阶-AngularJs4从基础到实战-AngularJS

Web前端进阶-AngularJs4从基础到实战 优就业互联网营销首席讲师 精通各大搜索引擎原理,对SEO有深入的研究和独到见解,擅长站内与站外优化与策略部署。熟悉常用的Web项目开发技术,擅长营销型、成交型网站策划,精通织梦、帝国、word…

arcgis js(二)显示三维地图

1、上一节讲了arcgis js入门与提高(一)加载二维地图arcgis js(一)显示二维地图_郝大大的博客-CSDN博客,本节继续讲如何加载三维地图,与3.x版本不同,ArcGIS API for JavaScript 3.x版本地图都是显…

【九】坐标格网添加以及调整

一、前言 有些小伙伴应该见过上述这种专业的制图,本节主要是针对上述图片中的坐标格网进行讲解。如果添加并且对其进行设置。 二、具体步骤 1、接上前文的内容继续,首先一样添加相关数据并且切换到布局视图。 2、 单击一下数据格网,然后被选…

AngularJS简单入门教学和使用

前端框架千千万&#xff0c;今天我们来学习简单的AngularJS的入门案例和学习&#xff0c;让我们快速掌握和使用 使用步骤 引入js文件&#xff0c;前端框架首先就是引入js脚本&#xff0c;这里可以去官网上进行下载 <script src"../plugins/angularjs/angular.min.j…

js搭建网站 web服务器,AngularJS如何搭建web服务器?angularjs搭建web服务器的详细过程...

本篇文章主要的介绍了关于angularjs启动web服务器的操作&#xff0c;希望能帮到大家&#xff0c;现在开始看文章吧 安装node.js 下载链接 官网地址&#xff1a; https://nodejs.org/en/ 我下的解压版的&#xff0c;直接解压到你想安装的目录中 在我的电脑(右键)→属性→高级系统…

python画气球_戳气球(python)

问题描述* 有 n 个气球&#xff0c;编号为0 到 n-1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。如果你戳破气球 i &#xff0c;就可以获得 nums[left] * nums[i] * nums[right] 个硬币。 这里的 left 和 right 代…

312. 戳气球(区间dp)

链接&#xff1a;https://leetcode-cn.com/problems/burst-balloons/ 首先这个长度为500的范围可以猜测出是O(n^3)区间dp这里主要讲述为什么状态定义要定义成开区间而不是闭区间 最大的原因&#xff1a;闭区间计算出来的状态是无法保证正确性的 假如使用一开始的闭区间定义去…

Python 算法戳气球

戳气球 题目描述&#xff1a; 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里…

1012-戳气球

题目如下 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 和 i 1 代…

戳气球和布尔运算问题(巨难)

一.大气球的最大得分 1.对应letecode链接 打气球的最大分数_牛客题霸_牛客网 (nowcoder.com) 2.题目描述&#xff1a; 3.解题思路 本题个人觉得本题巨难&#xff1a;主要步骤如下&#xff1a; 1.预处理&#xff1a;为便于处理&#xff0c;可在 nums 数组两端各添加一个哨兵 1&…

经典动态规划:戳气球问题

点击上方蓝字设为星标 东哥带你手把手撕力扣~ 作者&#xff1a;labuladong 公众号&#xff1a;labuladong若已授权白名单也必须保留以上来源信息 今天我们要聊的这道题「Burst Balloon」和之前我们写过的那篇 经典动态规划&#xff1a;高楼扔鸡蛋问题 分析过的高楼扔鸡蛋问题类…

*312戳气球

​​​​​​戳气球 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 …

力扣---戳气球

力扣—戳气球 文章目录 力扣---戳气球一、题目描述二、回溯思路三、动态规划思路四、代码 一、题目描述 有 n 个气球&#xff0c;编号为0 到 n-1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。每当你戳破一个气球 …

【LeetCode】312. 戳气球

312. 戳气球&#xff08;困难&#xff09; 解法一&#xff1a;动态规划 首先看一个区间&#xff1a; 区间(i,j) 是一个开区间&#xff0c;因为我们只能戳爆 i 和 j 之间的气球&#xff0c;不能戳爆索引为 i 和 j 的气球。 我们不妨考虑该区间内被戳爆的最后一个气球&#xff…

LeetCode312:戳气球

要求 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 和 i 1 代表和…

【动态规划】LeetCode 312. 戳气球 --区间DP问题

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…

Golang每日一练(leetDay0105) 最小高度树、戳气球

目录 310. 最小高度树 Minimum Height Trees &#x1f31f;&#x1f31f; 312. 戳气球 Burst Balloons &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一…

Leetcode.312 戳气球

题目链接 Leetcode.312 戳气球 题目描述 有 n个气球&#xff0c;编号为0到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 n u m s [ i − 1 ] ∗ n u m s [ i ] ∗ …

LeetCode 312. 戳气球(Java)

题目 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 和 i 1 代表和…