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

ArcGIS API for JavaScript本地部署

第一步:安裝IIS
在這裡插入圖片描述
第二步:下載ArcGIS API for JS
以3.19版本為例:下載下來的API一共兩個壓縮包,SDK中包含一些Demo,如下圖:
在這裡插入圖片描述
把兩個壓縮包分別解壓,解壓後如下圖:
在這裡插入圖片描述
第三步:修改相關配置
把arcgis_js_v319_api資料夾中的arcgis_js_api資料夾複製到"C:\inetpub\wwwroot"中:
(1)找到"C:\inetpub\wwwroot\arcgis_js_api\library\3.19\3.19\init.js",用記事本開啟,替換其中的[HOSTNAME_AND_PATH_TO_JSAPI]為localhost/arcgis_js_api/library/3.19/3.19/。
(2)找到"C:\inetpub\wwwroot\arcgis_js_api\library\3.19\3.19\dojo\dojo.js",用記事本開啟,替換其中的[HOSTNAME_AND_PATH_TO_JSAPI]為localhost/arcgis_js_api/library/3.19/3.19/。
第四步:釋出切片服務


開啟ArcMap,檔案—>共享為—>服務,打開發布服務的介面,如下圖:
在這裡插入圖片描述
將服務名稱設定為“測試”,根目錄下建立即可,如下圖:
在這裡插入圖片描述
介面左側選擇“快取”,選擇“使用快取中的切片”,這裡採用預設的5級切片,最後點選右上角的“釋出”即可,如下圖:
在這裡插入圖片描述
第五步:測試配置是否成功
開啟VS2013,新建一個空Web工程,加入一個HTML檔案,加入如下程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>ArcGIS API for JS部署</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.19/3.19/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.19/3.19/esri/css/esri.css" />
    <style>
        html, body, #mapDiv
        {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="http://localhost/arcgis_js_api/library/3.19/3.19/init.js"></script>
    <script>
        dojo.require("esri.map");
        function init()
        {
            var map = new esri.Map("mapDiv");
            var layer = new esri.layers.ArcGISTiledMapServiceLayer("https://localhost:6443/arcgis/rest/services/測試/MapServer");
            map.addLayer(layer);
        }
        dojo.addOnLoad(init)
    </script>
</head>
<body class="tundra">
    <div id="mapDiv"></div>
</body>
</html>

其中"https://localhost:6443/arcgis/rest/services/測試/MapServer"是之前釋出的服務REST URL,可以在ArcGIS Server中找到:
在這裡插入圖片描述
執行程式,執行結果如下圖:
在這裡插入圖片描述