本篇文章介绍如何将ArcGIS API for JavaScript 4.10下载并部署到IIS上
下载Arcgis API for JavaScript 4.10
首先打开网址:https://developers.arcgis.com/javascript/
将这两个文件都解压到桌面,至此下载工作就完成了
部署Arcgis API for JavaScript 4.10
第一步:开启IIS服务
控制面板---程序---启用或关闭Windows功能,然后按下图进行操作
过了几分钟后,会提示IIS服务已经启动,这时候C盘会出现一个名为inetpub的文件夹,这个文件夹很重要。
将解压好的arcgis_js_v410_sdk文件夹(在桌面)复制粘贴到inetpub文件夹下的wwwroot文件夹下,如下图:
接下来,桌面上应该还有一个arcgis_js_v410_api的文件夹,按下图操作,找到library文件夹
打开两个文件一个是init.js,另一个是dojo.js,两个文件的位置如下图所示。作者使用VS2017打开这两个文件
第一步:Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI],并替换为 localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10
第二步:将https:// 换成 http://
对上述两个文件执行相同的操作
第一次修改文件的时候,后面的dojo距离前面有空格,所以调试一直出错,大家注意一下。引号里面不应该出现空格。
原则上来说,如果没有操作失误,部署工作就也完成啦。接下来就要检验一下是否部署成功啦。
测试部署是否成功
在空白网址中输入:http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/init.js
如果能读取文件则成功,如下图
下面打开一个地图,使用部署在本机的文件,看看能否正确打开
上面红色框括起来的是新的引用,引用在本地(localhost)部署的文件。
下面红色框括起来的是旧的引用,引用在arcgis官网上部署的文件。
作者第一次操作的时候出现了一个问题:
对于原引用<script src="https://js.arcgis.com/4.10/"></script>,作者以为是一个空的文件夹因此转换成新的引用就变成了<script src="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/"></script>
少了后面的dojo/dojo.js。
实际上,在vs中,按住ctrl键再点击原引用,会出现如下图所示的界面,因此引用的是dojo/dojo.js这个文件。因此应该是<script src="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/dojo/dojo.js"></script>
最后,如果地图成功显示,则部署成功~
最后地图代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Intro to MapView - Create a 2D map - 4.10</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/esri/css/main.css"> <script src="http://localhost/arcgis_js_v410_sdk/arcgis_js_api/library/4.10/dojo/dojo.js"></script> <!--<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script src="https://js.arcgis.com/4.10/"></script>--> <script> require([ "esri/Map", "esri/views/MapView" ], function (Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 4, center: [15, 65] // longitude, latitude }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>