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/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 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,直接用onclick="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#