Vite中使用ArcGIS API for JavaScript 4.18

这篇文章将会介绍如何使用在使用Vite初始化的vue3项目中使用ArcGIS API for JavaScript 4.18来进行GIS项目开发。

1. ArcGIS API for JavaScript 4.18 简介

ArcGIS API for JavaScript的4.18版本相比于4.17版本的变化主要的更新内容如下：

1. 支持ES Module（Beta版本）方式调用，同时也支持AMD方式的调用，两种方式调用的功能都是一样的；
2. 支持对点聚类的查询，通过对点聚类的查询，可以实现查询点聚类的统计信息、展示点聚类对应的最小包络空间范围、获取某个点属于哪个聚类以及查看
3. 支持2D视图下的图层效果，操作对象可以是整个图层或者过滤条件后的要素，该特性可将类似css过滤器的函数应用与图层，从而增强地图的展示效果
4. 提供高程剖切小微件（Beta版本），该微件可以在2D和3D视图中使用，可基于绘制的线或者视图中存在的线，对比地形和3D建筑物的高度
5. 引入Order-independent transparency技术，能够根据相机的位置，可以选择性地看到透明表面后的其他透明要素
6. 上下文感知导航，在大倾斜的地下场景中，使用交互式缩放、平移或者旋转时，能够有大幅度的性能提升
7. 支持3D Web Editing，早些的版本中提供过了对于3D图层的编辑能力，这个版本增强了这个功能，包括：在scene layers中支持对属性的编辑、绘制3D要素时支持自捕捉功能等
8. 支持火星和月球相关的坐标系，在SceneView中可以加载火星或月球相关的影像和地形，也可加载相关坐标系的要素图层
9. 矢量符号生成器，可使用CIMSymbols对graphic和feature进行符号化
10. 停止对IE11和Edge Legacy的支持

4.18版本信息的优化内容请移步官网介绍，点这里哦

2. Vite简介

Vite是由尤雨溪开发的Web开发工具，是一个基于浏览器原生的ES import的开发服务器，它能够利用浏览器区解析imports，在服务器端负责按需编译并返回，整个过程跳过了打包这个概念；并且在热更新时，能够按需编译，不会随着模块增多而变慢。在生产环境中，则可以使用rollup对同一份代码打包。

Vite具有快速的冷启动、即时的模块热更新以及真正的按需编译的特点。详细的Vite介绍可以查看阿里巴巴淘系技术在知乎上的回答。

3. Vite构建的项目中使用4.18的版本

3.1 Vite创建Vue3项目

这里假设你已经在电脑上安装了node并且node版本>= 12.0.0、配置了npm可全局访问。

1. npm是6.x版本：

$ npm init @vitejs/app <project_name> --template vue

2. npm是7.x版本：

$ npm init @vitejs/app <project_name> -- --template vue

创建完成后，使用如下命令运行当前项目

$ cd <project_name>
$ npm install
$ npm run dev

3.2 安装ArcGIS API插件

$ npm install @arcgis/core

3.3 修改package.json

{
  "name": "arcgis_api_for_js_418_with_vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "npm run copy && vite build",
    "serve": "vite preview",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
    "postinstall": "npm run copy"
  },
  "dependencies": {
    "vue": "^3.0.5",
    "@arcgis/core": "^4.18.1"
  },
  "devDependencies": {
    "ncp": "^2.0.0",
    "@vitejs/plugin-vue": "^1.1.4",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.0.0-beta.65"
  }
}

主要修改内容有：

• 增加ncp依赖，主要用于将@/arcgis/core中的assets文件夹拷贝至项目的public文件夹
• 增加copy命令，调用ncp将@/arcgis/core中的assets文件夹拷贝至项目的public文件夹
• 修改build命令，在构建项目之前，执行copy命令

3.4 修改main.js

在main.js文件中引用@arcgis/core中的样式文件，文件内容如下：

import { createApp } from 'vue'
import App from './App.vue'

import '@arcgis/core/assets/esri/themes/dark/main.css'

createApp(App).mount('#app')

3.5 修改App.vue

修改App.vue文件加载地图，文件内容如下：

<template>
  <div class="map-div"></div>
</template>

<script>
import WebMap from '@arcgis/core/WebMap'
import MapView from '@arcgis/core/views/MapView'

export default {
  name: 'App',
  async mounted() {
    const webMap = new WebMap({
      portalItem: {
        id: "aa1d3f80270146208328cf66d022e09c",
      }
    })

    const mapView = new MapView({
      container: this.$el,
      map: webMap
    })

    await mapView.when(() => {
      console.log("地图加载成功")
    })
  }
}
</script>

<style>
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.map-div {
  padding: 0;
  margin: 0;
  height: 100%;
}

</style>

可以看到，引用WebMap和MapView时使用了ES6 Module相关的语法，不再使用之前的load_modules的方式。

3.6 运行

在执行npm run dev命令之前，需要调用npm run postinstall命令拷贝assets文件夹，否则在Web页面上不能显示放大、缩小等微件，并且在浏览器中提示相关错误。

$ npm run postinstall
$ npm run dev

访问浏览器查看地图是否加载成功。

3.7 打包部署

修改vite.config.js配置打包的目标路径以及基本公共路径等配置信息

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'example'
  }
}

执行npm run build命令，并将生成的打包文件夹拷贝到tomcat中的webapp文件夹。在浏览器通过http(s)://<服务器IP>:<port>/<outDir>的方式访问部署的网页。