1. 程式人生 > >ArcGIS API for JavaScript部署到本地Tomcat

ArcGIS API for JavaScript部署到本地Tomcat

本文主要介紹如何將ArcGIS API for JavaScript部署到本地的Tomcat中。

安裝Tomcat軟體

甩個連結,官網:https://tomcat.apache.org/download-70.cgi
個人建議下載Tomcat 7,不建議下載最新版本。下載完成之後解壓到相應的盤就可以(記住路徑)。

下載ArcGIS API for JavaScript

甩個連結:https://developers.arcgis.com/javascript/latest/guide/get-api/index.html#download-api

或者:

https://download.csdn.net/download/shengshengshiwo/10291572

修改兩個JS檔案

  • 在**任意位置解壓**ArcGIS API for JavaScript 3.23檔案。
  • 進入arcgis_js_v323_api\arcgis_js_api\library\3.23,開啟install_api_windows.html頁面,找到安裝教程,如圖所示:

修改如圖指示檔案。

修改檔案一(init.js)

位置:arcgis_js_v323_api\arcgis_js_api\library\3.23\3.23

修改內容:將 [HOSTNAME_AND_PATH_TO_JSAPI] 替換成 localhost:8080/arcgis_js_api/library/3.23/3.23

修改檔案二(dojo.js)

位置:arcgis_js_v323_api\arcgis_js_api\library\3.23\3.23\dojo\dojo.js

修改內容:將 [HOSTNAME_AND_PATH_TO_JSAPI] 替換成 localhost:8080/arcgis_js_api/library/3.23/3.23

將修改好的檔案放入指定的位置

arcgis_js_api

資料夾移動到Tomcat安裝目錄的webapps目錄下,如圖所示:

注意:不是arcgis_js_v323_api整個資料夾。

測試ArcGIS API for JavaScript函式庫是否安裝成功。

開啟伺服器

找到Tomcat安裝目錄,我的是:C:\Program Files\Apache Software Foundation\apache-tomcat-7.0.85\bin 找到startup.bat 雙擊開啟。

切記,開啟後不要關閉此視窗。

在桌面上新建一個index.html檔案,輸入以下程式碼:

<!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>Simple Map</title>
    <link rel="stylesheet" href="https://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

發現網頁沒有東西有沒有??

我們再看一下安裝說明

https 修改為 http 就可以了。輸入以下程式碼:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

如果看到一張地圖時,說明安裝就成功了。