ArcGIS API for JavaScript心得体验

2018年4月3日 1 条评论 685 次阅读 17 人点赞

学习和使用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套入相应的代码

001

但曾经这段代码让我抓狂过:

<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对象。

从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。 具体怎么创建一个模块呢,可以参考这两篇文章:

扩展模块。用面向对象的语言来说就是继承,我们可以继承某个已有的类,然后扩展其功能。最常见的就是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的目标吧。

肖大昕

这个人太懒什么东西都没留下

文章评论(1)

  • 阿里巴巴

    :smile: :smile:

    2018年4月3日