第三篇 Arcgis api for js之dojo框架使用

最新推荐文章于 2024-05-04 09:36:56 发布

neil89

最新推荐文章于 2024-05-04 09:36:56 发布

阅读量1.9w

点赞数 2

本文链接：https://blog.csdn.net/neil89/article/details/48027463

版权

ArcGIS API 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

ArcGIS

13 篇文章 0 订阅

订阅专栏

框架

10 篇文章 0 订阅

订阅专栏

学习要点：

1、dojo框架；

2、dojo框架下类的定义与继承；

3、dojo资源：

http://dojotoolkit.org/api/

http://dojotoolkit.org/download/

http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

最近在研究arcgis js api，但好像不可避免要遇到dojo框架的学习与使用，因为arcgis js api就是基于dojo开发的。

思路：1、本地部署好arcgis js api（过程略）；2、dojo简单实例代码；3、dojo类的定义与继续；

一、官网实例

实例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>
</body>
</html>

这个实例中引用了dojo CDN官网api，试了下，并不好用，还是换成自己本地部署的api好使；

实例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
        });
    </script>
</body>
</html>

输出结果为：Hello Dojo!

实例3,类的定义与调用。定义一个js类，然后在html页面中调用

myModule.js

define([
    // The dojo/dom module is required by this module, so it goes
    // in this list of dependencies.
    'dojo/dom'
], function(dom){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the demo/myModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments.

    var oldText = {};

    // This returned object becomes the defined value of this module
    return {
        setText: function (id, text) {
            var node = dom.byId(id);
            oldText[id] = node.innerHTML;
            node.innerHTML = text;
        },

        restoreText: function (id) {
            var node = dom.byId(id);
            node.innerHTML = oldText[id];
            delete oldText[id];
        }
    };
});

hellodojo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- configure Dojo -->
    <script>
        // Instead of using data-dojo-config, we're creating a dojoConfig
        // object *before* we load dojo.js; they're functionally identical,
        // it's just easier to read this approach with a larger configuration.
        var dojoConfig = {
            async: true,
            // This code registers the correct location of the "demo"
            // package so we can load Dojo from the CDN whilst still
            // being able to load local modules
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

    <script>
        require([
            'demo/myModule'
        ], function (myModule) {
            myModule.setText('greeting', 'Hello Dojo!');

            setTimeout(function () {
                myModule.restoreText('greeting');
            }, 3000);
        });
    </script>
</body>
</html>

在上面这个实例中，实现了js类的定义与调用，但在html页面中有个段代码需要注意，没有这段代码无法实现调用

<script>
        // Instead of using data-dojo-config, we're creating a dojoConfig
        // object *before* we load dojo.js; they're functionally identical,
        // it's just easier to read this approach with a larger configuration.
        var dojoConfig = {
            async: true,
            // This code registers the correct location of the "demo"
            // package so we can load Dojo from the CDN whilst still
            // being able to load local modules
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>

二、类的定义与继承（http://dojotoolkit.org/reference-guide/1.10/dojo/_base/declare.html）实例请参见官网

cacheMap.js

/**
 * Created by neil on 2015/8/27.
 */
define(["dojo/_base/declare",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/SpatialReference",
    "esri/geometry/Extent",
    "esri/layers/TileInfo"], function (declare, ArcGISTiledMapServiceLayer, SpatialReference, Extent, TileInfo) {
    return declare(ArcGISTiledMapServiceLayer, {
        constructor: function (baseUrl) {
            this.baseUrl=baseUrl;
        }
    });
});

dojo5.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>这是测试瓦片地图的一个类</title>
    <script>
        var dojoConfig = {
            async: true,
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>
    <script src="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/init.js"></script>
    <script>
        require(["demo/cacheMap"], function (cacheMap) {
            var googleMapLayer = new cacheMap("baseUrl");
            greeting.innerHTML=googleMapLayer.baseUrl;
        });
    </script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>

未完

neil89

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
第三篇 Arcgis api for js之dojo框架使用

学习要点：1、dojo框架；2、dojo框架下类的定义与继承；3、dojo资源：http://dojotoolkit.org/api/http://dojotoolkit.org/download/最近在研究arcgis js api，但好像不可避免要遇到dojo框架的学习与使用，因为arcgis js api就是基于dojo开发的。思路：1、本地部署好ar
复制链接

扫一扫

专栏目录