logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 SecondChoice 2018-06-10

学习要点：

1、dojo框架；

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

3、dojo资源：

http:///api/

http:///download/

http:///documentation/tutorials/1.10/hello_dojo/


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

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



一、官网实例

实例1：

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Tutorial: Hello Dojo!</title>  
  6. </head>  
  7. <body>  
  8.     <h1 id="greeting">Hello</h1>  
  9.     <!-- load Dojo -->  
  10.     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"  
  11.             data-dojo-config="async: true"></script>  
  12. </body>  
  13. </html>  

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


实例2

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Tutorial: Hello Dojo!</title>  
  6. </head>  
  7. <body>  
  8.     <h1 id="greeting">Hello</h1>  
  9.     <!-- load Dojo -->  
  10.     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"  
  11.             data-dojo-config="async: true"></script>  
  12.   
  13.     <script>  
  14.         require([  
  15.             'dojo/dom',  
  16.             'dojo/dom-construct'  
  17.         ], function (dom, domConstruct) {  
  18.             var greetingNode = dom.byId('greeting');  
  19.             domConstruct.place('<em> Dojo!</em>', greetingNode);  
  20.         });  
  21.     </script>  
  22. </body>  
  23. </html>  

输出结果为：Hello Dojo!


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



myModule.js

  1. define([  
  2.     // The dojo/dom module is required by this module, so it goes  
  3.     // in this list of dependencies.  
  4.     'dojo/dom'  
  5. ], function(dom){  
  6.     // Once all modules in the dependency list have loaded, this  
  7.     // function is called to define the demo/myModule module.  
  8.     //  
  9.     // The dojo/dom module is passed as the first argument to this  
  10.     // function; additional modules in the dependency list would be  
  11.     // passed in as subsequent arguments.  
  12.   
  13.     var oldText = {};  
  14.   
  15.     // This returned object becomes the defined value of this module  
  16.     return {  
  17.         setText: function (id, text) {  
  18.             var node = dom.byId(id);  
  19.             oldText[id] = node.innerHTML;  
  20.             node.innerHTML = text;  
  21.         },  
  22.   
  23.         restoreText: function (id) {  
  24.             var node = dom.byId(id);  
  25.             node.innerHTML = oldText[id];  
  26.             delete oldText[id];  
  27.         }  
  28.     };  
  29. });  

hellodojo.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Tutorial: Hello Dojo!</title>  
  6. </head>  
  7. <body>  
  8.     <h1 id="greeting">Hello</h1>  
  9.     <!-- configure Dojo -->  
  10.     <script>  
  11.         // Instead of using data-dojo-config, we're creating a dojoConfig  
  12.         // object *before* we load dojo.js; they're functionally identical,  
  13.         // it's just easier to read this approach with a larger configuration.  
  14.         var dojoConfig = {  
  15.             async: true,  
  16.             // This code registers the correct location of the "demo"  
  17.             // package so we can load Dojo from the CDN whilst still  
  18.             // being able to load local modules  
  19.             packages: [{  
  20.                 name: "demo",  
  21.                 location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'  
  22.             }]  
  23.         };  
  24.     </script>  
  25.     <!-- load Dojo -->  
  26.     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>  
  27.   
  28.     <script>  
  29.         require([  
  30.             'demo/myModule'  
  31.         ], function (myModule) {  
  32.             myModule.setText('greeting', 'Hello Dojo!');  
  33.   
  34.             setTimeout(function () {  
  35.                 myModule.restoreText('greeting');  
  36.             }, 3000);  
  37.         });  
  38.     </script>  
  39. </body>  
  40. </html>  


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

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


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



cacheMap.js

  1. /**  
  2.  * Created by neil on 2015/8/27.  
  3.  */  
  4. define(["dojo/_base/declare",  
  5.     "esri/layers/ArcGISTiledMapServiceLayer",  
  6.     "esri/SpatialReference",  
  7.     "esri/geometry/Extent",  
  8.     "esri/layers/TileInfo"], function (declare, ArcGISTiledMapServiceLayer, SpatialReference, Extent, TileInfo) {  
  9.     return declare(ArcGISTiledMapServiceLayer, {  
  10.         constructor: function (baseUrl) {  
  11.             this.baseUrl=baseUrl;  
  12.         }  
  13.     });  
  14. });  

dojo5.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>这是测试瓦片地图的一个类</title>  
  6.     <script>  
  7.         var dojoConfig = {  
  8.             async: true,  
  9.             packages: [{  
  10.                 name: "demo",  
  11.                 location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'  
  12.             }]  
  13.         };  
  14.     </script>  
  15.     <script src="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/init.js"></script>  
  16.     <script>  
  17.         require(["demo/cacheMap"], function (cacheMap) {  
  18.             var googleMapLayer = new cacheMap("baseUrl");  
  19.             greeting.innerHTML=googleMapLayer.baseUrl;  
  20.         });  
  21.     </script>  
  22. </head>  
  23. <body>  
  24. <h1 id="greeting">Hello</h1>  
  25. </body>  
  26. </html>  

未完

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： SecondChoice > 《02-10-01ArcGIS API for JavaScript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多