在我的GIS之家羣裏，經常遇到 webgis 開發新手們提問 arcgis api for js 如何本地離線部署，而不是直接調用在線的，因為在線模式依賴互聯網以及網速環境因素，受到的限制影響比較大。所以，本篇專門來講解 arcgis api for js 離線部署的詳細步驟配置以及測試是否部署成功，以 IIS 部署為例，tomcat 部署配置也是同個道理，差別不大。

本篇以 arcgis api 4.x for js 版本系列為測試用例，其實 arcgis api 3.x for js 版本系列的離線配置方法也是類似的，之前寫過一篇，參照文章，這裡不再一一敘述。arcgis api 下載途徑
  • esri官網下載，下載需要註冊 arcgis 用戶纔行，版本自己選擇，官網下載最新版本api的地址：官網下載頁面

  • 共享已經下載好的 arcgis 3.x 以及arcgis 4.x 系列api版本地址：arcgis api3.18 for js:下載arcgis api3.19 for js:下載arcgis api3.20 for js:下載arcgis api3.23 for js:下載arcgis api3.24 for js:下載arcgis api3.25 for js:下載arcgis api3.26 for js:下載arcgis api3.27 for js(密碼:qrwh):下載

    arcgis api4.1 for js:下載

    arcgis api4.2 for js:下載arcgis api4.6 for js:下載arcgis api4.7 for js:下載arcgis api4.8 for js:下載arcgis api4.9 for js:下載arcgis api4.10 for js(密碼:6agz):下載

IIS部署配置方案

  • 把下載的arcgis api 4.x 離線包解壓拷貝到 C:inetpubwwwroot 目錄下：
  • 配置 init.js 文件，修改裡面的路徑，我本機的目錄如下：C:inetpubwwwrootarcgis_js_apilibrary4.10init.js ；

    init.js 文件裡面，全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，然後替換成 api 在本地機器上的部署路徑，我的配置如下：localhost/arcgis_js_api

  • 同理，配置 dojo.js 文件

全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，然後替換成 api 在本地機器上的部署路徑，我的配置如下：localhost/arcgis_js_api

測試離線部署api是否成功

用html編寫一個簡單的載入在線地圖顯示例子，代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script>

<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {

var map = new Map({
basemap: "streets"
});

var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});

});
</script>
</head>

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

在有互聯網情況下，地圖能夠載入出來，說明離線部署成功

竊喜之餘，突然發現網頁f12模式下，控制檯出現跨域錯誤：

arcgis api 3.x 版本離線部署沒有出現這種問題，所以，還要解決IIS跨域問題，具體步驟如下：
  • 打開IIS界面，點擊HTTP響應標頭
  • 在右側可以看到添加，然後添加如下標頭即可Access-Control-Allow-Headers：Content-Type, api_key, AuthorizationAccess-Control-Allow-Origin：*

  • 刷新網頁，控制檯沒報錯了，解決跨域問題

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波GIS之家店鋪：GIS之家 GIS之家源碼諮詢：GIS之家webgis入門開發系列demo源代碼諮詢

推薦閱讀：

相關文章