创建类（点击获得位置信息）—ArcGIS API for JavaScript

不知道大家有没有这种体验，我们开始学web开发的时候，会把HTML、JavaScript、CSS代码都堆叠在一个HTML文件中，慢慢地，随着代码量的增多，不同的代码堆叠在一起显得很乱，我们开始把html、css、js独立到不同的文件中。随着JS代码的数量不断增长，JS文件的数量也一样，管理和引用js代码也变得复杂起来，而解决这种问题一个有效的方法就是采用“面向对象（OO）”模式。通过使用面向对象的风格，可以避免应用程序中代码混乱，并且可以增加代码的复用性，简化应用程序后期维护，可以使错误更快地修复，并在更短的时间内实现新功能。

ArcGIS API中的模块

Dojo Toolkit是一个开源的模块化JavaScript库（或更具体地说是JavaScript工具包），Dojo的代码被划分为逻辑单元称之为模块, 这有点类似于Java中的package，模块中可以包含类和简单方法。而ArcGIS API for JavaScript就是建立在Dojo的基础之上，然后增加了自己的模块。

我们平常使用ArcGIS API for JavaScript开发时，首先得require需要用到的类，比如我们要创建一副地图，首先得引用map类：

require(["esri/map"], function(Map) { /* code goes here */ });

如果你在本地部署了ArcGIS API就能看到在esri文件夹下有个map.js文件，我们需要的Map类也就是在这个模块中定义的。

我们可以打开map.js的源码，网上随便找个工具格式化下，折叠declaredClass: "esri.Map"之后的代码：

可以发现，Map对象的方法和属性都在其中定义。

自己写一个模块

1、使用define()来加载模块所需的依赖，具体用法可以参考文档。
declare用于创建一个可以实例化的类,所以必须引用

define(["dojo/_base/declare"],function(declare){});

2、用declare(className,superclass,props)建一个类

参数	类型	描述
className	String	构造函数的可选名称。它将被用作创建的构造函数的全局名称。
superclass	Function or Function[]	可以为空，函数或函数数组。这个参数指定一个继承表（最左边一个是最原始的父类）
props	Objectid	定义类属性和方法的对象。通过使其成为一个名为“constructor”的属性来定义一个构造函数。

下面这个示例定义一个Geocoder.js模块，通过创建一个类Geocoder，调用百度地址逆编码API，将Point转为地址信息。

define(["dojo/_base/declare","dojo/request/script","dojo/json","dojo/dom"],function(declare,script,JSON,dom){return declare(null, {ak: null,constructor: function(){this.ak="WtSZiDjE0KEgfSMsxGY7pxng";},getLocation: function(opt){var point=opt.point;var domID=opt.domId;var detailed=("detailed" in opt)?opt.detailed:false;              //默认为false，不显示详细地址信息var result={};script.get("http://api.map.baidu.com/geocoder/v2/?coordtype=wgs84ll&location="+opt.point.getLatitude()+","+opt.point.getLongitude()+"&output=json&pois=1&ak="+this.ak, {jsonp: "callback"}).then(function(data){result["description"]=data.result.sematic_description;result["address"]=data.result.formatted_address;console.log(result)if(detailed){dom.byId(opt.domId).innerHTML=result.address+","+result.description;}else{dom.byId(opt.domId).innerHTML=result.description;}})}})
})

constructor：构造函数，给ak属性赋值
getLocation：获取地址信息方法，其中opt参数为一个Objectid

opt={point:    //Point对象，逆编码的点domID:    //将地址信息插入的DOM的IDdetailed： //是否详细输出地址信息（true||false）
}

使用自己的模块

在ArcGIS API 文件目录（arcgis_js_api/library/3.20/3.20/）中新建一个文件夹为“gisxxcom”，再将自己写的模块Geocoder.js放入其中。

项目中使用自己的模块：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><title>Simple Map</title><link rel="stylesheet" href="http://115.28.149.107/arcgis_js_api/library/3.20/3.20/esri/css/esri.css"><style>html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ width: 75%; height: 100%; float: left; } #result{ width: 25%; height: 100%; float: left; }</style><script src="http://115.28.149.107/arcgis_js_api/library/3.20/3.20/init.js"></script></head><body><div id="map"></div><div id="result"><h4 id="description"></h4></div></body><script>require(["esri/map", "esri/geometry/Point", "gisxxcom/Geocoder", "dojo/domReady!"],function(Map, Point, Geocoder) {var map = new Map("map", {basemap: "osm",center: [116.026, 28.6826],zoom: "15"});var geocoder = new Geocoder();map.on("click",function(e) {console.log(e.mapPoint.getLongitude() + "," + e.mapPoint.getLatitude());geocoder.getLocation({point: e.mapPoint,domId: "description"});});});
</script>
</html>

效果预览：

GIS技术交流：GISGO（http://www.gisgo.top）
本文首发微信公众号：GISXXCOM

关注微信公众号GISXXCOM，GET更多技能