ArcGIS JS API 4.20 4.14 3.16离线部署（基于Nginx）

野性酷女 2022-09-12 13:46 28阅读 0赞

## ArcGIS JS API 4.20 4.14 3.16离线部署（基于Nginx） ##

#### 1.到官网下载制定版本 ####

地址：https://developers.arcgis.com/downloads\#javascript

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 2.修改文件init.js和dojo.js 配置 ####

*  “\[HOSTNAME\_AND\_PATH\_TO\_JSAPI\]”替换为我们JS API的本地服务器路径  
    注意：4.20 没有dojo.js  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 1]

#### 3.修改nginx 代理 ####

location /epf-arcgis/{
    	 client_max_body_size 100m;
    	 alias   D:/Arcgis/arcgisAPI/;
    	 index  index.html index.htm;
    	 try_files $uri $uri/ /index.html;
    }

#### 4.新建init.html文件修改配置 ####

*  注意： require(\[“esri/Map”, “esri/views/MapView”\], 不能加"/"不然不能出来  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 2]

源代码：

<!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</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="http://localhost:8080/epf-arcgis/4.20/esri/themes/light/main.css" />
        <script src="http://localhost:8080/epf-arcgis/4.20/init.js"></script>
        <script>
          require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
            var map = new Map({
              basemap: "streets"
            });
            var view = new MapView({
              container: "viewDiv", // Reference to the scene div created in step 5
              map: map, // Reference to the map object created before the scene
              zoom: 4, // Sets zoom level based on level of detail (LOD)
              center: [15, 65] // Sets center point of view using longitude,latitude
            });
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>

#### 5.检查验证 ####

*  地址：http://localhost:8080/epf-arcgis/4.20/init.html

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 3]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/fa179a58780c42a88b2c329622ed3510.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/7d6fd3596d3041f09cc671c0c1a62a45.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/e40db08d70da4357b430939f681ff981.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWF0ZWEy_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/0810af92028640c7b78f7beb86bcb974.png