1 概述
ArcGIS Maps SDK for JavaScript（以前稱(chēng)為 ArcGIS API for JavaScript），是Esri（環(huán)球信息科技公司）開(kāi)發(fā)的一款開(kāi)發(fā)的一款基于JavaScript的webGIS開(kāi)發(fā)工具，用于構(gòu)建網(wǎng)絡(luò)制圖和空間分析應(yīng)用程序。SDK 包含 JavaScript API、API 參考、文檔、示例和其他資源，可幫助構(gòu)建網(wǎng)絡(luò)制圖應(yīng)用程序。截止到2020年6月，已經(jīng)來(lái)到了4.27版本。
官網(wǎng)鏈接：https://developers.arcgis.com/javascript/latest/
ArcGIS Maps SDK for JavaScript是一個(gè)強(qiáng)大的GIS工具，可以幫助開(kāi)發(fā)人員構(gòu)建出交互性的地圖應(yīng)用程序和各種GIS應(yīng)用程序，使其更具有可操作性和實(shí)用性。使用ArcGIS Maps SDK for JavaScript，開(kāi)發(fā)人員可以進(jìn)行以下操作：
-
地圖展示和交互： 可以使用該SDK構(gòu)建交互性的地圖應(yīng)用，包括縮放、漫游、分層、標(biāo)記和搜索等功能。
-
空間分析和數(shù)據(jù)可視化： 該SDK提供了廣泛的空間分析工具和數(shù)據(jù)可視化選項(xiàng)，可以幫助用戶(hù)更好地理解和處理各種地理數(shù)據(jù)。
-
位置感知和路由： 該SDK提供有關(guān)位置感知和路由的工具，可以幫助用戶(hù)在地圖上查找地址或路線，并快速找到最佳路徑。
-
常規(guī)GIS操作和應(yīng)用程序開(kāi)發(fā)： 該SDK可以幫助用戶(hù)構(gòu)建常規(guī)GIS應(yīng)用程序，如地圖編輯器和地圖查詢(xún)工具。開(kāi)發(fā)人員可以使用ArcGIS Maps SDK for JavaScript來(lái)開(kāi)發(fā)自己的GIS應(yīng)用程序，擴(kuò)展GIS功能并提高工作效率。
2 如何使用ArcGIS Maps SDK for JavaScript
將 ArcGIS Maps SDK for JavaScript 引入應(yīng)用程序有多種選擇。最常見(jiàn)的方法是通過(guò) ArcGIS CDN 獲取 AMD 模塊，也可以使用 ES 模塊進(jìn)行本地構(gòu)建。
ArcGIS Maps SDK for JavaScript 有 AMD 和 ES 兩種模塊。自 4.0 版起，API 以 AMD 的形式發(fā)布。ES 模塊從 4.18 版開(kāi)始提供。
AMD 模塊采用異步模塊定義格式，使用 require() 方法和第三方腳本加載器加載模塊及其依賴(lài)項(xiàng)。
ES 模塊（也稱(chēng)為 ECMAScript 模塊或簡(jiǎn)稱(chēng) ESM）是一種官方的標(biāo)準(zhǔn)化模塊系統(tǒng)，可通過(guò)import語(yǔ)句與所有現(xiàn)代瀏覽器配合使用。ES 模塊不需要單獨(dú)的腳本加載器。
2.1 AMD 模塊與 ES 模塊
如果您在使用 AMD CDN 時(shí)沒(méi)有 JavaScript 框架或本地構(gòu)建工具，則無(wú)需遷移。未來(lái)，AMD 模塊仍將可用。
如果您正在使用框架或構(gòu)建工具啟動(dòng)一個(gè)新項(xiàng)目，并且沒(méi)有使用 Dojo 1 或 RequireJS，那么您應(yīng)該使用 ES 模塊。
ES 模塊和 AMD 模塊實(shí)現(xiàn)了相同的 API 功能。例如，以下代碼片段提供了同等功能。
ES 模塊：
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map
});
AMD 模塊
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map
});
});
2.2 AMD 模塊和 ES 模塊比較
以下是一些使用 AMD 和 ES 模塊的常見(jiàn)原因。
| CDN (AMD) | CDN (ESM) | 本地構(gòu)建 ESM | 本地構(gòu)建 AMD | |
|---|---|---|---|---|
| 無(wú)需進(jìn)行安裝、配置或本地構(gòu)建 | √ | √ | ||
| 通過(guò) CDN 實(shí)現(xiàn)快速下載 | √ | |||
| 僅供測(cè)試 | √ | |||
| 可通過(guò) npm 輕松安裝 | √ | |||
| 與大多數(shù)現(xiàn)代框架和構(gòu)建工具無(wú)縫集成 | √ | |||
| 通過(guò)框架或構(gòu)建工具使用 4.17 或更早版本的應(yīng)用程序接口 | √ | |||
| 使用 Dojo 1 或 RequireJS | √ |
使用 AMD 的優(yōu)勢(shì)包括：
- 下載速度快，緩存高度優(yōu)化。
- 無(wú)需安裝或配置。
- API 自動(dòng)更新到最新版本。
ES 模塊 僅用于測(cè)試，并未針對(duì)模塊加載性能進(jìn)行優(yōu)化。要獲得 ES 模塊的最佳性能，請(qǐng)?jiān)诒镜貥?gòu)建它們。
3 幾種安裝方式
3.1 通過(guò) ArcGIS CDN 獲取 AMD 模塊
訪問(wèn) API 的最常用方法是使用托管版本。從我們的 CDN 引用 API 和 CSS，即可在您的應(yīng)用程序中開(kāi)始使用 API。
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>
3.2 通過(guò) NPM 運(yùn)行 ES 模塊
API 還可以通過(guò) JavaScript 包管理器 npm 以 ES 模塊的形式提供。您可以在本地安裝 API，以便與 React 和 Angular 等 JavaScript 框架以及 webpack 或 rollup.js 等模塊捆綁程序一起使用。
安裝
npm install @arcgis/core
導(dǎo)入
import Map from "@arcgis/core/Map.js";
3.3 通過(guò) CDN 獲取 ES 模塊
注意：這種方法目前只推薦用于開(kāi)發(fā)和原型設(shè)計(jì)。
<link rel="stylesheet" href="https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css">
<script type="module">
import Map from "https://js.arcgis.com/4.27/@arcgis/core/Map.js";
// Use the Map class
</script>
3.4 本地構(gòu)建 ES
ES 模塊是用于現(xiàn)代 JavaScript 的官方標(biāo)準(zhǔn)化模塊系統(tǒng)，已被所有主流瀏覽器采用。ArcGIS Maps SDK for JavaScript 的 ES 模塊可通過(guò) @arcgis/core 包從 npm 進(jìn)行本地安裝。
在本地構(gòu)建 ES 模塊的優(yōu)勢(shì)包括：
- 標(biāo)準(zhǔn)化模塊系統(tǒng)，與主流瀏覽器原生集成。
- 不需要單獨(dú)的輔助庫(kù)或模塊加載庫(kù)。
- 與大多數(shù)現(xiàn)代框架和構(gòu)建工具無(wú)縫集成。
- 在使用某些第三方庫(kù)時(shí)，不會(huì)出現(xiàn)多重定義問(wèn)題。
- 為 node.js 部署提供服務(wù)器端功能，例如 geometryEngine。
但是也有缺點(diǎn)：API 更新需要安裝新版本并重建應(yīng)用程序。
本地構(gòu)建 ES 官方教程：https://developers.arcgis.com/javascript/latest/es-modules/
3.5 本地構(gòu)建 AMD
使用 Dojo 1 和 RequireJS 進(jìn)行本地構(gòu)建，推薦使用ArcGIS Maps SDK for JavaScript 的 AMD 模塊。
- 可使用 arcgis-js-api 通過(guò) npm 在本地安裝這些模塊。
- 對(duì)于 4.17 及更早版本的 API，您可以使用 @arcgis/webpack-plugin 通過(guò) webpack 在本地構(gòu)建模塊。
- 可以使用 esri-loader 輔助庫(kù)從 CDN 遠(yuǎn)程加載模塊。
本地構(gòu)建 AMD 官網(wǎng)教程：https://developers.arcgis.com/javascript/latest/amd-build/
3 VSCode下載與安裝
建議使用VScode進(jìn)行ArcGIS Maps SDK for JavaScript代碼編寫(xiě)，下面提供下載地址和安裝步驟。
2.1 下載
官網(wǎng)下載地址：https://code.visualstudio.com/
- 有時(shí)會(huì)因?yàn)榫W(wǎng)絡(luò)原因無(wú)法下載，文末提供網(wǎng)盤(pán)鏈接。??
2.2 安裝
安裝過(guò)程比較簡(jiǎn)單。主要是修改一下安裝路徑。
選擇一個(gè)你喜歡的主題，下一步即可。
2.3 安裝漢化插件
點(diǎn)擊下圖紅框內(nèi)擴(kuò)展按鈕，或通過(guò)快捷鍵 Ctrl+Shift+X，打開(kāi)擴(kuò)展（插件）商店。
在搜索框中輸入 Chinese，安裝中文包，重啟VSCode即可漢化成功。
2.4 安裝Live Server插件
2.4.1 Live Server 簡(jiǎn)介
Live Server插件是一種服務(wù)器軟件，可以在本地機(jī)器上設(shè)置服務(wù)器，以便在開(kāi)發(fā)Web應(yīng)用程序時(shí)實(shí)時(shí)刷新瀏覽器。它提供了即時(shí)刷新功能，可以大大提高Web開(kāi)發(fā)的效率。
使用Live Server插件，可以監(jiān)聽(tīng)HTML、CSS、JavaScript等文件的更改，并自動(dòng)刷新瀏覽器，以便立即查看頁(yè)面更改的效果。它還提供了一些其他功能，例如支持HTTPS、打印訪問(wèn)日志等。
安裝完成后，在編輯器中右鍵，點(diǎn)擊Open with Live Server即可顯示網(wǎng)頁(yè)內(nèi)容
2.4.2 VS Code 設(shè)置 Live Server 默認(rèn)瀏覽器
打開(kāi) VS Code，點(diǎn)擊左下角齒輪，進(jìn)入設(shè)置頁(yè)面。
搜索框輸入 live serve ，找到Custom Browser，選擇想要的瀏覽器即可
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-701466.html
一般來(lái)說(shuō)，谷歌和火狐無(wú)法使用定位功能。若地圖中用到定位功能，建議使用微軟的Edge瀏覽器。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701466.html
到了這里，關(guān)于ArcGIS Maps SDK for JS（一）：概述與使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
