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

2019年5月23日 200次阅读 来源: 肖大昕

不知道大家有没有这种体验，我们开始学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对象的方法和属性都在其中定义。

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

自己写一个模块

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

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


});

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

参数类型描述
classNameString构造函数的可选名称。它将被用作创建的构造函数的全局名称。
superclassFunction or Function[]可以为空，函数或函数数组。这个参数指定一个继承表（最左边一个是最原始的父类）
propsObjectid定义类属性和方法的对象。通过使其成为一个名为“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的ID
    detailed： //是否详细输出地址信息（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>

效果预览：

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

本文首发微信公众号 ：GISXXCOM

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

    原文作者：肖大昕
    原文地址: https://www.jianshu.com/p/6d75031f86bf
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