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