ArcGIS api for JavaScript 4.x @arcgis/core 结合Vue3.0

前言

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

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

createApp(App).use(store).use(router).mount('#app')

 

　　Map.vue

　　

<template>
  <div class="mapView">
    <div id="viewDiv"></div>
  </div>
</template>

<script>
import { provide, onMounted } from 'vue'
import Map from '@arcgis/core/Map'
import SceneView from '@arcgis/core/views/SceneView'
export default {
  name: 'MapView',
  props: {
    msg: String
  },
  setup () {
    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，
      // 这里运用的很巧妙，如果把view声明也放到这里面，则跨组件通信会有延迟，很难解决
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.MapView {
  width: 100%;
  height: 100%;
}
#viewDiv {
  width: 100%;
  height: 100vh;
}
</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