01-Version 4.6 of the ArcGIS API for JavaScript簡介
ArcGIS API for JavaScript 4.x系列是Esri推出的新一代JavaScript API,使用這套API,我們可以構建2D和3D為一體的Web GIS地圖應用。除了傳統的2D地圖功能,4.x系列在3D方面是重點,需要重點提醒的是:3D應用由Web三維場景實現,在Web三維場景中,可以疊加的圖層的型別包括:
1) ElevationLayer
2) FeatureLayer
3) ImageryLayer
4) IntegratedMeshLayer
5) MapImageLayer
6) MapNotesLayer
7) PointCloudLayer
8) SceneLayer
9) StreamLayer
10) TileLayer
11) VectorTileLayer
12) CSVLayer
13) GeoRSSLayer
14) GraphicsLayer
15) GroupLayer
16) KMLLayer
17) OpenStreetMapLayer
18) WebTileLayer
19) WMSLayer
20) WMTSLayer
從圖層的名稱上看,這套API幾乎包含了GIS開發所涉及到的資料型別:包括影像、向量、DEM、傾斜攝影、點雲、實時資料流、向量切片、開放的GeoRSS和KML、OGC的WMS和WMTS、客戶端要素圖層等等,所以在資料層面上,API能支援的範圍還是比較全面,當然還有部分的資料服務需要在後續的版本中補充進來,譬如WFS服務。但是作為開發來說,關心資料層面的問題現在已經可以放心使用了。說完資料,我們再看看功能方面。看功能從API的包名就可以窺見一斑:
esri:包含整個地圖應用的頂層類,包括:Map(二維和三維)、彈出框、Esri提供的線上基礎地圖、三維視角、顏色物件、要素、幾何。
esri/core
esri/core/accessorSupport
esri/core/workers
esri/geometry各種幾何物件圓、矩形、幾何服務引擎(本地和線上)、點、線、多邊形、空間參考。
esri/geometry/support幾何的輔助支援介面,包括jsonUtils 、 normalizeUtils和 webMercatorUtils
esri/identity主要提供用於身份管理的介面,譬如需要使用Portal或者Online上的資源時,需要身份認證,可以參考並使用這裡的介面。
esri/layers包含各種圖層,要查詢對應的圖層就查閱這個包裡的介面。
esri/layers/support
esri/portal對接Portal的功能項,可以查詢所在的群組、所擁有的資源項、以及登入使用者的許可權資訊。
esri/renderers包含各種幾何物件的渲染器,包括分級渲染、點雲分級渲染、唯一值渲染。其中關於點雲的渲染器就包括了5個,看得出來Esri的這個研發團隊在點雲這方面下了很大的功夫。
esri/renderers/smartMapping/creators
esri/renderers/smartMapping/statistics
esri/renderers/smartMapping/symbology上面的這三個包主要是智慧製圖對應的介面。
esri/renderers/support
esri/support
esri/symbols包括各種幾何的符號物件,二維、三維符號都有。
esri/symbols/callouts
esri/symbols/support
esri/tasks這個包非常重要,GIS的重要功能都在這裡。包括點選查詢、空間和屬性查詢、列印、最短路徑分析、服務區分析、地址定位、臨近設施分析、幾何分析以及可定製的GP分析。
esri/tasks/support
esri/tasks/workflow
esri/views二維地圖和三維地圖的容器
esri/views/2d/draw包含在二維地圖上的繪圖工具
esri/views/3d如果你想通過介面來訪問SceneView的WebGL上下文,那麼可以通過這個包裡的介面實現。
esri/views/layers包括各種圖層所對應的顯示容器。4.x版本針對每種型別的圖層都採用不同的顯示容器來視覺化圖層的資訊,猜測可能是出於優化視覺化效能的目的。
esri/views/ui
esri/webmap只包含WebMap物件的初始狀態資訊介面。後期可能會有所擴充套件。
esri/webscene和上一個包類似。
esri/widgets包含現成的元件,譬如圖層列表、底圖組、列印、圖例等。
esri/widgets/Print地圖列印模板的屬性設定,譬如:作者、版權、格式、寬度、標題等。
esri/widgets/Sketch
esri/widgets/support
可以看出上述包的命名相比3.x系列已經有了很大的變化,在物件模型的設計上更加細化,很多的介面需要到用的時候才能深入去理解,這裡我們只需要大體掌握常用的介面即可。
在大體上了解了API可以支援的空間資料型別以及可以提供的GSI功能之後,下面我們就開始第一個Hello Map程式。
第一步是下載API和SDK部署到本地,雖然我們也可以用線上CDN的API和SDK,但是在國內做GIS專案的更多是在政府部門和企業內部,所以本地化是一個無法迴避的問題。下載地址如下:
https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript
在下載之前需要註冊一個Esri賬號,如果沒有那麼就註冊一個(免費的)。在下載頁面我們選擇要下載的版本,把API和SDK都下載下來,如下圖所示:
API就是一個javascript庫,SDK就是開發幫助Documentation,目前最新的版本是4.6。下載完成之後,解壓並部署到Web伺服器上,譬如IIS或者Tomcat之類。這裡我把這兩個包解壓之後,放在IIS下,如下圖:
為了簡化訪問地址以及方便自己使用的習慣,API包我直接拷貝解壓目錄下的4.6目錄。開發幫助文件我也更改了目錄的名稱為4.6sdk,大家根據自己的習慣調整就可以,無非就是一堆靜態檔案。開發幫助文件部署之後就可以直接訪問,譬如我的地址是:http://localhost/4.6sdk/,如下圖所示:
至於API的部署,在解壓包裡就有說明,具體目錄在:%arcgis_js_v46_api% \arcgis_js_api\library\downloads\,如下圖所示:
包括Linux和Windows兩個版本。Esri預設的建議配置是Web伺服器採用HTTPS,這就需要證書,考慮到很多小夥伴一直都在用HTTP協議,所以配置的時候就採用非加密的HTTP。部署的配置需要修改兩個檔案,這裡以IIS為例:
1. 用文字編輯器開啟 C:\Inetpub\wwwroot\ 4.6\init.js 檔案,搜尋 https://[HOSTNAME_AND_PATH_TO_JSAPI],替換成http://192.168.1.144/4.6/
2. 用文字編輯器開啟 C:\Inetpub\wwwroot\4.6\dojo\dojo.js 檔案,搜尋 https://[HOSTNAME_AND_PATH_TO_JSAPI],替換成http://192.168.1.144/4.6/
注意其中的192.168.1.144是我本機的IP,你需要替換成你自己的IP地址或者域名。
要驗證是否API是否安裝成功,只需要把下面的程式碼片段拷貝到新建一個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>測試API安裝成功與否</title>
<link rel="stylesheet" href="http://192.168.1.144/4.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://192.168.1.144/4.6/dojo/dojo.js"></script>
<script>
var myMap, view;
require([
"esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function (Basemap, TileLayer, Map, MapView){
var layer = new TileLayer({
url: "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer"
});
var customBasemap = new Basemap({
baseLayers: [layer],
title: "Custom Basemap",
id: "myBasemap"
});
myMap = new Map({
basemap: customBasemap
});
view = new MapView({
center: [-111.87, 40.57], // long, lat
container: "viewDiv",
map: myMap,
zoom: 6
});
});
</script>
</head>
<body class="claro">
<div id="viewDiv"></div>
</body>
</html>
然後開啟瀏覽器訪問:
注意,這份地圖用的是Esri提供的線上地圖,如果你的網路環境無法訪問外網,那麼請將地圖服務地址修改成你內部的ArcGIS Server釋出的地圖服務。
至此,開發的環境我們已經部署完畢,後續我們將從最簡單的基礎地圖開始一步步深入地圖開發。
PS:之前用Word寫好,然後直接釋出到CSDN,釋出之後也沒太在意,昨天隨手點了最近寫的幾篇文章,發現結構那個亂啊,無法直視,所以想著找找看有沒有非常方便的寫博文的工具,昨天搞估了一個下午,發現過程太複雜,只是想寫個文章而已,需要的東西太複雜了,所以不想再折騰了,還是直接用CSDN的Markdown來寫。Btw,CSDN的編輯器這麼些年也沒有個進步,太難用了,如果能直接把Word的文件內容(包括圖片)直接一鍵複製上來就好了,或者上傳Word之後直接釋出博文。