當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/21 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了基于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

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={}//</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#

總結

以上是生活随笔為你收集整理的基于ArcGIS JS API封装dojo微件(以工具条为例)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Javascript中的typeof()
下一篇：通过CSS修改checkbox样式(利用