前言：

ArcGIS API for JavaScript是由ESRI公司基于JavaScript语言的Dojo框架开发的程序接口，用户可以通过调用接口实现浏览、查询地图等基本操作，也可以通过编写函数实现更加复杂的功能。 官方文档

本章操作：

• 配置环境，初始化地图；
• 添加基础控件、自定义控件；

一、安装@arcgis/core：

 npm install @arcgis/core 
 //或
 yarn add @arcgis/core

二、使用ncp将资源复制到本地（提高加载地图速度，可忽略）：

1. 安装ncp

npm i ncp
//或
yarn add ncp 

2. 在package.json文件中配置脚本：

    "serve": "npm run copy && vue-cli-service serve",
    "build": "npm run copy && vue-cli-service build",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"

3.在main.js中配置esriConfig

import esriConfig from "@arcgis/core/config.js"
esriConfig.assetsPath = `./assets`  
//不设置assetsPath则默认从CDN中提取资源（非离线）

4. 执行命令：

npm run serve

静态资源（样式、图像、字体等）从@arcgis/core/assets文件夹将复制到/public/assets下：

三、在组件中引入样式文件

import '@arcgis/core/assets/esri/themes/light/main.css'

四、初始化地图：

<template>
	<div class="main">
		<h4>地图测试Demo</h4>
		<div id="mapView" class="mapView"></div>
	</div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import '@arcgis/core/assets/esri/themes/light/main.css'

let map
let mapView
export default {
	data() {
		return {}
	},
	mounted() {
		this.initMap()
	},
	destroyed() {},
	methods: {
		initMap() {
			map = new Map({
				basemap: 'topo-vector',//底图
			}) 
			mapView = new MapView({ //MapView为二维，SceneView为三维
				container: 'mapView',
				map: map,
				zoom: 4,  //缩放值
				center: [15, 65], // 经度, 纬度
			})
			mapView.ui.move('zoom', 'bottom-right') // 添加缩放控件
		},
	},
}
</script>
<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	padding: 50px;
	text-align: center;
	.mapView {
		width: 1500px;
		height: 80%;
		margin: 15px 10%;
	}
}
</style>

效果图：

五、添加地图控件

1.添加比例尺：ScaleBar

• 引入模块：

import ScaleBar from '@arcgis/core/widgets/ScaleBar'

• 添加控件：

const scaleBar = new ScaleBar({
	view: mapView,
	unit: 'metric',
})
mapView.ui.add(scaleBar, { position: 'bottom-left' }) // 添加比例尺

• 效果如下：

2. 添加自定义按钮：mapView.ui.add()

<div id="map-tool-list" class="map-tool-list">
	<div class="btn" title="清空选择" @click="handleClearMapView">
            <span class="iconfont iconqingchu1"></span>
        </div>
</div>

mapView.ui.add('map-tool-list', { position: 'bottom-right' }) //添加自定义工具栏

• 修改按钮列样式：

::v-deep .esri-ui {
	.esri-ui-inner-container {
		inset: 15px 15px 10px !important;
		.esri-ui-bottom-right {
			flex-flow: column-reverse;
			}
		}
	}

• 效果如下：

完整代码：

<template>
	<div class="main">
		<h4>地图测试Demo</h4>
		<div id="mapView" class="mapView"></div>
		<!-- 工具栏 -->
		<div id="map-tool-list" class="map-tool-list">
			<div class="btn" title="清空选择" @click="handleClear">
				<span class="iconfont el-icon-delete"></span>
			</div>
		</div>
	</div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import ScaleBar from '@arcgis/core/widgets/ScaleBar'
import '@arcgis/core/assets/esri/themes/light/main.css'

let map
let mapView
export default {
	data() {
		return {}
	},
	created() {},
	mounted() {
		this.initMap()
	},
	methods: {
		initMap() {
			map = new Map({
				basemap: 'topo-vector',
			}) // 创建底图
			mapView = new MapView({
				// 二维地图
				container: 'mapView',
				map: map,
				zoom: 4,
				center: [15, 65], // longitude, latitude
			})
			const scaleBar = new ScaleBar({
				view: mapView,
				unit: 'metric',
			})
			mapView.ui.add(scaleBar, { position: 'bottom-left' }) // 添加比例尺
			mapView.ui.move('zoom', 'bottom-right') // 设置缩放控件位置
			mapView.ui.add('map-tool-list', { position: 'bottom-right' }) //添加自定义按钮
		},
		handleClear() {},
	},
}
</script>
<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	padding: 50px;
	text-align: center;
	.mapView {
		width: 1500px;
		height: 80%;
		margin: 15px 10%;

		::v-deep .esri-view-root {
			.esri-ui-manual-container > .esri-widget {
				display: none;
				.esri-scale-bar__line {
					background-color: rgba(255, 255, 255, 0.5);
				}
			}
		}

		::v-deep .esri-ui {
			.esri-ui-inner-container {
				inset: 15px 15px 10px !important;
				.esri-ui-bottom-right {
					flex-flow: column-reverse;
				}
			}
		}
	}
	.map-tool-list {
		margin-bottom: 10px;
		.btn {
			width: 32px;
			height: 32px;
			padding: 0;
			margin: 0;
			overflow: hidden;
			font-size: 14px;
			background-color: #fff;
			color: #6e6e6e;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		.btn:hover {
			background-color: #f3f3f3;
		}
	}
}
</style>

效果图: