一、地图Map
在地图中，Map类是非常重要的组成元素，但是在新版本中，地图的很多交互操作被移植到了view类中，所以目前Map的主要作用是包含图层的简单容器。因为单个地图可以被多个视图引用与访问，而改变地图Map将会对多个地图view产生影响，所以将用户与地图图层的交互移植到了view上，而不是在Map中。同时Map的创建也应该先于view，以便传递到对应视图的属性中。
Map的导入与使用也非常简单，Map位于最外层文件夹下，可以通过import的方式导入。在新建Map时，可以直接传入一个basemap的属性，为Map添加一个地理地图，以便展示地图。
import Map from '@arcgis/core/Map'
const map = new Map({
basemap: "osm",
})
下面map的具体定义应该写在setup函数内，同时，因为在setup函数内，去除了this，所以不能使用this来定义map。如果想要在vue2中定义Map，应该按照如下方式定义：
this.map = new Map({
basemap: "osm",
})
需要注意的是，不能在data中定义一个map:{}。新版的data中不能存放map、view等数据。
basemap有预设的值，可以根据预设值自行填写，可以设置的字符串有[topo，streets，satellite，gray，osm，topo-vector]等。可登陆网址：http://gis.kaiquan.com.cn/latest/api-reference/esri-Map.html#methods-summary查看具体的底图信息。
如果不想使用预设的底图，也可以自己定义地理底图。可以根据ArcGIS Server自行发布服务，用发布的服务来展示自己的地理底图。发布服务后可以通过url来访问。这里使用蓝黑色中文不含兴趣点版中国基础地图，这是一个TileLayer，所以利用import导入TileLayer。
basemap中有一个baselayers，这是一个数组，里面存放了地理底图，在该数组中新建一个图层并传入url，这样可以自定义一个地理底图。
import TileLayer from 'arcgis/core/layers/TileLayer'
const map = new Map({
basemap: {
baselayers: [
new TileLayer({
url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
})
]
}
})
这是在创建Map时直接创建地理底图，如果要对地理底图进行切换时，可以使用如下代码
map.basemap.baselayers = [
new TileLayer: ({
url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
})
]
map可以通过add为地图添加图层，添加的图层存放到layers属性中。在地图还有一个属性allLayers，这个属性中存放了地图的底图和其她图层。
二、视图View
地图的view主要分为二维视图与三维视图，二维视图使用的是MapView，三维视图使用的是SceneView，导入的方式分别是：
import MapView from 'arcgis/core/views/MapView'
import MapView from 'arcgis/core/views/SceneView'
除了负责地图及其元素的渲染之外，MapView 还处理用户和地图之间的交互。如可以修改extent属性来设置初始范围或地图可见部分。在定义视图时，一般在初始化时给视图设置三个属性，[map，center，zoom]，map是设置已经实例化的地图，center设置地图的中心位置，zoom设置当前的缩放等级。目前还未给当前视图设置一个容器，容器的设置需要在生命周期函数onMounted中设置。
<div id="mapview"></div>
import { onMounted } from 'vue'
const mapview = new MapView({
map,
center: [116.404844,39.913385],
zoom: 10
})
onMounted(() =>{
mapview.container = 'mapview'
})
最后还需要给这个挂载的div设置高度和宽度，让地图显示在页面中。这样一个基本的地图展示就完成了。一个地图展示的全部代码如下：
<template>
<div id="mapview"></div>
</template>
<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import { onMounted } from 'vue'
export default {
setup(){
const map = new Map({
basemap: "osm",
})
const mapview = new MapView({
map,
center: [116.404844,39.913385],
zoom: 12
})
onMounted(() =>{
mapview.container = 'mapview'
})
return{
map,
mapview
}
}
}
</script>
<style>
#mapview{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
三、地图Map与视图View的跨组件传递
在实际的项目和使用过程中，文件的传递是不可缺少的，例如为地图添加一个图层等操作时，势必要跨文件进行操作，势必要将map、view等地图元素交给其他文件来使用和操作。但是在4.20版本后的API中，不能将这些地图元素保存到vue中，例如以下代码是不允许的。
const map = {},
map = new Map({
basemap: "osm"
})
在vue3中，代码会报以下的错误，map是被read-only修饰的元素，不能修改。
而如果还是想在其他文件中使用该地图元素，在vue3中也不能使用parent来直接访问父组件，所以当具有跨文件的需求时，如子组件需要使用父组件的地图元素时，不能使用props将父组件中的地图要素传递给子组件，而是应该使用另外的方法。
这里使用的是provide与inject，在父组件中使用provide将地图元素传输给子组件。且只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。相比于其他的传输方式，更加实用。
//需要传输的组件
import { provide } from 'vue'
const map = new Map({
basemap: "osm",
})
provide('map',map)
//需要接收的组件
import { inject } from 'vue'
const map = inject('map')
map.basemap = 'topo'
摸索了一周多的时间，甚至有过怀疑是不是vue3不支持ArcGIS API的跨文件传输，终于找到的方法，希望能给后来学习的人一点帮助。