ArcGIS api for JavaScript 4.x arcgis/core 结合Vue3.0 vue使用@arcgis/core方式开发arcgis for js api地图项目

前言

ArcGIS api for JavaScript 4.x从4.18开始支持arcgis/core，之前没用过，这次正好有个项目，想拿来练练手，这也是我第一次用Vue3.0和ArcGIS api for JavaScript4.24来做项目。

已经上传GitHub，文末有仓库链接

环境

win10

arcgis api for js 4.24

node  v14.17.3

@vue/cli 5.0.8

VS Code 1.69.0

 

搭建步骤

一.安装node环境和vuecli

　　具体怎么搭建，这里省略

二.新建vue项目

　　①打开命令行，打开某个文件夹，执行

vue create arcgisapi4_vue3

　　

　　　　

 

  ②选择功能：

  　　

 

  ③选择3.x：

　　

 

 ④接下来的配置方案可以参考下方(图片模糊，放大凑合看~)：、

 

 

　

 

 三、安装@arcgis/core

　　要先打开已经建好的项目，然后执行npm install @arcgis/core ，如果想用旧版本，在后面加@版本号即可。

　　

cd arcgisapi4_vue3
npm install @arcgis/core   

　　　

 

 

 

　　至此，我们已经安装完@arcgis/core。

　　但是有个问题，arcgis/core样式默认是用的在线CDN，所以我们想办法把assets目录复制到public文件夹下面，我是直接复制粘贴过去的（我看有人写的是在package.json文件里修改运行命令"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"，没测试）。

 

四、修改代码部分

　　直接上代码，有注释

　　main.js

1 import { createApp } from 'vue'
2 import App from './components/Map' // 为了方便，直接加载Map.vue,正式环境要用路由做
3 import router from './router'
4 import store from './store'
5 import esriConfig from '@arcgis/core/config'
6 import '@arcgis/core/assets/esri/themes/light/main.css' // 引入本地的arcgis api样式文件
7 esriConfig.assetsPath = './assets' // 设置资产路径
8 
9 createApp(App).use(store).use(router).mount('#app')

　　Map.vue

 1 <template>
 2   <div class="mapView">
 3     <div id="viewDiv"></div>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import { provide, onMounted } from 'vue'
 9 import Map from '@arcgis/core/Map'
10 import SceneView from '@arcgis/core/views/SceneView'
11 export default {
12   name: 'MapView',
13   props: {
14     msg: String
15   },
16   setup () {
17     const map = new Map({
18       basemap: 'topo-vector'
19       // ground: 'world-elevation'
20     })
21 
22     const view = new SceneView({
23       map: map,
24       //   spatialReference: {
25       //     wkid: 4490
26       //   },
27       camera: {
28         heading: 58.62, // face due east
29         tilt: 72.94, // looking from a bird's eye view
30         fov: 55,
31         position: {
32           latitude: 31.119977982,
33           longitude: 120.564301822,
34           z: 875.5
35         }
36       },
37       center: [120, 30],
38       zoom: 8,
39       extent: {
40         xmin: 120.0,
41         ymin: 30.0,
42         xmax: 121.64307457631968,
43         ymax: 32,
44         spatialReference: {
45           wkid: 4490
46         }
47       },
48       viewingMode: 'global' // local
49     })
50     provide('view', view) // 此处是为了让view能够跨组件通信，
51     // 后代组件只需要通过 const view = inject('view')来获取到view，然后进行操作
52     onMounted(() => {
53       view.container = 'viewDiv' // 初始化页面完成后，再把viewDiv给到view.container，
54       // 这里运用的很巧妙，如果把view声明也放到这里面，则跨组件通信会有延迟，很难解决
55     })
56   }
57 }
58 </script>
59 
60 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 <style scoped lang="scss">
62 html,
63 body {
64   padding: 0;
65   margin: 0;
66   width: 100vw;
67   height: 100vh;
68   overflow: hidden;
69 }
70 .MapView {
71   width: 100%;
72   height: 100%;
73 }
74 #viewDiv {
75   width: 100%;
76   height: 100vh;
77 }
78 </style>

 

五.运行

　　cmd在当前目录执行npm run server

 

 

　　项目直接放到GitHub上了，懒人可以直接克隆下来

参考地址

      vue使用@arcgis/core方式开发arcgis for js api地图项目

      ArcGIS API for JavaScript+vue系列（二）-地图view与map的基本概述

　【完整的WebGIS教程】6.2 使用@arcgis/core本地部署ArcGIS API for JS