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

一、創建 Vue 3 項目
1、新建ArcGISAPIProject文件夾，并用vscode打開

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

3、創建成功后，進入vite-vue3-arcgis文件夾，并使用pnpm i 安裝依賴

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

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

二、創建地圖組件
1、在src文件夾下的components文件夾中新建ArcGisMap.vue組件，

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

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

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

4、在代碼中創建Map和MapView對象，并配置相關的參數

<template><div id="viewDiv"></div>
</template><script setup lang="ts">
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import {onMounted,
} from 'vue'onMounted(()=>{initArcGisMap()
})const initArcGisMap = () => {const map = new Map({basemap: "streets"});const view = new MapView({center: [-118.80500, 34.02700],zoom: 12,container: "viewDiv",map: map});
}
</script><style scoped>  
#viewDiv {width: 100%;height: 100vh; 
}
.esri-ui-inner-container .esri-ui-manual-container{display: none;
}
</style>

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

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

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

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