WebGIS：Tomcat 离线部署 ArcGIS API for JavaScript（v4.9）

Posted on Edited on In

下载 API 和 SDK 文件

下载地址：https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

  • 注：需要登录。

选择自己需要的版本下载对应的 API 和 SDK 包。这里以 4.9 版本为例。

部署

Tomcat 下解压

Tomcat 服务器 webapps 文件夹下建立一个你的项目文件夹用来放置 api 和 sdk 。

例如我新建一个 api49 文件夹：D:\apache-tomcat-7.0.52\webapps\api49

将下载的 api 和 sdk 解压到这个目录下（目录结构如下图）：

修改文件

注：Tomcat 默认端口为：localhost:8080

  1. 找到 D:\apache-tomcat-7.0.52\webapps\api49\arcgis_js_api\library\4.9\init.js 文件，将 [HOSTNAME_AND_PATH_TO_JSAPI] 修改为 /localhost:8080/api49/arcgis_js_api/library/4.9/ 。注意把原来的 https 改为 http 。

即 init.js 里面变为：baseUrl:"http://localhost:8080/api49/arcgis_js_api/library/4.9/dojo"

  1. 找到 D:\apache-tomcat-7.0.52\webapps\api49\arcgis_js_api\library\4.9\dojo\dojo.js 文件，将 [HOSTNAME_AND_PATH_TO_JSAPI] 修改为 /localhost:8080/api49/arcgis_js_api/library/4.9/ 。注意把原来的 https 改为 http 。

即 dojo.js 里面变为：baseUrl:"http://localhost:8080/api49/arcgis_js_api/library/4.9/dojo"

测试部署

在 api49 目录下新建一个 test.html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="http://localhost:8080/api49/arcgis_js_api/library/4.9/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://localhost:8080/api49/arcgis_js_api/library/4.9/esri/css/main.css" />
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://localhost:8080/api49/arcgis_js_api/library/4.9/dojo/dojo.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public Internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        //
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer
        // --------------------------------------------------------------------
        var layer = new TileLayer({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        });
        var customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: customBasemap
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="viewDiv"></div>
  </body>
</html>

启动 Tomcat 服务器，浏览器访问：http://localhost:8080/api49/test.html

若显示下图，则说明部署成功！