（十九）ArcGIS API For Javascript之项目真实部署

最新推荐文章于 2024-01-28 20:31:37 发布

GISer.Wang

最新推荐文章于 2024-01-28 20:31:37 发布

阅读量8.7k

点赞数 7

本文链接：https://blog.csdn.net/lovecarpenter/article/details/53713481

版权

ArcGIS API For JS基础学习专栏收录该内容

21 篇文章 65 订阅

订阅专栏

文章目录

1.引言(友情提示：新手勿看)
2.进一步理解ArcGIS API的配置
- 2.1代码实现
- 2.2运行结果及**分析**
3.配置ArcGIS API（实战篇）
4.引入自定义的模块

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的引用。

GISer.Wang

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
（十九）ArcGIS API For Javascript之项目真实部署

引言友情提示新手勿看进一步理解ArcGIS API的配置1代码实现2运行结果及分析配置ArcGIS API实战篇1方法一修改initjs和dojojs的baseUrl2方法二通过dojoConfig修改baseUrl3 运行网页结果注意的地方1.引言(友情提示：新手勿看) 在先前的博客当中我们已经说了，ArcGIS API在本地如何部署，但是在先前的本地部署过程中存在什么问题
复制链接

扫一扫