Hello，掘友们好，我正在参加「掘金·启航计划」
一、ArcGIS API for JavaScript简介
ArcGIS API for JavaScript是WebGIS开发中非常重要的前端JS库，是浏览器端调用ArcGIS功能所使用的库。如Arcmap Pro中所使用的创建要素，编辑要素等地图功能，在浏览器端要实现这些共嗯那个即需要调用ArcGIS API for JavaScript。 ArcGIS API for JavaScript目前最新版本为4.20，在2020年Esri开发者峰会上，官方宣布要对JS API进行改造，以便于现代前端框架、开发工具集成。当前增强的功能有：
（1）原生Promise是默认使用的，移除了对Dojo Promise的支持。has属性中的esri-native-promise属性已经不再支持；
（2）本地化已改善，主要使用intl.setLocale()方法；
（3）现在已经使用原生的模块化来代替dojo/_base/declare，消除了Dojo模块化机制
（4）多继承不再支持。
ArcGIS API for JavaScript就是ArcGIS软件对外提供的一些通过JS编写的接口，按照官网参考文档要求去调用这些接口的话就会得到预期的返回值。
二、安装@arcgis/core
在安装node.js后，可以使用npm安装vue cli，利用vue cli可以创建一个vue项目。利用以下命令可以全局安装vue cli。
npm install @vue/cli -g
如果是比较旧版本的cli，可以使用以下命令来升级。
npm install @vue/cli -g
最后使用vue的命令创建项目：
vue create 项目的名称
在ArcGIS API for JavaScript模块的导入中，也经历了很多的变迁，从“dojo”到“esri-loader”等逐渐的变化。而在4.18版本后，新增了一种全新的模式-@arcgis/core模式，可以实现直接在组件顶部引入所需的API模块，然后在组件代码中使用。@arcgis/core的安装方式如下：
vue create 项目的名称
在ArcGIS API for JavaScript模块的导入中，也经历了很多的变迁，从“dojo”到“esri-loader”等逐渐的变化。而在4.18版本后，新增了一种全新的模式-@arcgis/core模式，可以实现直接在组件顶部引入所需的API模块，然后在组件代码中使用。@arcgis/core的安装方式如下：
npm install @arcgis/core
三、初始化
<template>
<div class="mapView">
<div id="viewDiv"></div>
</div>
</template>
<script lang="ts" setup>
import { provide, onMounted } from 'vue';
import Map from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
const map = new Map({
basemap: 'topo-vector',
ground: 'world-elevation'
});
const view = new SceneView({
map: map,
spatialReference: {
wkid: 4490
},
camera: {
heading: 58.62, // face due east
tilt: 72.94, // looking from a bird's eye view
fov: 55,
position: {
latitude: 31.119977982,
longitude: 120.564301822,
z: 875.5,
},
},
center: [120, 30],
zoom: 8,
extent: {
xmin: 120.0,
ymin: 30.0,
xmax: 121.64307457631968,
ymax: 32,
spatialReference: {
wkid: 4490,
},
},
viewingMode: 'global', // local
});
provide('view', view); // 此处是为了让view能够跨组件通信，
// 后代组件只需要通过 const view = inject('view')来获取到view，然后进行操作
onMounted(() => {
view.container = 'viewDiv'; // 初始化页面完成后，再把viewDiv给到view.container，
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
html,
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.MapView {
width: 100%;
height: 100%;
}
#viewDiv {
width: 100%;
height: 100vh;
}
</style>
四、运行项目
五、注意事项
需要特别注意的是：4.18以上的版本，如4.20版本的@arcgis/core不能将地图创建的数据保存到data中，在vue2中不能预定义一个变量来保存将要定义的地图数据。如果要使用其他组件中的地图信息，请使用组件通信的方式访问其他组件中的地图信息。后面会做详细的描述。 要使用@arcgis/core时，在组件中导入需要使用的模块，如：
import Map from '@arcgis/core/Map'
const map = new Map({})