在 ArcGIS Maps SDK for JavaScript 中，Map 和 MapView 是兩個重要的概念，用于創建和展示地圖應用程序。

Map

Map 表示一個地圖對象，它是地圖應用程序的基礎。Map 可以包含一個或多個圖層（Layer），可以是基礎底圖圖層、矢量圖層、柵格圖層或者任何其他類型的圖層。Map 也可以包含地圖符號化（Symbology）、標注、注記等信息。

創建一個 Map 對象的示例代碼：

const map = new Map({basemap: 'streets-vector'
});

這里的代碼創建了一個包含 ‘streets-vector’ 底圖的地圖對象。

Map的常用屬性

1. allLayers（圖層）
   • 類型：Collection
   • 描述：地圖中所有圖層的展開集合（包含底圖）
2. basemap（底圖）
   • 類型：String 或 Basemap 對象
   • 描述：指定地圖的底圖樣式。可以是預定義的字符串（如 “streets”、“satellite”、“topo” 等），也可以是自定義的 Basemap 對象。
3. ground（地面）
   • 類型：Ground 對象
   • 描述：用于指定地球表面的可視化。Ground 對象可以設置地面的類型，如 “world-elevation”、“world-topobathymetry” 等。
4. layers（圖層）
   • 類型：Layer 集合
   • 描述：包含當前地圖上的所有圖層。可以通過添加或移除 Layer 對象來調整地圖上的圖層顯示，不包含底圖。

