ArcGIS API for Javascript 离线部署及第一个应用

最新推荐文章于 2024-05-03 11:47:20 发布

mjy555

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/mjy555/article/details/123334850

版权

ArcGIS API for Javascript 专栏收录该内容

3 篇文章 10 订阅

订阅专栏

一、ArcGIS API for Javascript 的下载

我用的是Arcgis Api for JavaScript3.16版本的，大家可以再用以下的链接上下载：

链接：https://pan.baidu.com/s/1SKDQBDMrJxMuANTcH6XAaA
提取码：3t31

二、 ArcGIS API for Javascript 离线部署

初学者为了学习简单，可以引用在线的 Javascript。但是如果只能连接内网，而假如无法连接互联网或者网速较慢的情况下，使用本地部署的Javascript 是一个更佳的选择。

将下载解压的ArcGIS API for Javascript 离线包按照下面的步骤部署（以 jsapi 这个包为例）

用记事本打开 : API 解压目录arcgis_js_v316_api\arcgis_js_api\library\3.16\3.16\init.js 文件，将文本中“[HOSTNAME_AND_PATH_TO_JSAPI]”

用“ <myserver>/arcgis_js_v316_api/arcgis_js_api/library/3.16/3.16/” 替换，

其中myserver 可以是机器名、IP 等，在这里我用的是localhost，即将“[HOSTNAME_AND_PATH_TO_JSAPI]” 替换为”

localhost/arcgis_js_v316_api/arcgis_js_api/library/3.16/3.16

“用记事本打开 :API 解压目录

\arcgis_js_v316_api\arcgis_js_api\library\3.16\3.16\dojo\dojo.js 文件，

将“[HOSTNAME_AND_PATH_TO_JSAPI]”

替换为“localhost/arcgis_js_v316_api/arcgis_js_api/library/3.16/3.16/dojo/”

整个替换过程可以用记事本的查找替换功能，如下图：

1. 将修改后的文件连同解压目录内的所有文件拷贝到 Web 服务器根目录，以 IIS 为例，拷贝为
wwwroot 目录下的 arcgis_js_api,最终的目录结构如下图：

说明：如果要部署紧凑版本的 API 包，任然按照上面的步骤，只是在替换的时候将“[HOSTNAME_AND_PATH_TO_JSAPI]”,替换为"<myserver>/arcgis_js_v316_api/arcgis_js_api/library/3.16/3.16/"。

三、ArcGIS API for Javascript 帮助的离线部署

一个好的帮助就是一本可以让人获益匪浅的秘籍，Esri 提供的帮助不仅仅有API 的详细说明，还带了丰富的例子让我们学习，将 SDK 部署在本机是非常有用的，部署 SDK 很容易，只需要解压，然后放到服务器根目录下即可，部署后我本机 SDK 的结构如下：

四、第一个应用程序

一切就绪之后，我们要做的就是尝试，跟我们学习 C、C#语言一样，都会用“Hello Word！”作为我们的第一个程序，但是在这里，我们只需要简单的加载一幅自己的地图作为我们的开始。

1、代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WebGIS</title>
	
    <link  rel="stylesheet"  type="text/css" href="http://localhost:81/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost:81/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost:81/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:590px;
            
        }
    </style>
   <script type="text/Javascript"> 
   dojo.require("esri.map");
   dojo.addOnLoad(function (){
       var MyMap = new esri.Map("MyMapDiv");
	   var mapUrl ="http://192.168.0.11:50013/iserver/services/map-gzfcmap/arcgisrest/quanguo@SuperMapCloud/MapServer";
       var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer (mapUrl);
	   MyMap.addLayer(MyTiledMapServiceLayer)
   })
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
</body>
</html>

2、运行效果：

3、代码解释

（1）dojo.require("esri.map");

ArcGIS API for Javascript 是基于 dojo 的，dojo 有一个特点就是模块化，当然 ArcGIS API for Javascript 也不例外，因为所用的地图对象是在 esri.map 当中，所以需要通过 dojo.require("esri.map")引入，在后面章节中会看到很多类似的。其实 Dojo.require 就是加载了Javascript 文件，功能类似于 script 标签的作用，该函数完成后，就可以使用不属于 dojo.js 文件中的代码。

（2）dojo.addOnLoad

这段脚本是这个应用程序的核心，dojo.addOnLoad 是 dojo 的一个事件，它的作用有点类似window.onload 事件，只不过 window.onload 事件是直到页面中引用的所有的外部资源都加载后才触发，这意味着，我们必须等待所有的图片、对象、CSS 文件下载，如果页面包很多或外部资源很大或网络速度很慢，我们要等很长时间，而 dojo.addOnLoad 它在所有的模块都可用时才触发，无论你要使用什么包。在 dojo.addOnLoad 事件中，往往写的是一个初始化的代码，如同在 windows.onload 事件中一样，在

这里初始化了一个Map 和一个ArcGISTiledMapServiceLayer对象，并将 ArcGISTiledMapServiceLayer 对象添加到 Map 对象中，这样地图上就有了内容，正如我们看到的一样。