1. 程式人生 > >(零)ArcGIS API For JavaScript3.17本地部署(Tomcat)

(零)ArcGIS API For JavaScript3.17本地部署(Tomcat)

1.引言

作為一名GISer,多多少少總要了解一點開發,說到開發,不得不提到現在火熱的WebGIS,如果想要開發WebGIS,大都要學習ArcGIS API For JavaScript,在本篇文章中,主要介紹一下如果將ArcGIS API For JavaScript部署到本地的Tomcat中。

2.部署ArcGIS API For JavaScript(Tomcat)

部署本地環境在tomcat主要分為以下幾個步驟:
1. 下載ArcGIS API For JavaScript函式庫和Tomcat軟體
2. 安裝Tomcat
3. 修改相應的js檔案(2個檔案)
4. 將修改好的函式庫複製到指定位置
5. 測試ArcGIS API For JavaScript函式庫是否安裝成功。

2.1.下載ArcGIS API For JavaScript函式庫和Tomcat軟體

這裡我用到的tomcat版本為安裝版的7.0.70版本。
下載的函式庫和軟體如圖所示:
這裡寫圖片描述

2.2.安裝Tomcat

點選執行一直點選下一步即可,注意自己tomcat的安裝目錄:
這裡寫圖片描述
我安裝在C:\Program Files\Apache Software Foundation\Tomcat 7.0

2.3.修改2個js檔案

  • 任意地方解壓ArcGIS API For JavaScript3.17函式庫
  • 進入(arcgis_js_v317_api\arcgis_js_api\library\3.17),開啟install_win.html頁面,找到安裝教程,如圖所示:

這裡寫圖片描述
* 修改 檔案一(init.js)
位置:arcgis_js_v317_api\arcgis_js_api\library\3.17\3.17\init.js
[HOSTNAME_AND_PATH_TO_JSAPI]替換成localhost:8080/arcgis_js_api/library/3.17/3.17/
* 修改檔案二(dojo.js)
位置:arcgis_js_v317_api\arcgis_js_api\library\3.17\3.17\dojo\dojo.js


[HOSTNAME_AND_PATH_TO_JSAPI]替換成localhost:8080/arcgis_js_api/library/3.17/3.17/

2.4.將修改好的函式庫複製到指定位置

arcgis_js_api(注意:不是arcgis_js_v317_api資料夾)資料夾移動到tomcat安裝目錄的webapps目錄下,如圖所示:
將這個資料夾:

這裡寫圖片描述

移動到這裡:

這裡寫圖片描述

2.5.測試ArcGIS API For JavaScript函式庫是否安裝成功

  • 在桌面新建一個test.html
  • 將測試程式碼複製到test.html,如圖所示:

這裡寫圖片描述

測試程式碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      function init() {
        var myMap = new esri.Map("mapDiv");
        //note that if you do not have public Internet access then you will need to point this url to your own locally accessible cached service.
        var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
        myMap.addLayer(myTiledMapServiceLayer);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

當你可以在test頁面看到地圖時,說明你的ArcGIS API 本地部署已經成功了。

這裡寫圖片描述

注意:測試時需要聯網,因為我們測試採用的是線上的Web服務。