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 JavaScript4.18版本相比于4.17版本的变化主要的更新内容如下:

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

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

$ cd 
$ 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文件加载地图,文件内容如下:






可以看到,引用WebMapMapView时使用了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>:/的方式访问部署的网页。

你可能感兴趣的