關於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進行詢問。感謝你的觀看。