// 創建一個具有默認底圖的地圖對象
const map = new Map({basemap: "streets"
});// 添加一個圖層到地圖上
const layer = new TileLayer({url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
map.layers.add(layer);// 創建一個地圖視圖
const mapView = new MapView({container: "viewDiv ",map: map,zoom: 10,center: [-122.4194, 37.7749]
});

上面的代碼創建了一個具有 “streets” 底圖的地圖對象，然后添加了一個切片圖層，并最后使用 MapView 在一個指定的 HTML 元素中展示地圖。

Map的常用方法

1. add(layer)（添加圖層）

   • 參數：layer: Layer 對象
   • 描述：將指定的圖層添加到地圖上。可以通過此方法動態添加圖層，并顯示在地圖上。

2. remove(layer)（移除圖層）

   • 參數：layer: Layer 對象
   • 描述：從地圖上移除指定的圖層。使用此方法可以在運行時移除地圖上的圖層。

3. findLayerById(id)（根據 ID 查找圖層）

   • 參數：id: String
   • 返回值：Layer 對象
   • 描述：根據指定的 ID 查找并返回地圖上的圖層對象。

4. findLayersByName(name)（根據名稱查找圖層）

   • 參數：name: String
   • 返回值：Layer[]（圖層數組）
   • 描述：根據指定的名稱查找并返回與名稱匹配的圖層對象數組。

5. removeAll()（移除所有圖層）

   • 描述：從地圖上移除所有的圖層。

6. destroy()（銷毀地圖）

   • 描述：銷毀地圖對象及其相關資源。使用此方法可以清理地圖對象，釋放內存，特別是在不再需要地圖時。

MapView

MapView 是用于顯示 Map 對象的視圖組件，它負責將地圖渲染到 HTML 頁面上。MapView 提供了用戶與地圖交互的功能，如平移、縮放、旋轉等操作。MapView 還支持添加圖形和彈出窗口，并提供了鼠標事件和交互控制等功能。

創建一個 MapView 對象的示例代碼：

const mapView = new MapView({container: 'viewDiv',map: map,zoom: 10,center: [longitude, latitude]
});

這里的代碼創建了一個 MapView 對象，將其渲染到 id 為 ‘viewDiv’ 的 HTML 元素中，并將前面創建的 Map 對象傳入。還可以設置初始的縮放級別和中心坐標。

MapView的常用屬性

1. container（容器）

   • 類型：String 或 HTML 元素
   • 默認值：無
   • 描述：指定用于顯示地圖的 HTML 容器元素的 ID 或實際的 HTML 元素。地圖將在該容器中進行渲染。

2. map（地圖）

   • 類型：Map 對象
   • 默認值：無
   • 描述：指定地圖對象，代表 MapView 的地圖內容。

3. zoom（縮放級別）

   • 類型：Number
   • 默認值：無
   • 描述：指定地圖的初始縮放級別。可以設置一個介于最小縮放級別和最大縮放級別之間的數字。

4. center（中心坐標）

   • 類型：Number[]
   • 默認值：無
   • 描述：指定地圖的初始中心點坐標。以經度和緯度的形式表示，如 [longitude, latitude]。

5. rotation（旋轉角度）

   • 類型：Number
   • 默認值：0
   • 描述：指定地圖的初始旋轉角度，以度數為單位。可以設置一個介于-360到360之間的數字。

6. constraints（約束條件）

   • 類型：ViewpointConstraints 對象
   • 默認值：無
   • 描述：用于設置地圖的約束條件，如最大縮放級別、最小縮放級別、可見范圍等。

創建 MapView 對象，并配置屬性的示例如下：

// 創建 Map 對象
const map = new Map({basemap: "streets"
});// 創建 MapView 對象，并配置屬性
const view = new MapView({container: "viewDiv", // 將地圖渲染到指定的 HTML 元素中map: map, // 指定要顯示的地圖對象zoom: 10, // 設置初始縮放級別為 10center: [0, 0] // 設置初始中心點坐標為 [0, 0]
});// 添加圖層到地圖
const layer = new TileLayer({url: "https://example.com/path/to/layer" // 設置圖層的 URL
});
map.add(layer);

在上面的代碼中，首先創建了一個 Map 對象，并指定了要使用的底圖（basemap）。然后，創建了一個 MapView 對象，并在配置中設置了以下屬性：

• container：指定地圖要渲染到的 HTML 容器元素的 ID 或實際的 HTML 元素（這里使用 mapContainer ID 的元素）。
• map：指定要顯示的地圖對象，即之前創建的 Map 對象。
• zoom：設置初始縮放級別為 10。
• center：設置初始中心點坐標為 [0, 0]。

然后，創建了一個圖層對象，并將其添加到地圖上。

MapView的常用方法

1、goTo()（跳轉）
將視圖跳轉到指定的視點。可以指定要跳轉到的視點對象，包括縮放級別、中心點和旋轉角度等。可以使用 options 參數來指定動畫和持續時間等跳轉的選項。
MapView的goto方法是一個非常實用的方法，它可以讓我們將視圖切換到指定的位置并縮放級別。
goto方法的基本語法：
goTo(target, options){[Promise]}
該方法接受兩個參數：

• target：要查看的目標位置。它可以是Geometry（如點、線或面）、Graphic（地圖上的一個圖形）或任何具有位置信息的對象。
• options：可選參數，用于指定視圖切換的選項，如動畫過渡、縮放級別等。

goto方法返回一個Promise對象，該對象在視圖切換完成后解析。可以通過.then()方法來處理視圖切換完成后的操作。

使用goto方法將地圖視圖轉到指定位置并進行縮放：

const target = {target: [-118.80500, 34.02700], // 目標位置的經緯度坐標zoom: 13 // 縮放級別
};view.goTo(target).then(() => {// 視圖切換完成后的操作console.log('視圖已切換完成');}).catch((error) => {console.error('切換視圖時發生錯誤', error);});

在上面的代碼中，我們首先創建了一個包含目標位置和縮放級別信息的對象。然后，我們調用view.goTo()方法，并傳遞該對象作為參數。在視圖切換完成后，.then()方法中的回調函數將被調用，可以在其中執行視圖切換完成后的操作。如果切換視圖時發生錯誤，.catch()方法中的回調函數將被調用，可以在其中處理錯誤情況。

這里需要注意，goto方法也可以接受其他選項，如動畫過渡時間、旋轉角度等。可以在options參數中進行配置。詳細的方法和參數說明可以參考ArcGIS API for JavaScript的官方文檔。
2、on()（事件監聽）

• 參數：Object對象
• 描述：注冊監聽地圖事件。
  MapView的on方法是一個事件監聽器，可以用于監聽和處理地圖事件。MapView的on方法返回一個Promise對象，可以通過調用該對象的then方法來處理事件。

MapView的on()方法常用的注冊事件如下：

• “click”：當用戶在地圖上單擊時觸發。
• “double-click”：當用戶在地圖上雙擊時觸發。
• “drag”：當用戶在地圖上拖拽時觸發。
• “mouse-wheel”：當用戶在地圖上使用鼠標滾輪時觸發。
• “pointer-down”：當用戶在地圖上按下任意指針設備按鈕（鼠標按鈕、觸摸屏等）時觸發。
• “pointer-move”：當用戶在地圖上移動任意指針設備時觸發。
• “pointer-up”：當用戶釋放任意指針設備按鈕（鼠標按鈕、觸摸屏等）時觸發。

on方法使用示例代碼如下：

<template><div id="viewDiv"> </div> 
</template><script setup> 
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';onMounted(()=>{initArcGisMap()
})const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"});const view = new MapView({ zoom: 4,container: "viewDiv",map: map});view.ui.components = []; const target = {target:[-118.80500, 34.02700],zoom:13}view.goTo(target).then(()=>{// 視圖切換完成后的操作console.log('視圖已切換完成');}).catch((error)=>{console.error('切換視圖時發生錯誤', error);})view.on('click', (event) => {// 處理點擊事件console.log('click事件觸發')})view.on('double-click', (event) => {// 處理雙擊事件console.log('double-click事件觸發')});view.on('drag', (event) => {// 處理拖拽事件console.log('drag事件觸發')});view.on('mouse-wheel', (event) => {// 處理鼠標滾輪事件console.log('mouse-wheel 事件觸發')});view.on('pointer-down', (event) => {// 在地圖上按下任意指針設備按鈕（鼠標按鈕、觸摸屏等）時觸發事件console.log('pointer-down 事件觸發')});view.on('pointer-move', (event) => {// 在地圖上移動任意指針設備時觸發事件console.log('pointer-move 事件觸發')});view.on('pointer-up', (event) => {// 釋放任意指針設備按鈕（鼠標按鈕、觸摸屏等）時觸發事件console.log('pointer-up 事件觸發')});view.on('extent-change', (event) => {// 地圖視圖的范圍發生變化時觸發事件console.log('extent-change 事件觸發')});
}
</script>
<style scoped>  
#viewDiv {width: 100%;height: 100vh; 
}
</style>

