ArcGIS Maps SDK for JavaScript簡介

ArcGIS Maps SDK for JavaScript 是由 Esri 公司開發(fā)的一款用于構(gòu)建交互式地圖應(yīng)用程序的 JavaScript 庫。它提供了豐富的地圖顯示、分析和可視化功能，適用于各種場景。
目前，ArcGIS Maps SDK for JavaScript 提供兩個主要版本：3.x 和 4.x。

1. ArcGIS Maps SDK for JavaScript 3.x 版本：
   • 3.x 版本是 ArcGIS Maps SDK for JavaScript 的舊版本，一些老的項目中仍在廣泛使用。
   • 它是基于 Dojo 框架構(gòu)建的，提供了強大的二維地圖顯示功能，支持多種地圖服務(wù)、圖層、渲染器、符號等。
   • 提供了豐富的地圖分析工具和可視化組件，包括緩沖區(qū)分析、路徑分析、空間查詢、熱力圖等。
   • 3.x 版本已經(jīng)逐漸被4.x版本取代，官網(wǎng)也逐漸停止了對3.x的維護。
   • 在模塊化開發(fā)的今天，3.x已經(jīng)不能適應(yīng)現(xiàn)在的開發(fā)模式，如果沒有老的項目進行維護，我們也不需要去使用3.x了，因此，我們這里重點介紹4.x版本
2. ArcGIS Maps SDK for JavaScript 4.x 版本：
   • 4.x 版本是 ArcGIS Maps SDK for JavaScript 的最新版本，也是未來的主要發(fā)展方向。
   • 4.x 版本重新設(shè)計了架構(gòu)，使用現(xiàn)代的 Web 技術(shù)，如 ES6、TypeScript，并采用了模塊化的開發(fā)方式。
   • 它提供了更加靈活和高性能的地圖顯示功能，支持 2D 和 3D 地圖。

ArcGIS Maps SDK for JavaScript 4.x 的主要特點和功能

1. 地圖展示功能：

   • 支持加載各種底圖，并具有對地圖縮放、平移和旋轉(zhuǎn)的交互操作。
   • 提供豐富的圖層類型，包括矢量圖層、柵格圖層、動態(tài)圖層等。
   • 支持地圖符號化、標注和注記。

2. 地理空間分析功能：

   • 提供強大的地理處理和分析功能，如緩沖區(qū)分析、空間查詢、路徑分析等。
   • 支持地理要素的可視化和渲染，如熱力圖、聚類等。

3. 三維地圖功能：

   • 提供創(chuàng)建和展示三維地圖的能力，支持傾斜、旋轉(zhuǎn)和縮放三維場景。
   • 支持在三維場景中添加三維模型、地下管網(wǎng)、點云等。

4. 用戶交互和導航功能：

   • 提供默認的地圖導航控制器，包括縮放控制、導航按鈕和比例尺等。
   • 支持自定義用戶交互功能，如地圖點擊事件、拖放等。

5. 地圖樣式與配置：

   • 支持自定義地圖樣式、符號庫和顏色主題。
   • 可以通過配置文件設(shè)置地圖的默認視圖、初始范圍和坐標系等。

6. 地圖數(shù)據(jù)和服務(wù)集成：

   • 支持加載各種數(shù)據(jù)源，包括地理數(shù)據(jù)格式（如 GeoJSON、KML、Shapefile 等）和服務(wù)（如 ArcGIS Server 服務(wù)、WMS 服務(wù)等）。
   • 支持與 ArcGIS Online 和 ArcGIS Enterprise 進行集成，訪問其豐富的地圖和數(shù)據(jù)資源。

AMD modules 和 ES modules兩種方式比較

ArcGIS Maps SDK for JavaScript 4.x 提供了兩種方式來加載模塊：AMD modules 和 ES modules（4.17以后的版本支持），兩種加載方式的優(yōu)缺點如下：

1. AMD modules（異步模塊定義）：

   • 優(yōu)點：AMD 是一種用于加載 JavaScript 模塊的異步模塊加載機制。它非常適合于在舊版瀏覽器和遺留系統(tǒng)中使用，可以兼容各種瀏覽器，并具有強大的跨平臺兼容性。
   • 缺點：AMD 的語法相對較復雜，使用起來可能更加繁瑣，還需要額外的 AMD 加載器庫來加載模塊。

2. ES modules（ECMAScript 模塊）：

   • 優(yōu)點：ES 模塊是 JavaScript 的官方模塊化系統(tǒng)，以簡潔、易于使用和靜態(tài)分析等特點而聞名。它使用標準的 import 和 export 語法，使代碼更清晰、可維護性更高，同時支持 async/await 等現(xiàn)代 JavaScript 功能。
   • 缺點：ES 模塊在舊版瀏覽器中可能不被全面支持，需要進行適當?shù)霓D(zhuǎn)換來提供兼容性。

