1. 程式人生 > >ArcGIS API For JavaScript4.7本地部署(在專案中使用Eclispe/Myeclipse+Tomcat, 用相對路徑部署API)

ArcGIS API For JavaScript4.7本地部署(在專案中使用Eclispe/Myeclipse+Tomcat, 用相對路徑部署API)

部署本地環境在tomcat主要分為以下幾個步驟: 
1. 下載ArcGIS For JavaScript  API、Tomcat軟體 和Eclispe/Myeclipse+Tomcat軟體(開發工具建議使用Eclipse,因為免費,不用破解,而且新版Eclispe功能已經很強大了,沒有不要先給自己找麻煩)

2. 安裝上面下載的軟體。ArcGIS API For JavaScript 庫和Tomcat 直接解壓就行,Eclispe/Myeclipse軟體安裝請問百度,這種問題百度上已經多如牛毛了,這裡不做贅述。(還有怎麼在Eclispe/Myeclipse裡新建web專案以及Tomcat怎麼在Eclispe/Myeclipse裡面使用,這裡也就不多嘴了,請見諒

解壓ArcGIS For JavaScript  API 庫檔案


解壓後的目錄如下:


解壓Tomcat


3、 將解壓後的API庫複製到指定位置 。

       arcgis_js_v47_api \ arcgis_js_api \ library \ 4.7 路徑下下的所有檔案拷貝到eclispe或者myeclispe的專案裡面的arcgis_js資料夾裡面(在webapp或者WebRoot下新建的arcgis_js資料夾)。

如圖資料夾下的所有檔案全部拷貝到eclispe或者myeclispe的專案裡面:


如圖位置:


3. 修改相應的js檔案(2個檔案)

修改init.js


修改dojo.js(同上)


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

測試程式碼如下:

<!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="/arcgis_js/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="/arcgis_js/esri/css/main.css" />
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="/arcgis_js/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){
        myMap = new Map({
          //basemap: "streets"
          basemap: "satellite"
        });
        view = new MapView({
          center: [111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 5
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="viewDiv"></div>
  </body>

</html>

效果如下: