ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验
学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相对比较平滑,但也遇到不少坑坑洼洼,这些坑大部分是自己当时能力所限造成的,也有的是ArcGIS API本身存在的一些问题,本文主要谈谈我对ArcGIS API使用心得。
从API部署开始谈起
对于大部分ArcGIS API for JavaScript的初学者,部署ArcGIS API 肯定也花费了一番功夫(大神例外)。记得当时我部署ArcGIS API整整琢磨了两天,才让“hello world”跑起来。
第一个坑:替换路径要不要加端口
部署过ArcGIS API的朋友都知道,其中部署最关键的一步就是将[HOSTNAME_AND_PATH_TO_JSAPI]
替换为部署后API的HTTP路径。我记得当时我将init.js和dojo.js的[HOSTNAME_AND_PATH_TO_JSAPI]
替换为http://localhost:8080/arcgis_js_api/library/3.19/3.19/
这一步是没有问题的,然后通过script
标签引用:
<script src="http://公网ip/arcgis_js_api/library/3.19/3.19/init.js"></script>
大家或许已经发现了,我没有加端口,当时我是这么想的,因为我的tomcat映射了公网IP,而默认端口就是8080,所以理论上没加端口是可以的,而且当时我还在浏览器中确认了通过这个地址是可以访问init.js的。可是,通过不带端口的方式在html中引用却不起作用,这让我百思不得其解。这个问题让我纠结了很久。
第二个坑:替换路径要和引用一致
这个坑快要让我抓狂了,好不容易知道要加上端口后,但是地图始终不能出来,我一直想不明白问题出在哪里,当时还一直以为是自己下载的API文件有缺漏,重新下载了好几回,可依旧都是老样子。但我这种人就是喜欢死磕,有种不达目的决不罢休的蛮劲。第二天起床那会儿,想了下这个问题,突然想到js引用过来,里面的localhost路径会不会成了客户机的localhost了,而实际要指向的应该是服务器的地址,所以会报错。这下我感到顿时又有了希望,唰唰唰起床将init.js和dojo.js的localhost也改成了ip。果然,成功了。
总结
现在想想这两个坑主要还是自己当时的无知吧,其实部署ArcGIS API也很简单,只要将[HOSTNAME_AND_PATH_TO_JSAPI]
替换为部署后API的HTTP路径,而这个路径就是今后在script
引用ArcGIS API的url,不管有没有默认端口,替换时加了端口,引用时也就要用端口;如果是本地部署和本地使用ip可以是localhost,如果是在服务器上部署,其他机器上使用那就必须要用能够访问的ip或域名了。
ArcGIS API的require
ArcGIS API for JavaScript是建立在大名鼎鼎的dojo框架之上,所以也就继承了dojo的AMD规范。AMD规范即异步模块加载机制,这种规范让JS就像其它面向对象语言(比如Java)一样,通过模块去管理代码。dojo的模块有点像java的包,而我们所需要的类就是在不同的模块中。
当时我刚看视频加w3school学完了js基础,让我直接跳到JS模块化编程还是有点难以接受的,可是没有办法,不管是官网的demo还是网上的教程都是基于AMD规范的,作为初学者也就没什么选择了。
当时我给自己两个选择:
- 暂停ArcGIS API学习,深入学习JavaScript
- 不管AMD,先依葫芦画瓢
我选择了依葫芦画瓢,就像找规律一样
require([],function(){});
先去官网API中找到自己要的类,然后向require中填入即可。比如,我要创建一张地图,就先找MAP类,然后在官网中找到相应位置,向require套入相应的代码
但曾经这段代码让我抓狂过:
<script>var map;require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer"], function (ArcGISDynamicMapServiceLayer, Map) {map = new Map("mapDiv", {sliderOrientation : "horizontal"});var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity" : 0.5});map.addLayer(dynamicMapServiceLayer);});
</script>
看似没有什么问题,都是依葫芦画瓢,在require中加入了该加的,但是,地图没出来,后台报错。纠结这里挺久的,后来也是回过去看官网的demo,发现require的第一个参数的顺序要跟回调函数的参数顺序一致。最后解决了这个问题。
ArcGIS API中的模块
上面我们已经说到,ArcGIS API for JavaScript是建立在dojo之上,遵循AMD规范。所以在学习了ArcGIS API一段时间后,我们要有基本的模块编程思想了,不能像一开始那样只知道照着官网的demo去写。
AMD规范简单到只有一个API,即define函数:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中:
- module-name: 模块标识,可以省略。
- array-of-dependencies: 所依赖的模块,可以省略。
- module-factory-or-object: 模块的实现,或者一个JavaScript对象。
从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。
具体怎么创建一个模块呢,可以参考这两篇文章:
- 《官网文档-Write A Class》
- 《创建类(点击获得位置信息)—ArcGIS API for JavaScript》
扩展模块。用面向对象的语言来说就是继承,我们可以继承某个已有的类,然后扩展其功能。最常见的就是TiledMapServiceLayer
类了,我们经常扩展这个类来实现加载非ArcGIS Server发布的切片服务,比如加载天地图切片、谷歌地图切片等。
创建模块。我们可以将一些功能整理成模块,不断积累自己的模块不仅可以大大避免写重复代码,还能巩固和加深对ArcGIS API的学习。比如我们经常要给地图配置一个工具条,工具条实现了地图的基本功能(放大、缩小、平移、坐标拾取、测量等)我们可以将工具条整理成一个模块,这样下次使用时就不用再敲那么多代码了。
为什么不用百度(或高德)
很多人问过我为什么要学习ArcGIS API for JavaScript,同样的功能用百度地图API更容易实现。其实问这个问题的人一般不是GIS专业或者是刚开始接触地图开发。的确,百度地图是很强大,我们接触的应用大部分也是基于百度地图API(或高德),可是这些应用用地图的主要目的是展示某些位置信息而已,比如共享单车APP。
在共享单车APP中,地图的主要作用是展示单车和用户的位置,这些展示功能用百度或高德确实很方便。但是当我们要用地图去实现一些复杂功能时,用百度地图API就比较麻烦了,而ArcGIS API能更好的处理这些问题,因为它能和ArcGIS其它产品无缝的对接。比如我们要做一个城市的消防救援系统,最基本的网络分析,如果用百度API去实现这些功能估计够呛,而ArcGIS API却能快速的实现。
其实要想知道ArcGIS API比百度或高德等API的强大之处,打开你ArcGIS的工具箱你就懂了,虽然ArcGIS API还不能完全实现工具箱里的所有功能,但这一定是ArcGIS API的目标吧。
GIS技术交流:GISGO(http://www.gisgo.top)
ArcGIS API for JavaScript心得体验相关推荐
- 创建类(点击获得位置信息)—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...
- ArcGIS API for JavaScript之基础篇(二)
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
- ArcGIS API for JavaScript 3.23汉化(下)
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体 一.Default API configurations 默认API配置 三.Retrieve data from ...
- arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
- 基于ArcGIS API for JavaScript加载天地图
文章目录 前言 效果图 详细代码 总结 参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
- 基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六)
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
- 初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
- ArcGIS API for JavaScript Bookmarks(书签)
说明:本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ,书签的作用是,把地图放大到一个地方 添加书签,书签名称可以和地图名称一直,单击标签 地图会定 ...
最新文章
- myeclipse安装svn插件的多种方式
- python绘制灰度图片直方图-opencv+python 统计及绘制直方图
- 【C 语言】二级指针内存模型 ( 指针数组 | 二维数组 | 自定义二级指针 | 将 一、二 模型数据拷贝到 三 模型中 并 排序 )
- 初级数据分析师需要哪些必备技能?
- Linux中的cron计划任务配置详解
- 七0二所与江南计算机研究所,江南大学:一所被低估的“211”大学,2个A+学科,丝毫不输985...
- 一文理清RocketMQ顺序消费、重复消费、消息丢失问题
- 聊聊同步、异步、阻塞与非阻塞
- 黄章爆料魅族16s/16s Plus更多信息 无线充电已做到24W
- HTTP Header 详解【转】
- VMware虚拟机和Linux的安装及镜像下载
- MATLAB与STK互联18:卫星对象操作(9)—地面站可见性计算并获取数据2(补充上篇博文,有些问题需要澄清)
- 机器学习实验一: 简易knn模型
- 转载:开源license总结
- 幻影机器人庄园参观路线_上海幻影机器人庄园攻略,上海幻影机器人庄园门票/游玩攻略/地址/图片/门票价格【携程攻略】...
- springboot基于webrtc和janus的视频会议流程图
- LTE无线网络优化岗位及工作任务分析
- 流量之战:阿里150亿入股分众,到底为哪般?
- [域] 大量日志错误,事件ID:1058 事件ID:1030
- antd 表单 校验、取值、重置
热门文章
- 链接标签(HTML)
- three DragControls(拖拽整个模型)
- JavaScript:class类的实现方式及特点
- Java解决找不到主类或者无法加载主类
- this指针作为函数参数_C++以指针作为函数参数(学习笔记:第6章 10)
- 安卓gridview条目点击事件_敬业签的安卓手机版设置便签按正序排序教程
- 洛谷P3261 [JLOI2015]城池攻占(左偏树)
- WordPress纯PHP代码实现记录搜索引擎蜘蛛爬行记录
- 使用AWS DMS 升级Postgre 10到12
- MySQL查看SQL语句执行效率