作为一名刚入门的小白，还没开始一个helloworld就在软件安装，环境部署时遇到了一大堆问题，简直太让人头秃了，脑壳疼。话不多说，这篇主要想分享一下自己部署ArcGIS API for js 4.15的过程。

  1. 网站链接：https://developers.arcgis.com/downloads/

  2. 有账号的直接登录，没有账号的需要注册一下,只能注册ArcGIS Online试用账号，Esri开发者账号中国区暂不支持注册。

  3. 登录进去以后点击Download APIs&SDKs

image-20200503102212640

  1. 找到ArcGIS API for javascript4.15，上面显示的就是最新的版本，点击API进行下载，其他的版本点击All versions就可以查看。

image-20200503102703487

  1. 将下载下来的压缩包进行解压，解压后的目录如下：

    image-20200503103655763

     

  2. 关于IIS服务器的安装部署很简单，直接百度就行，此处不再赘述。

  3. 将上面的第一个文件夹arcgis_js_api拷贝到IIS服务器的根目录下面。

    image-20200503104852040

  1. 下面我们要找到init.js，dojo.js两个文件修改baseUrl。

    (1)init.js:C:\inetpub\wwwroot\arcgis_js_api\library\4.15

    (2)dojo.js:C:\inetpub\wwwroot\arcgis_js_api\library\4.15\dojo

  1. 打开init.js（这里用的是notepad++打开的）, 查找HOSTNAME_AND_PATH_TO_JSAPI，将baseUrl的地址替换为：http://localhost/arcgis_js_api/library/4.15/dojo。

init1

init2

 

  1. dojo.js文件替换的内容与上面一样，至此，初步配置基本完成，然后记得重新启动一下服务器。

  1. 二话不说我们上代码，下面给出两个示例代码，一个是线上资源的调用，一个是本地部署资源的调用，已经实现线上ArcGIS API for js 4.15调用的小伙伴，可以跳过代码1，直接看代码2。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    6.     <title>create a 2D map</title>
    7. </head>
    8. <style>
    9.     html,body,#viewDiv{
    10.         padding: 0; margin: 0;
    11.         height: 100%; width: 100%;
    12.     }
    13. </style>
    14.  
    15. <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
    16. <script src="https://js.arcgis.com/4.15/"></script>
    17. <body>
    18. <div id="viewDiv"></div>
    19. </body>
    20. <script>
    21.  require([
    22.      "esri/Map",
    23.      "esri/views/MapView",
    24.      "dojo/domReady!"], function (Map,MapView) {
    25.      //视图分离
    26.     var map=new Map({
    27.         basemap: "streets"
    28.     });
    30.     var view=new MapView({
    31.         container: "viewDiv",
    32.         map: map,
    33.         zoom:4,//放大倍数
    34.         center:[15,65]
    35.     });
    38. });
    39. </script>
    40. </html>

    代码1–线上资源调用 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    6.     <title>create a 2D map</title>
    7. </head>
    8. <style>
    9.     html,body,#viewDiv{
    10.         padding: 0; margin: 0;
    11.         height: 100%; width: 100%;
    12.     }
    13. </style>
    14. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
    15. <script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>
    16. <body>
    17. <div id="viewDiv"></div>
    18. </body>
    19. <script>
    20.  require([
    21.      "esri/Map",
    22.      "esri/views/MapView",
    23.      "dojo/domReady!"], function (Map,MapView) {
    24.      //视图分离
    25.     var map=new Map({
    26.         basemap: "streets"
    27.     });
    29.     var view=new MapView({
    30.         container: "viewDiv",
    31.         map: map,
    32.         zoom:4,//放大倍数
    33.         center:[15,65]
    34.     });
    35. });
    36. </script>
    37. </html>

    代码2–调用本地部署资源

  1. 对比上面两个代码我们发现只是改动了link和script标签的引用，就是将引用位置改为自己本地部署的资源包的位置。

    1. <!--线上资源的调用-->
    2. <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
    3. <script src="https://js.arcgis.com/4.15/"></script>
    4.  
    5.  
    6. <!--更改为自己本地部署的资源包的位置-->
    7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
    8. <script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>

  1. 把需要的测试的html页面（代码2）复制到C:\inetpub\wwwroot目录下，打开IIS服务器，点击刷新，找到需要测试的页面，右击浏览，在Firefox或者chorme浏览器中打开（不要使用ie浏览器，因为新版本的很多方法ie不支持）。

    image-20200503143612208

  1. 显示如下结果，部署成功

    image-20200503144621572

    如果你一步就成功了，那么恭喜你，撒花花。如果你和我一样妥妥的遵循了小白定律（总是能够遇到别人遇不到的错误），头秃。深呼一口气，莫慌，下篇博文里面我会跟大家分享一下自己在部署过程中遇到的错误（小白的错误问题集锦，哈哈哈，专踩别人找不到的坑）

版权声明：本文为Ackn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Ackn/p/12822544.html