arcgis api for js之echarts开源js库实现地图统计图分析
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 结合 echarts 开源 js 库实现地图统计图分析
- 源代码 demo 下载
前面写过一篇关于arcgis api 3.x for js 实现地图统计图的,具体见:这里
那是基于 dojo 组件来实现图表统计的,实现的效果一般般;所以,本篇利用 arcgis api 3.x 结合 echarts 实现统计图效果,效果比之前好看,效果图如下:
实现的思路
自定义气泡窗口 ChartInfoWindow,继承 InfoWindowBase,为了 echarts 统计图表展示在自定义的气泡窗口里面;自定义气泡窗口 ChartInfoWindow 是为了适应地图上同时展示多个图表,地图默认的气泡窗口只能显示一个,不能同时显示多个的;
定义 ChartInfoWindow 的样式,具体样式如下:
.myInfoWindow {
position: absolute; z-index: 100; -moz-box-shadow: 0 0 1em #26393D; font-family: sans-serif; font-size: 12px; background-color: rgba(255, 255, 255, 0); } /*.dj_ie .myInfoWindow {*/ /*border: 1px solid rgba(255, 255, 255, 0);*/ /*}*/ .myInfoWindow .content { position: relative; color:#002F2F; overflow: auto; padding:2px 2px 2px 2px; background-color: rgba(255, 255, 255, 0); }
- 构造模拟数据:
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api for js之echarts开源js库实现地图统计图分析的更多相关文章
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(三)显示地图坐标系模块
config.xml文件的配置如下: <widget left="3" bottom="3" config="widgets/Coordinat ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)解说(三)显示地图坐标系模块
config.xml文件的配置例如以下: 1 2 <widget left="3" bottom="3" config="widgets/Coo ...
- 爆料喽!!!开源日志库Logger的剖析分析
导读 Logger类提供了多种方法来处理日志活动.上一篇介绍了开源日志库Logger的使用,今天我主要来分析Logger实现的原理. 库的整体架构图 详细剖析 我们从使用的角度来对Logger库抽茧剥 ...
- ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询?【FindTask类的使用】
从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图. 这次来个没有图的例子,看看纯文字的空间查询是什么样的. 本例适用于后台查询或低性能电脑的查询. 预览图 由于4.3和4.2的 ...
- ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画
这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜 ...
随机推荐
- C++对象模型之lambda表达式
lambda表达式的求值-对象构造 本来想写“定义”,即“definition”,像函数定义一样,函数具体实现的代码实体即为实现,但是就像lambda既然被称为表达式,它确实有表达式那样“求值”的动作 ...
- 关于回调(callback)
如果要理解回调,需要在分同步通信.异步通信的基础上了解 举个通俗的例子: 你打电话问书店老板有没有<JS>这本书,如果是同步通信机制,书店老板会说,你稍等,"我查一下" ...
- Python学习笔记整理总结【RabbitMQ队列】
RabbitMQ是消息队列.之前学过的队列queue:线程queue(threading queue),只是多个线程之间进行数据交互.进程queue(processing queue),只是父进程与子 ...
- 解决thymeleaf layout布局不生效
今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...
- python/numpy/tensorflow中,对矩阵行列操作,下标是怎么回事儿?
Python中的list/tuple,numpy中的ndarrray与tensorflow中的tensor. 用python中list/tuple理解,仅仅是从内存角度理解一个序列数据,而非数学中标量 ...
- 去培训机构参加IT培训值不值
近几年,IT培训机构可谓是琳琅满目,稂莠不齐.培训Java的,培训PHP的,培训大数据的等等吧,不一而足. 自己也算是IT技术圈子待了好多年了,面试过一些机构培训出来的学生,也有几个好哥们在培训机构做 ...
- Unity20172.0 Android平台打包
Android SDK及Jdk百度网盘下载链接:https://pan.baidu.com/s/1dFbEmdz 密码:pt7b Unity20172.0 Android平台打包 简介说明: 第一步: ...
- 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容
本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...
- java.util.HashMap和java.util.HashTable (JDK1.8)
一.java.util.HashMap 1.1 java.util.HashMap 综述 java.util.HashMap继承结构如下图 HashMap是非线程安全的,key和value都支持nul ...
- 快速搭建一个本地的FTP服务器
快速搭建一个本地的FTP服务器 如果需要开发FTP文件上传下载功能,那么需要在本机上搭建一个本地FTP服务器,方便调试. 第一步:配置IIS Web服务器 1.1 控制面板中找到"程序& ...