一、准备工作

  1. 注册开发者账号：https://developers.arcgis.com/

  2. 获取 API 密钥

  3. 引入 SDK 库：通过 CDN 或者下载本地文件的方式进行引入。

  4. 编写代码：根据 SDK 提供的文档和示例，编写代码实现地图展示、地理编码、空间分析等功能。

二、Vue 3 引入 WebGIS 地图

1、用命令行来创建一个 Vue 3项目

将node 和 npm 都升级成最新版

1
npm create vue@latest

2、安装 ArcGIS Maps SDK for JavaScript

1
npm install @arcgis/core

3、创建地图组件

main.ts 中引入样式

1
@import url('@arcgis/core/assets/esri/themes/light/main.css');

4、在 src/components 目录下创建一个名为 MapView.vue 的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div id="map"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js'
import MapView from '@arcgis/core/views/MapView.js'
const initMap = () => {
  const map = new Map({
    // topo-vector 底图，即矢量拓扑地图。
    basemap: 'topo-vector' 
  })
  const view = new MapView({
    map,
    container: 'map',
    center: [121.47,31.23], // 地图中心点：上海
    zoom: 10
  })
  view.ui.components = [] // 清除ArcGIS默认自带的信息
}
onMounted(() => {
  initMap()
})
</script>
<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

5、使用地图组件

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <MapView />
</template>
<script setup lang="ts">
import MapView from './components/MapView.vue'
</script>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>

6、自定义底图（天地图）

WebGIS 项目开发一般会涉及到自定义系统地图，本文就拿目前国内公网上的免费地图服务（天地图）来举例讲解如何去自定义底图。

使用天地图地图资源时需要先在天地图官网注册账号，并申请成为开发者，然后拿到天地图开发者的 Key，具体流程在官网按照提示一步步操作即可，无需过多介绍。