關於Arcgis for JavaScript API 4.5本地配置與相關變化的探索
最近由於學習需求對於Arcgis JavaScript API需要一定的運用。翻看了一下官方網站的版本，已經更新到4.7版本。為了方便前端的開發，對4.5的版本進行了一番研究。
首先，我們要執行一個簡單的網頁地圖，必須獲得Arcgis JavaScript API，這裡分為兩個方面：
（1）直接從網站獲取API,這樣的方法較為方便快捷，而且出錯機率也小（相對於本地部署要手動配置），但是這種方法的弊端也很明顯：載入過於緩慢，如果網好一點還可以，網速要是有點差，載入時間就能讓人崩潰。（本人蔘加過一個比賽，其中的網頁前端呼叫的就是官方的API，導致載入緩慢，現場一度尷尬。。。。）對於這種方法，便於我們前期上手操作，但是到最後還是要歸結到本地部署。
（2）另一方面就是上面提到的本地部署，對於本地部署，我們首先獲取Arcgis JavaScript API的官方包，這個易於獲取，只需要登入到https://developers.arcgis.com/javascript/這個官方網址。根據裡面的相關引導就可以下載官方包。下載下來之後就是本地部署環節了。首先解壓出來之後的情況：
我們只需要其中arcgis_js_api這個資料夾。一路開啟之後會看見：
只取其中的4.5資料夾，將其單獨拿出來，之後就是對這個檔案的操作了。關於本地部署首先要有伺服器，此處以Tomcat作為示例進行介紹，這個是我的Tomcat伺服器路徑
接著開啟其中的webapps資料夾，新建一個JSAPI的目錄，並且將上文提到的4.5資料夾複製到其中，最終的結果如圖：
此時我們就已經完成了一半了。接下來對於4.5資料夾中檔案進行修改，修改的檔案：
①4.5/init.js ②4.5/dojo/dojo.js
此處本人使用Notepad++對這兩個檔案進行開啟：
此時發現這兩個檔案中都包含 紅框所示的一個地址，對於這兩個地址就是我們要修改的地方。根據我們JSAPI檔案放置的路徑將其改為（注意其中的Http與Https的區別！！！！！）：
這樣就完成了路徑的配置了，接下來進行程式碼測試。首先啟動伺服器，找到Tomcat中的啟動程式，進行啟動服務：
看見紅框中啟動資訊，說明JSAPI檔案進行被啟動。然後展示我的測試檔案程式碼（HTML）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>我的圖層</title>
<link rel="stylesheet" href="http://localhost:8080/JSAPI/4.5/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://localhost:8080/JSAPI/4.5/esri/css/main.css" />
<style>
html,
body,
#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: absolute;}
</style>
<script src="http://localhost:8080/JSAPI/4.5/dojo/dojo.js"></script>
<script>
var map,view;
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"dojo/domReady!"
], function(Map,MapView,Graphic,Point){
map = new Map({
basemap:"osm",
});
view=new MapView({
map:map,
container:"map",
zoom:15,
center:[121.1773281357, 31.8902227586],
sliderStyle: "small"
});
view.on("click",function(event){
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: new Point(event.mapPoint),
symbol: markerSymbol
});
view.graphics.add(pointGraphic);
});
});
</script>
</head>
<body class="claro">
<div id="map" ></div>
</body>
</html>
這樣就完成了，一個簡易的WEB GIS的頁面了。
如果你還遇到了其他問題可以加我qq1242229486進行詢問。感謝你的觀看。