arcgis api 4.x for js 離線部署

時間 2020-05-31

原文原文鏈接

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

本篇以 arcgis api 4.x for js 版本系列爲測試用例，其實 arcgis api 3.x for js 版本系列的離線配置方法也是相似的，以前寫過一篇，參照文章，這裏再也不一一敘述。html

arcgis api 下載途徑

esri官網下載，下載須要註冊 arcgis 用戶才行，版本本身選擇，官網下載最新版本api的地址：
官網下載頁面
git
共享已經下載好的 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):下載web

IIS部署配置方案

把下載的arcgis api 4.x 離線包解壓拷貝到 C:\inetpub\wwwroot 目錄下：
api
配置 init.js 文件，修改裏面的路徑，我本機的目錄以下：
C:\inetpub\wwwroot\arcgis_js_api\library\4.10\init.js ；
init.js 文件裏面，全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，而後替換成 api 在本地機器上的部署路徑，個人配置以下：http://localhost/arcgis_js_api/library/4.10/dojo
跨域
同理，配置 dojo.js 文件

全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ，而後替換成 api 在本地機器上的部署路徑，個人配置以下：http://localhost/arcgis_js_api/library/4.10/dojo
tomcat

測試離線部署api是否成功

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

<!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跨域問題，具體步驟以下：ui

打開IIS界面，點擊HTTP響應標頭
在右側能夠看到添加，而後添加以下標頭便可
Access-Control-Allow-Headers：Content-Type, api_key, Authorization
Access-Control-Allow-Origin：*
刷新網頁，控制檯沒報錯了，解決跨域問題