arcgis for js 从入门到放弃二:dojo初识和arcgis的多种写法
2017-07-08 15:27
351 查看
关于arcgis api 和dojo的关系,只需知道该js api是构建于dojo上,从而充分利用dojo来屏蔽各浏览器差异。 讲真,我对dojo了解也不多,这个框架又大又冷门。不过所幸,玩arcgis对dojo不需要懂太多,很多东西用原生的js或jquery就可以实现。 首先解释一下上一章内的代码:
require(["esri/map", "dojo/domReady!"], function(Map) { var map = new Map("map", { center: [-118, 34.5], zoom: 8, basemap: "topo" }); });
简单来说,require相当于java里的import,后面的"esri/map"相当于包名。"dojo/domReady!"其中“!”表示插件,这个代码表示等文档准备完成后执行。 arcgis for js包有几十上百M,不可能一次性全部引入进来。require相当于动态创建script标签,引入相应的js文件。你可以在esri文件下找到map.js文件。js文件一旦引入就自动执行,而Map相当于创建一个叫Map的变量接收js文件返回的一个对象。 新手还有一个困惑就是init.js里面修改的路径的作用。我查了arcgis很多资料都没有讲到这个,但是dojo里面有个baseUrl的概念,个人认为这个路径就是dojo.baseUrl。这个url指向的是存放dojo.js文件夹的路径,用于dojo的模块管理,dojo在require的时候就会根据这个路径去找相应的模块。 关于dojo还需要稍微了解一下define和declare,简单理解一个定义模块,一个定义类。可以参考这篇文章: http://blog.csdn.net/eengel/article/details/13021687 对于新手们,可能还有这样一种困惑 dojo.require("esri.map"); var myMap; function init() { myMap = new esri.Map("map"); var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"); myMap.addLayer(myTiledMapServiceLayer); myMap.setZoom(4); } dojo.addOnLoad(init); 这种代码和之前的看起来有点不一样,其实这只是老版本的写法,dojo新版本推荐采用amd模式。arcgis两种模式都可以,官网推荐是使用amd模式,但是地图代码划分为多个js文件而又没有采用dojo的模块管理的话,其实老版本写法更简单一些。但是在使用legacy模式时一定要注意引入的模块不要写错了,比如
而且比较坑的是,api里面也有错的,总之如果报错了就去本地的文件里面检查一下这个类真实的包路径。 另外还要说明的是dojo不会重复引入同一个js文件,如果在加载某些模块的时候还引入了其他所需要的类,比如定义类的时候引入父类,那之后即使再次进行require,也不会再引入一次。上面esri.layers.ArcGISTiledMapServiceLayer并没有对应的require,其实这个对象在init.js加载的过程中就被引入了,甚至将dojo.require("esri.map")去掉也能正常跑起来。我在学习的过程中第一次遇到这种情况时也是一脸懵逼。 在学习的过程中还经常看到class="tundra"以及其他dojo提供的皮肤样式,这里面的css对地图没啥影响,就是改一些button啥的样式。dojo有自己的一套布局系统和css,但是实际开发中用得很少,而且这些样式我都试过,全都不好看,初学者请无视之。 总之dojo框架是面向对象的,新手首先要理解这一点,切换到面向对象的思维去玩arcgis。关于js的面向对象可以参阅《javascript 高级程序设计》第6章的内容。因此arcgis只要掌握几个常用的对象就能玩起来。在下面几章里如果遇到dojo相关的概念我会再补充。
相关文章推荐
- arcgis for js 从入门到放弃一:初识和配置详解
- arcgis api for js入门开发系列三地图工具栏
- arcgis api for js入门开发系列八聚合效果
- arcgis api for js入门开发系列四地图查询
- arcgis api for js入门开发系列七图层控制
- 第三篇 Arcgis api for js之dojo框架使用
- arcgis api for js入门开发系列八聚合效果
- arcgis api for js入门开发系列十六迁徙流动图
- web项目调用arcgis api for JS离线包报“https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo/...”错误解决方法
- arcgis api for js入门开发系列七图层控制
- arcgis api for js入门开发系列一arcgis api离线部署
- Arcgis Server for js 入门初级教程
- arcgis api for js入门开发系列十三地图最短路径分析
- arcgis api for flex 开发入门(一)环境搭建
- arcgis api for flex 开发入门(六)identify<转>
- arcgis api for flex 开发入门(二)map 的创建<转>
- arcgis api for flex 开发入门(七)Geometry service 的使用<转>
- arcgis api for flex 开发入门(五)查询
- arcgis api for flex 开发入门(六)identify
- ArcGIS API for Silverlight开发入门(3):Widgets<转>