3、toMap()方法
MapView的toMap()方法是用來將頁面上的像素坐標轉換為地圖上的經緯度坐標的方法。它接受一個包含頁面上的像素坐標的對象作為參數，并返回對應的地圖上的經緯度坐標。
使用toMap()方法的示例：

<template><div id="viewDiv"></div>
</template><script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';  
let view
onMounted(() => {initArcGisMap()
})const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"});view = new MapView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map});view.ui.components = [];view.on('click', handleMapClick)
}const handleMapClick = (event) => { const screenPoint = {x: event.x,y: event.y}; const mapPoint = view.toMap(screenPoint);console.log(`點擊點的經緯度坐標為 經度:${mapPoint.latitude},緯度:${mapPoint.longitude}`)}
</script>
<style scoped>  #viewDiv {width: 100%;height: 100vh;}
</style> 

在上述代碼中，當我們點擊地圖時，handleMapClick方法會被調用。在該方法中，我們通過event對象獲取到用戶點擊的頁面像素坐標。然后，使用view.toMap(screenPoint)方法將頁面像素坐標轉換為地圖上的經緯度坐標。最后，將獲取到的經緯度值打印到控制臺。
運行代碼，可以看到控制臺輸出的經緯度坐標

4、toScreen()方法
MapView的toScreen()方法是用來將地圖上的經緯度坐標轉換為頁面上的像素坐標的方法。它接受一個包含地圖上經緯度坐標的對象作為參數，并返回對應的頁面上的像素坐標。
使用toScreen()方法的示例

<template><div id="viewDiv"></div>
</template><script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js'; 
import Point from "@arcgis/core/geometry/Point.js";let view
onMounted(() => {initArcGisMap()
})const initArcGisMap = () => {const map = new Map({basemap: "topo-vector"});view = new MapView({center: [-118.80500, 34.02700],zoom: 4,container: "viewDiv",map: map});view.ui.components = [];view.on('click', handleMapClick) 
}const handleMapClick = (event) => { const mapPoint = new Point({x: event.mapPoint.longitude,y: event.mapPoint.latitude,spatialReference: view.spatialReference});const screenPoint = view.toScreen(mapPoint);console.log(`點擊點的屏幕坐標為 x:${screenPoint.x},y:${screenPoint.y}`)} 
</script>
<style scoped>  #viewDiv {width: 100%;height: 100vh;}
</style>

上述代碼中，當用我們擊地圖時，handleMapClick方法會被調用。在該方法中，我們通過event.mapPoint獲取到用戶點擊位置的地圖上的經緯度坐標。然后，創建一個Point對象表示地圖上的坐標點，并指定相應的空間參考。接下來，使用view.toScreen(mapPoint)將地圖坐標點轉換為頁面上的像素坐標。最后，將獲取到的像素坐標在控制臺打印出來。
運行程序，點擊地圖上任意位置，可以在控制臺看到該點的屏幕坐標

好了，關于Map和MapView的相關內容就介紹到這里，關于ArcGIS Maps SDK for JavaScript的更多內容，咱們下次接著聊。