基于ArcGIS JS API封装dojo微件(以工具条为例)

1.应用场景：

我们知道ArcGIS JS API自带了一些微件（或者说是控件），比如缩放按钮、定位按钮等等。但是有的时候这些微件的样式不太符合项目实际要求，或者是项目上想要把这些组合起来，这时候我们就需要自己封装一套微件了。下面用一个工具条微件作为例子，总结一下过程，效果图：

2.封装步骤：

一个微件可以用一个dojo模块表示，在dojo模块中定义一个类，使用时直接实例化类就可以了。最后有整段代码。

2.1 定义模块

通过define定义模块，基本格式：

define([依赖模块],function(){//回调函数return 0;  //下步会定义一个类，返回
});

封装微件一般会依赖这几个模块：

"dijit/_WidgetBase",//微件基类
"dijit/_TemplatedMixin",
"dijit/_OnDijitClickMixin",

2.2 定义类

通过declare定义类，基本格式：

declare("类名",[依赖的类],{//类的主体//定义基本属性，构造方法等
});

2.3 定义html模板

微件需要通过DOM节点进行展示，要先定义好基本模板,Toolbar.html

<ul class="toolbar"><li><img src="./Toolbar/assets/放大.png" title="放大" data-dojo-attach-event="ondijitclick:mapZoomIn"></li><li><img src="./Toolbar/assets/缩小.png" title="缩小" data-dojo-attach-event="ondijitclick:mapZoomOut"></li><li><img src="./Toolbar/assets/平移.png" title="平移" data-dojo-attach-event="ondijitclick:mapPan"></li><li class="no-border"><img src="./Toolbar/assets/全图.png" title="默认视图" data-dojo-attach-event="ondijitclick:mapZoomToFullExtent"></li>
</ul>

2.4 定义样式

为了让微件布局更好看，需要css样式,Toolbar.css

div,ul,li{padding: 0;margin: 0;list-style: none;
}.toolbar{position: absolute;top: 20px;right: 300px;height: 42px;width: 172px;overflow: hidden;background-color: #fff;border-radius: 8px;-moz-box-shadow: -6px 6px 5px #cccccc;-webkit-box-shadow:-6px 6px 5px #cccccc;box-shadow: -6px 6px 5px #cccccc;
}
.toolbar>li{float: left;position: relative;height: 26px;width: 41px;border-right: 2px solid #f5f5f5;margin: 8px 0 0 0;cursor: pointer;
}
.toolbar>li.no-border{border: 0;width: 40px;
}

2.5 添加属性、构造函数、基本方法

Toolbar.js

define(["dojo/_base/declare","esri/toolbars/navigation","dijit/_WidgetBase","dijit/_TemplatedMixin","dijit/_OnDijitClickMixin","dojo/text!./templates/Toolbar.html",
], function (declare,Navigation,_WidgetBase,_TemplatedMixin,_OnDijitClickMixin,template,
) {return declare([_WidgetBase,_TemplatedMixin,_OnDijitClickMixin], {_map: null,_naviBar: null,templateString:template,//html模板constructor: function (options) {var me = this;me._map = options.map;me._naviBar = new Navigation(me._map);},//平移mapPan: function() {this._naviBar.activate(Navigation.PAN);},//地图放大mapZoomIn: function() {this._naviBar.activate(Navigation.ZOOM_IN);},//地图缩小mapZoomOut: function() {this._naviBar.activate(Navigation.ZOOM_OUT);},//缩放至全图mapZoomToFullExtent: function() {this._naviBar.zoomToFullExtent();},});
});

2.6 测试

注意：要使用自己封装的本地模块，必须添加dojo配置，否则在加载模块时会找不到

index.html

<!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>My Dijit</title><link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"><link rel="stylesheet" href="Toolbar/style/Toolbar.css"><style>html, body, #map {height: 100%;margin: 0;padding: 0;}</style><script>var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));var dojoConfig = {// The locationPath logic below may look confusing but all its doing is// enabling us to load the api from a CDN and load local modules from the correct location.packages: [{name: "myDijit",location: package_path + '/Toolbar'}]};</script><script src="https://js.arcgis.com/3.27/"></script><script>var _map,_toolbar;require(["esri/map","myDijit/Toolbar","dojo/domReady!"], function(Map,Toolbar) {_map = new Map("map", {basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wdcenter: [-122.45, 37.75], // longitude, latitudezoom: 13});var mapDiv = document.getElementById("map");var mapToolDiv = document.createElement('div');mapToolDiv.id = 'mapToolbar_';var options = {map:_map,};_toolbar = new Toolbar(options);// new Toolbar(options,srcDomRef);_toolbar.placeAt(mapToolDiv);mapDiv.appendChild(mapToolDiv);});//https://developers.arcgis.com/javascript/3/jshelp/intro_custom_dijit.html//https://github.com/Esri/arcgis-dijit-home-button-js//https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html#//构造方法,var params={}//<!--注意html模板内的DOM节点属性应采用dojo可识别的，如单击监听事件data-dojo-attach-event="ondijitclick:，而不是(onclick)--></script>
</head><body>
<div id="map"></div>
</body>
</html>

3. 踩坑提醒：

3.1 dojoConfig要在引入init.js文件之前先加上，否则配置不会生效；

3.2 微件类的构造函数传参时不要直接把map对象传进去，要用对象包一层:

var toolbar = new Toolbar(_map);//有问题var options = {map:_map}
var toolbar = new Toolbar(options);//正常constructor: function(options){map = options.map;
}

3.3 注意html模板内的DOM节点属性应采用dojo可识别的，如单击监听事件data-dojo-attach-event="ondijitclick:，而不是onclick,直接用οnclick="fun1()"是没作用的。

<!--点击无反应-->
<img src="./Toolbar/assets/平移.png" title="平移" onclick="mapPan ()"><!--点击正常-->
<img src="./Toolbar/assets/平移.png" title="平移" data-dojo-attach-event="ondijitclick:mapPan">

源代码下载地址：https://download.csdn.net/download/wml00000/10972736

参考资料链接：

https://developers.arcgis.com/javascript/3/jshelp/intro_custom_dijit.html

https://github.com/Esri/arcgis-dijit-home-button-js

https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html#