准備工作
首先下載ArcGIS API for JavaScript4.x，這里下載的是4.19。
官方下載地址：https://developers.arcgis.com/downloads/
arcgis_js_v419_api：這個是ArcGIS的Api網站，部署后，我們可以引用這個網站里的JS，然后實現地圖的使用。
arcgis_js_v419_sdk：這個是ArcGIS的Api的SDK網站，里面詳細介紹各個JS類的使用方式的軟件開發幫助文檔（因為官網經常打不開，所以部署這個API的SDK網站很有用）
arcgis_js_v419_api解壓后如下圖。
開始安裝
在arcgis_js_api文件下找到Init.js和dojo.js兩個文件。
然后，替換Init.js和dojo.js里的[HOSTNAME_AND_PATH_TO_JSAPI]為localhost:419/arcgis_js_api/javascript/4.19/或192.168.1.100:419/arcgis_js_api/javascript/4.19/
PS1：局域網使用則替換為IP模式——192.168.1.100:419/arcgis_js_api/javascript/4.19/
PS2：這里的使用的端口號是419，因為我之后建網站也使用419端口。
PS3：如果搜索不到[HOSTNAME_AND_PATH_TO_JSAPI]，就搜索HOSTNAME_AND_PATH_TO_JSAPI，但替換時要記得把[]刪掉。
PS：注意，源文件中的是協議是HTTPS，這里我們改為http，不然的話，我們還得建一個帶證書的網站。
替換后地址如下：
baseUrl:"http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo"
然后IIS新建網站，網站名稱arcgis_js_api，物理路徑選擇arcgis_js_v419_api，端口419。
然后順序運行下面三個網址
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo/dojo.js
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css
如下圖，則網站啟動成功。
然后啟用網站的目錄瀏覽。
然后進行網站跨域配置，點擊HTTP響應頭。
配置頭名稱及值
- Access-Control-Allow-Origin 值:*
- Access-Control-Allow-Methods 值:GET, POST, PUT, DELETE, OPTIONS
- Access-Control-Allow-Headers 值:Content-Type
然后添加字體類型，因為本地API會下載一些字體文件。
點擊MIME類型。
添加如下類型：
.ttf application/octet-stream
.wasm application/wasm
.woff application/font-woff
.woff2 application/font-woff2
.wsv application/octet-stream
如下圖：
如果已經存在了MIME類型配置，則需要修改，如下圖.woff類型默認配置是font/x-woff，我們需要修改未application/font-woff 。
配置完成后，重啟IIS，重啟網站，清空瀏覽器緩存，然后我們的本地JS就可用了。
地圖使用
想使用ArcGIS API for JavaScript4.x，我們得現有一個地圖服務才行，我們可以安裝一個Arcgis Server。參考：https://www.cnblogs.com/kiba/p/15061456.html
Arcgis Server安裝完成后，會提供一個默認的Map服務地址http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer
然后，我們新建一個網站，然后新建一個網頁—MapLocal，然后編寫如下代碼：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebArcGis_JS4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css">
<script src="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js"></script>
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/Basemap",
"esri/layers/Layer"
], function (
esriConfig,
Map,
MapView,
MapImageLayer,
Basemap,
Layer) {
var baseUrl = "http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer";
esriConfig.apiKey = "YOUR_API_KEY";
let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
container: "map-container",
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不顯示Esri的logo
});
const view = new MapView({
map: map,
center: [125.04658531829789, 41.978062677899004],
zoom: 13, // Zoom level
container: "viewDiv" // Div的Id
});
//監聽單擊事件
view.on("click", function (event) {
console.log(event);
console.log("x:" + event.mapPoint.x);
console.log("y:" + event.mapPoint.y);
console.log("longitude:" + event.mapPoint.longitude);
console.log("latitude:" + event.mapPoint.latitude);
});
//監聽比例尺編號
var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});
//移除監聽
//handle.remove();
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
運行如下圖：
----------------------------------------------------------------------------------------------------
到此，ArcGis API JS 4.X本地化部署與地圖的基礎使用，就講完成。
----------------------------------------------------------------------------------------------------
注：此文章為原創，任何形式的轉載都請聯系作者獲得授權並注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/15064109.html
