第三篇 Arcgis api for js之dojo框架使用
学习要点：
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页面中调用
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>
未完