在Vue3中，由于 Vue 3 使用的是現(xiàn)代瀏覽器和 ES6+ 特性，因此，我們推薦使用 ES modules。ES modules 具有更簡潔、易讀的語法，并且與 Vue 3 中的 Composition API 更加相容。

Vue3中使用ArcGIS Maps SDK for JavaScript的步驟

創(chuàng)建 Vue 3 項目

1、新建ArcGISAPIProject文件夾，并用vscode打開

2、打開終端，在終端中輸入npm create vite@latest創(chuàng)建vite項目，輸入項目名稱vite-vue3-arcgis,選擇vue框架，并選中JavaScript語音創(chuàng)建項目

3、創(chuàng)建成功后，進入vite-vue3-arcgis文件夾，并使用npm i 安裝依賴

4、安裝成功后，輸入npm run dev，運行項目查看基礎(chǔ)框架是否正常

安裝 ArcGIS Maps SDK for JavaScript

在終端中輸入npm install @arcgis/core 安裝ArcGIS Maps SDK for JavaScript

創(chuàng)建地圖組件

在創(chuàng)建地圖組件之前，我們先將框架默認提供的App.vue中的內(nèi)容刪除，并刪除components文件夾中的HelloWorld.vue組件
1、在src文件夾下的components文件夾中新建ArcGisMap.vue組件，

2、在ArcGisMap.vue組件中的template中新建一個div，設(shè)置id屬性為viewDiv，作為地圖的容器，

3、導入需要的地圖模塊；要想在容器中展示地圖，需要導入ArcGis為我們提供的Map和MapView兩個模塊

import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';

4、在代碼中創(chuàng)建Map和MapView對象，并配置相關(guān)的參數(shù)

因為地圖是在div中展示的，所以，我們的代碼需要在onMounted中實現(xiàn)，代碼如下

onMounted(()=>{
  initArcGisMap()
})

const initArcGisMap = () => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
}

在這段代碼中，我們首先創(chuàng)建了一個名為 map 的地圖對象：

• 通過 new Map() 創(chuàng)建了一個地圖實例。
• basemap: "topo-vector" 表示該地圖使用了ArcGIS為我們提供的 topo-vector 底圖，即矢量拓撲地圖。
  然后，創(chuàng)建了一個名為 view 的地圖視圖對象：
• 通過 new MapView() 創(chuàng)建了一個地圖視圖實例。
• center: [-118.80500, 34.02700] 表示地圖視圖的初始中心點位置，這里設(shè)置的是經(jīng)度和緯度坐標。
• zoom: 13 表示地圖視圖的初始縮放級別，數(shù)值越大表示越近的縮放級別。
• container: "viewDiv" 表示地圖視圖將被渲染到具有 viewDiv id 的 HTML 元素中。
• map: map 表示該地圖視圖將使用上面創(chuàng)建的 map 對象作為其地圖實例。

5、在App.vue中加載地圖組件

<template>
  <ArcGisMap></ArcGisMap>
</template>

<script setup>  
import ArcGisMap from './components/ArcGisMap.vue'
</script>
<style scoped>
</style>

此時運行程序，我們發(fā)現(xiàn)瀏覽器顯示一片空白，并沒有將地圖加載進來，這是因為我們沒有給div添加寬度和高度，所以顯示為空

6、設(shè)置viewDiv的寬度可高度

<style scoped>  
#viewDiv {
  width: 100%;
  height: 100vh; 
}
</style>

運行瀏覽器，可以看到，我們已經(jīng)將地圖加載進來了

7、清除ArcGIS自帶的ui組件
雖然我們的地圖已經(jīng)加載出來了，但是我們發(fā)現(xiàn)在右側(cè)有一個滾動條，將滾動條下拉到底部，我們發(fā)現(xiàn)下面有放大、縮小及ArcGIS的相關(guān)信息

這是ArcGIS默認自帶的信息，我們可以通過設(shè)置view.ui.components = [];來清除這些信息
在view實例化后面添加這句代碼view.ui.components = [];即可清除

const initArcGisMap = () => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
  view.ui.components = []; 
}

view.ui.components = [] 用于移除地圖視圖中的默認 UI 組件

• view.ui 表示地圖視圖的用戶界面對象。
• components 數(shù)組中存放了用于顯示默認的 UI 組件，通過將其設(shè)置為空數(shù)組 []，實現(xiàn)了移除默認的 UI 組件。

刷新瀏覽器，可以發(fā)現(xiàn)，此時我們的瀏覽器就只有一個布滿全屏的地圖了

至此，我們已經(jīng)在vue3中加載了ArcGIS地圖，好了，這節(jié)就先到這里，下面一節(jié)我們來詳細的了解下我們這節(jié)代碼中的使用的Map和MapView的屬性和方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-646563.html

到了這里，關(guān)于ArcGIS Maps SDK for JavaScript系列之一：在Vue3中加載ArcGIS地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！