基于ArcGIS JS API的在线专题地图实现
0 引言
专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图。专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定性专题地图和定量专题地图。定性专题地图用于表示种类或名称现象数据的空间分布和定位特征,定量专题地图则强调不同位置上空间地理目标的数量特征。
国内已有很多在线专题图制作平台,包括地图汇、 爱地图等,对其专题图类型进行分类整理,可得到以下分类:
| 类型 | 专题图 |
|---|---|
| 定量专题地图 | 范围值专题图(分层设色) |
| 等级符号专题图 | |
| 饼状专题图 | |
| 柱状专题图 | |
| 定性专题地图 | 分布专题图 |
| 热力专题图 | |
| 趋势专题图 |
1 初衷
HTML5的canvas提供基础的绘制功能,为在线专题图的实现提供了方法(地图汇就是基于canvas开发的相关功能),然而这种方式成本较高,需要自己实现地图渲染、比例尺缩放等一系列功能。
基于Arcgis API for Javascript二次开发也是一个很好的选择,ArcGIS API for Javascript是ESRI基于dojo,采用JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本,提供了web端地图相关基础功能,在制图方面, esri/renderers包含地图渲染方式相关的类,可用于范围值、唯一值、热力图等专题图的渲染,但仍存在以下问题:
- 对于柱状图、饼状图、等级符号等专题图,目前版本(4.0)并没有直接的开发接口。
- 图例组件显示内容不能很好的满足专题图要求
- 制作专题图涉及类库较多
鉴于此,基于ArcGIS JS API封装了这套专题图制图类库OTMaps(Online Themetic Maps),并开源出来供大家使用,同时希望使用者积极反馈或一起修改完善。
2 思路
实现思路如下图所示:

各个专题图类的方法相同,都包括draw、clear、setConfig,均继承自OTMap父类,而draw方法则各自实现,同时draw的实现并非是独立的,而有很多重叠的部分,比如柱状专题图可能会用到除了柱子的渲染外,还会用到独立值渲染或者范围值渲染,部分专题图都会用到图例,因为将核心渲染方法封装渲染类中,各个专题图的实现本质上是渲染类中各个组件的调用。
3 使用
项目地址:http://vicfeel.github.io/OTMaps/
效果截图:




博文作者:vicfeel
博文出处:http://www.cnblogs.com/vicfeel
本文版权归作者和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作!
如果阅读了本文章,觉得有帮助,您可以为我的博文点击“推荐一下”!
基于ArcGIS JS API的在线专题地图实现的更多相关文章
- ArcGIS JS API使用PrintTask打印地图问题解决汇总
环境:来源于工作过程,使用的API是 arcgis js 3.* 3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...
- 基于 ArcGIS Silverlight API开发的WebGIS应用程序的部署
部署流程概述 在微软的iis服务器上部署基于ArcGIS Silverlight API的应用程序,主要包括以下几个步骤: 1)(可选)部署GIS服务 如果需要将GIS服务也部署在Web服务器上,则 ...
- geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...
- 关于ueditor与arcgis js api同用会报错的问题
在ueditor与arcgis js api共用时,需要将ueditor\third-party\zeroclipboard\ZeroClipboard.js中的 if (typeof define ...
- 基于ArcGIS Flex API实现动态标绘(1.0)
标绘作为一种数据展示形式,在多个行业都有需求. 基于ArcGIS Flex API(3.6)实现标绘API,当前版本号1.0 alpha,支持经常使用几种标绘符号,包含: 圆弧.曲线.圆形.椭圆.弓形 ...
- 基于天天动听API开发在线音乐查询网站
预览图 源码下载 地址:https://github.com/bajdcc/dev/tree/master/ttpod 文件夹说明: App_Code,WCF服务 Script,离线下载的celery ...
- arcgis js api 本地化配置
配置arcgis library 根目录的init.js的 "baseUrl:",使其指向正确的地址
- Arcgis js API使用wmts方式加载GeoWebCache中的切片地图(转载)
使用GeoWebCache的主要目的是其独立安装版能够发布arcgis的切片.我们知道,使用openlayer是调用geoserver最方便的方法,那么在发布完arcgis的切片后,怎么用arcgis ...
- ArcGIS js api 手动构建FeatureLayer
坐标系 var spatialReference = new SpatialReference(4326);1要素坐标点 var pointArr = [ new Point(116.94431351 ...
随机推荐
- linux共享内存实验
顾名思义,消息队列就是一些消息的列表,用户可以在消息队列中添加消息和读取消息等.从这点上看,消息队列具有一定的FIFO特性,但是它可以实现消息的随机查询,比FIFO具有更大的优势.同时,这些消息又是存 ...
- Bootstrap_Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
- Jquery Ajax方法传值到action
假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...
- MongoDB用户权限基本操作
查看当前数据库的全部用户 > show users{ "_id" : ObjectId("4dedeeae26e7516d69948e33" ...
- 学习bootstrap心得
Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码 ...
- 1063. Set Similarity (25)
1063. Set Similarity (25) 时间限制 300 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given ...
- [CareerCup] 15.2 Renting Apartment II 租房之二
Write a SQL query to get a list of all buildings and the number of open requests (Requests in which ...
- B-树的插入、查找、删除
转自:http://blog.163.com/zhoumhan_0351/blog/static/39954227200910231032917/ 前面讨论的查找都是内查询算法,被查询的数据都在内存. ...
- @property语句
@property声明的形式是: @property ( attributes ) type name; type和name的含义一目了然,attributes描述了如何编写访问器. 一.assign ...
- Eclipse 官方简体中文语言包下载地址及安装方法
Eclipse 官方简体中文语言包下载地址及安装方法 打开Eclipse Babel Project 主页: http://www.eclipse.org/babel/downloads.php 根据 ...