ArcGIS Maps ：在Vue3中加载ArcGIS地图

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两个模块

bash 复制代码

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

4、在代码中创建Map和MapView对象，并配置相关的参数

bash 复制代码

<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中加载地图组件

bash 复制代码

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

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