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

最新推荐文章于 2021-09-01 16:00:09 发布

wml00000

最新推荐文章于 2021-09-01 16:00:09 发布

阅读量1k

点赞数

分类专栏： ArcGIS 文章标签：自定义工具条微件 ArcGIS JS API dojo

本文链接：https://blog.csdn.net/wml00000/article/details/87893913

版权

ArcGIS 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

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,直接用ο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#