文章目录
1.引言(友情提示:新手勿看)
如果是新手,请看新手部署,如果你是在tomcat部署请查看:
(零)ArcGIS API For JavaScript3.17本地部署(Tomcat)
如果你是在IIS上部署请查看:
(零)ArcGIS API For JavaScript3.17本地部署(IIS)
在先前的博客当中我们已经说了,ArcGIS API在本地如何部署,但是在先前的本地部署过程中存在什么问题呢?现在我们来看一下先前的部署当中哪一些不合适的地方。
- 先前我们的js文件引入方式为:
<script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
这种引入的方式的缺点有:
1.直观来看,js的路径太长
2.js引入方式为绝对路径,我们希望是js引入的路径为相对路径,例如:
<script src="js/esriapi/init.js"></script>
3.我们更希望将我们的jsapi复制到我们的项目中来。
2.进一步理解ArcGIS API的配置
为了解决我们上述的问题,首先我们回顾一下我们最初配置的步骤:
- 修改了
init.js
文件 - 修改了
dojo.js
文件
修改这两个文件肯定是修改了ArcGIS API的配置,但是具体起到了什么作用呢?在dojo框架中提供给我们一个类(dojo/_base/config
)可以查看该框架的配置情况,接下来我们就用config查看一下,修改这两个文件到底修改了什么配置?
2.1代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dojo配置</title>
<link href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script>
require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"]
, function(registry, parser, JSON, config) {
parser.parse();
var dialog = registry.byId("dialog");
dialog.set("content", "<pre>" + JSON.stringify(config, null, "\t") + "```");
dialog.show();
});
</script>
</head>
<body class="claro">
<div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'dojoConfig / dojo/_base/config'"></div>
</body>
</html>
- 代码的意思是:用对话框显示dojo的配置信息。
2.2运行结果及分析
- 可以发现我们修改的两个js文件,其实就是在修改
baseUrl
的值 - 我们可以人为的修改baseUrl来达到我们想要的效果
3.配置ArcGIS API(实战篇)
首先我们项目的路径如下:
js/
esriapi/
dgrid
dgrid1
dijit
dojo
dojox
dstore
esri
moment
put-selector
xstyle
build-report.txt
builddate.txt
buildsources.txt
init.js
index.html
如图所示:
- 注意两点
dojo
文件夹(注意是dojo文件夹)相对于index.html
的相对路径为:js/esriapi/dojo
,- 修改的baseUrl的值要和相对路径一致
3.1方法一:修改init.js和dojo.js的baseUrl
- 修改init的baseUrl为上面相对路径:我们的为**
js/esriapi/dojo
**,找到HOSTNAME_AND_PATH_TO_JSAPI
那一行
将选中的部位替换为js/esriapi/dojo
- 修改dojo的baseUrl为上面相对路径:我们的为**
js/esriapi/dojo
**,找到HOSTNAME_AND_PATH_TO_JSAPI
那一行
将选中的部位替换为js/esriapi/dojo
- 配置成功,我们网页的代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dojo配置</title>
<link rel="stylesheet" type="text/css" href="js/esriapi/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="js/esriapi/esri/css/esri.css" />
<script type="text/javascript" src="js/esriapi/init.js"></script>
<script>
require(["esri/map","dojo/domReady!"],function(Map){
var myMap = new Map("mapDiv",{
basemap:"topo"
});
})
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
3.2方法二:通过dojoConfig修改baseUrl
有的同学认为第一种方法还是太麻烦了,修改两个文件呢,太繁琐了,如果觉得方法一比较麻烦,可以直接通过设置dojoConfig达到我们的效果。(不需要修改文件)
- 直接修改dojoConfig的baseUrl
dojoConfig={
baseUrl:"js/esriapi/dojo",
}
- 修改为代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dojo配置</title>
<link rel="stylesheet" type="text/css" href="js/esriapi/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="js/esriapi/esri/css/esri.css" />
<script>
dojoConfig={
baseUrl:"js/esriapi/dojo",
}
</script>
<script type="text/javascript" src="js/esriapi/init.js"></script>
<script>
require(["esri/map","dojo/domReady!"],function(Map){
var myMap = new Map("mapDiv",{
"basemap":"topo"
});
})
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
3.3 运行网页结果(注意)
- 注意这是通过web服务器访问的成功
- 通过本地文件访问:失败,但是这个错误可以忽略,因为在实际项目中,网页都是通过http请求数据。(即通过web服务器请求数据)
4.引入自定义的模块
假设我们的文件目录为:
js/
esriapi/
myjs/
mymoudle.js
- 通过
dojoConfig
的packages
属性配置自定义模块
var dojoConfig = {
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
- 如何利用
require
引入我们自己的木块
require([
'js/myjs/mymoudle'
], function (myModule) {
//此处写模块的具体使用
});
注意:
js是我们在dojoConfig中packages的其中的一个name属性
js/myjs/mymoudle:js,myjs代表文件夹;mymoudle代表mymoudle.js文件,myModule代表mymoudle.js的引用。