ArcGIS API for Javascript 4.x離線部署
本篇以ArcGIS API for Javascript 4.12版本之IIS 部署作為測試用例,離線部署到本地的操作如下:
一、 部署方法
1、 在esri官網下載下傳api及sdk包,解壓拷貝到C:\inetpub\wwwroot目錄下。

2、分别修改C:\inetpub\wwwroot\arcgis_js_api\library\4.12\init.js檔案、C:\inetpub\wwwroot\arcgis_js_api\library\4.12\dojo\dojo.js檔案,查找[HOSTNAME_AND_PATH_TO_JSAPI]并替換成 api 在本機上的部署路徑,本例為:https://wl.arcgisonline.cn/arcgis_js_api/library/4.12/dojo (這裡我用的是計算機全域名也可以是localhost)
此時可以通路init.js 測試是否部署成功:
sdk幫助文檔隻需要拷貝到目錄下,通路index.html即可成功調用:
二、測試
編寫第一個one map頁面進行測試:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a 2D map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://WL.arcgisonline.cn/arcgis_js_api/library/4.12/esri/css/main.css" target="_blank" rel="external nofollow" >
<script src="https://WL.arcgisonline.cn/arcgis_js_api/library/4.12/init.js"></script>
<script>
require([//引入對應子產品
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"dojo/domReady!"//dom所有都加載完才執行function中代碼
], function(Map, MapView,MapImageLayer) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv", // map div id
map: map, // 綁定map對象
zoom: 4, // 初始化縮放級别
center: [15, 65] // 初始化中心點
});
// var layer=new MapImageLayer({
//url:"https://wl.arcgisonline.cn:6443/arcgis/rest/services/test/test1/MapServer"
//});
// map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
運作後第一張地圖被調用出來了,當然也可以使用自己釋出的地圖服務,但是此時會發現縮放按鈕不能正常顯示以及類似has been blocked by CORS policy:No ‘Access-Control-Allow-Origin’ header is present on the requested resource的錯誤,
具體解決辦法:
1、打開任務管理器 ,在IIS中MIME類型,檢視是否具備以下幾種類型,沒有則需要添加
2、在IIS中找到“HTTP響應标頭”,添加以下内容:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin,x-requested-with,content-type
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Origin:*
見下圖:
3、完成之後,清除浏覽器的緩存,重新整理再次通路即可成功!