This article will introduce how to use ArcGIS API for JavaScript 4.18 in vue3 projects initialized with Vite to develop GIS projects.

1. Introduction to ArcGIS API for JavaScript 4.18

The changes of version 4.18 of ArcGIS API for JavaScript compared with version 4.17 are as follows:

1. Support ES Module (Beta version) mode call and AMD mode call. The functions of the two modes are the same;
2. Support the query of point clustering. Through the query of point clustering, you can query the statistical information of point clustering, display the minimum envelope space range corresponding to point clustering, obtain which cluster a point belongs to and view
3. Support the layer effect in 2D view. The operation object can be the whole layer or the elements after filtering conditions. This feature can apply functions similar to css filter to the layer, so as to enhance the display effect of the map
4. Provide elevation slicing widget (Beta version), which can be used in 2D and 3D views. It can compare the height of terrain and 3D buildings based on the drawn lines or lines existing in the view
5. The order independent transparency technology is introduced to selectively see other transparent elements behind the transparent surface according to the position of the camera
6. Context aware navigation can significantly improve the performance when using interactive zoom, translation or rotation in heavily tilted underground scenes
7. It supports 3D Web Editing. The editing ability for 3D layers was provided in the earlier version. This version enhances this function, including supporting attribute editing in scene layers, supporting self capture function when drawing 3D features, etc
8. Support the coordinate system related to Mars and moon. In the SceneView, you can load the images and terrain related to Mars or moon, as well as the feature layers of the relevant coordinate system
9. Vector symbol generator, which can use CIMSymbols to symbolize graphic s and feature s
10. Stop supporting IE11 and Edge Legacy

The optimized content of version 4.18 information can be introduced on the official website, Click here

2. Introduction to vite

Vite is a Web development tool developed by you Yuxi. It is a development server based on the native ES import of the browser. It can use the browser area to analyze imports, and is responsible for compiling and returning on demand on the server side. The whole process skips the concept of packaging; And during hot update, it can be compiled on demand without slowing down with the increase of modules. In a production environment, you can use rollup to package the same copy of code.

Vite has the characteristics of fast cold start, real-time module hot update and real on-demand compilation. For a detailed introduction to vite, you can check the application of Alibaba Amoy technology answer.

3. Version 4.18 is used in the project built by vite

3.1 Vite creates Vue3 project

Here, it is assumed that you have installed node on your computer, and node version > = 12.0.0, configured with npm, which can be accessed globally.

1. Yes npm X version:

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

1. npm is 7 X version:

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

After creation, run the current project with the following command

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

3.2 installing ArcGIS API plug-ins

$ npm install @arcgis/core

3.3 modify 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"
  }
}

The main modifications include:

• ncp dependency is added, which is mainly used to copy the assets folder in @ / arcgis/core to the public folder of the project
• Add the copy command and call ncp to copy the assets folder in @ / arcgis/core to the public folder of the project
• Modify the build command and execute the copy command before building the project

3.4 modify main js

In main JS file refers to the style file in @ arcgis/core. The contents of the file are as follows:

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

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

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

3.5 modify app vue

Modify app Vue file loads the map, and the contents of the file are as follows:

<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("Map loaded successfully")
    })
  }
}
</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>

You can see that the syntax related to ES6 Module is used when referring to WebMap and MapView, and the previous load is no longer used_ Modules.

3.6 operation

Before executing the npm run dev command, you need to call the npm run postinstall command to copy the assets folder. Otherwise, widgets such as zoom in and zoom out cannot be displayed on the Web page, and relevant errors will be prompted in the browser.

$ npm run postinstall
$ npm run dev

Visit the browser to see if the map is loaded successfully.

3.7 packaged deployment

Modify vite config. JS configuration package target path, basic public path and other configuration information

import vue from '@vitejs/plugin-vue'

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

Execute the npm run build command and copy the generated package folder to the webapp folder in tomcat. Access the deployed web page through HTTP (s): / / < server IP >: < port > / < outdir > in the browser.