ArcGIS api for javascript 离线部署

一、说明：

1、本篇文章以及之后的相关的文章所使用的ArcGIS API for javascript 的版本是3.3。初学者为了学习简单，可以引用在线的 Javascript。但是如果只能连接内网，而假如无法连接互联网或者网速较慢的情况下，使用本地部署的 Javascript 是一个更佳的选择，我们在这里要部署到 iis上，电脑怎么安装IIS在这里不再赘述，不会安装的自己去问度娘。

2、部署步骤：

（1）、下载ArcGIS API for javascript引用文件

自己可以到官网下载，也可以在下面的百度网盘下载

链接：https://pan.baidu.com/s/1HK2VER8xXmGZGirCC6x25Q
提取码：jl76
（2）、部署到IIS

将下载的文件解压

用记事本打开 : 解压目录 \library\3.3\jsapi\init.js 文件，将文本中“[HOSTNAME_AND_PATH_TO_JSAPI]”，用“<myserver>/arcgis_js_api/library/3.3/jsapi/”替换，其中myserver 可以是机器名、IP 等，在这里我用的是 localhost，即将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为”localhost/arcgis_js_api/library/3.3/jsapi/ “
用记事本打开 :解压目录 \library\3.3\jsapi\ js\dojo\dojo\dojo.js 文件，将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为“localhost/arcgis_js_api/library/3.3/jsapi/”。
整个替换过程可以用记事本的查找替换功能，如下图：

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

说明：wwwroot 即为Web 服务器根目录，位于c盘中，我的wwwroot目录位于c盘中文件夹下

直接把解压目录中arcgis_js_api直接拷贝到wwwroot文件夹中即可

（4）、iis文档结构

（4）、示例

打开vs2012 新建项目 c# asp.net空web应用程序，并且添加HTML页面first.html

first.html页面代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>第一个地图应用</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" />
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>
  <style type="text/css"> 
         .MapClass 
         {  width:900px; 
              height:600px; 
              border:1px solid #000; 
         } 
     </style> 
    <script type="text/Javascript">
        dojo.require("esri.map");
        dojo.addOnLoad(function () {
            var MyMap = new esri.Map("MyMapDiv");
            var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
            ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
            MyMap.addLayer(MyTiledMapServiceLayer)
        }
        )
    </script> 

</head> 
      <body class="tundra"> 
              <div id="MyMapDiv"  class="MapClass"></div>  
     
      </body> 

</html>

运行 visual studio效果如下：

（5）、代码解释

<script type="text/Javascript"> 
dojo.require("esri.map"); 
dojo.addOnLoad(function () 
{ 
var MyMap = new esri.Map("MyMapDiv"); 
var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer 
("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
 MyMap.addLayer(MyTiledMapServiceLayer) } ) 

</script>

（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 对象中，这样地图上就有了内容，正如我们看到的一样。

posted @ 2019-01-22 11:06 学习靠自己阅读(3256) 评论(0) 编辑收藏举报

刷新页面返回顶部

学习靠自己

ArcGIS api for javascript 离线部署

公告