Part One of the ArcGIS Maps SDK for JavaScript Series: Loading ArcGIS Maps in Vue3

Introduction to ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for JavaScript is a JavaScript library developed by Esri for building interactive map applications. It provides rich map display, analysis and visualization functions and is suitable for various scenarios.
Currently, the ArcGIS Maps SDK for JavaScript is available in two main versions: 3.x and 4.x.

1. ArcGIS Maps SDK for JavaScript 3.x version:
   • Version 3.x is an old version of ArcGIS Maps SDK for JavaScript and is still widely used in some old projects.
   • It is built based on the Dojo framework, provides powerful two-dimensional map display functions, and supports a variety of map services, layers, renderers, symbols, etc.
   • Provides a wealth of map analysis tools and visualization components, including buffer analysis, path analysis, spatial query, heat map, etc.
   • Version 3.x has been gradually replaced by version 4.x, and the official website has gradually stopped maintaining 3.x.
   • In today's modular development, 3.x can no longer adapt to the current development model. If there are no old projects to maintain, we do not need to use 3.x. Therefore, we will focus on the 4.x version here.
2. ArcGIS Maps SDK for JavaScript 4.x version:
   • Version 4.x is the latest version of ArcGIS Maps SDK for JavaScript and is the main direction of future development.
   • Version 4.x redesigns the architecture, uses modern Web technologies such as ES6 and TypeScript, and adopts a modular development approach.
   • It provides more flexible and high-performance map display functions, supporting 2D and 3D maps.

Key features and capabilities of ArcGIS Maps SDK for JavaScript 4.x

1. Map display function:

   • Supports loading of various basemaps and has interactive operations for map zooming, panning and rotation.
   • Provides rich layer types, including vector layers, raster layers, dynamic layers, etc.
   • Supports map symbolization, labels, and annotation.

2. Geospatial analysis capabilities:

   • Provides powerful geoprocessing and analysis functions, such as buffer analysis, spatial query, route analysis, etc.
   • Supports the visualization and rendering of geographical features, such as heat maps, clustering, etc.

3. 3D map functions:

   • Provides the ability to create and display 3D maps, and supports tilting, rotating and scaling 3D scenes.
   • Supports adding 3D models, underground pipe networks, point clouds, etc. to 3D scenes.

4. User interaction and navigation features:

   • Provides default map navigation controllers, including zoom controls, navigation buttons, and scale bars.
   • Supports custom user interaction functions, such as map click events, drag-and-drop, etc.

5. Map style and configuration:

   • Supports custom map styles, symbol libraries and color themes.
   • The map's default view, initial extent, coordinate system, etc. can be set through the configuration file.

6. Map data and service integration:

   • Supports loading various data sources, including geographic data formats (such as GeoJSON, KML, Shapefile, etc.) and services (such as ArcGIS Server services, WMS services, etc.).
   • Supports integration with ArcGIS Online and ArcGIS Enterprise to access their rich map and data resources.

Comparison of AMD modules and ES modules

ArcGIS Maps SDK for JavaScript 4.x provides two ways to load modules: AMD modules and ES modules (supported by versions 4.17 and later). The advantages and disadvantages of the two loading methods are as follows:

1. AMD modules (asynchronous module definition):

   • Pros: AMD is an asynchronous module loading mechanism for loading JavaScript modules. It is very suitable for use in legacy browsers and legacy systems, can be compatible with various browsers, and has strong cross-platform compatibility.
   • Disadvantages: AMD's syntax is relatively complex and may be more cumbersome to use. It also requires an additional AMD loader library to load modules.

2. ES modules (ECMAScript modules):

   • Pros: ES modules are the official modular system for JavaScript, known for their simplicity, ease of use, and static analysis. It uses standard importand exportsyntax to make code clearer and more maintainable, while supporting async/awaitmodern JavaScript features such as .
   • Disadvantage: ES modules may not be fully supported in older browsers and need to be converted appropriately to provide compatibility.

In Vue3, since Vue 3 uses modern browsers and ES6+ features, we recommend using ES modules. ES modules have a more concise, readable syntax and are more compatible with the Composition API in Vue 3.

Steps to use ArcGIS Maps SDK for JavaScript in Vue3

Create a Vue 3 project

1. Create a new ArcGISAPIProject folder and open it with vscode

npm create vite@latest2. Open the terminal, enter create vite project in the terminal , enter the project name vite-vue3-arcgis, select the vue framework, and select the JavaScript voice creation project

3. After successful creation, enter vite-vue3-arcgisthe folder and use to npm iinstall dependencies

4. After the installation is successful, enter npm run devand run the project to check whether the basic framework is normal

Install ArcGIS Maps SDK for JavaScript

In the terminal, type npm install @arcgis/coreinstall ArcGIS Maps SDK for JavaScript

Create a map component

Before creating the map component, we first delete the content in App.vue provided by the framework by default, and delete the HelloWorld.vue component in the components folder. 1. Create a new
ArcGisMap.vue component in the components folder under the src folder.

2. Create a new div in the template of the ArcGisMap.vue component, set the id attribute to viewDiv, as the container of the map,

3. Import the required map module; if you want to display the map in the container, you need to import the Map and MapView modules provided by ArcGis

import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';

4. Create Map and MapView objects in the code and configure related parameters

Because the map is displayed in a div, our code needs to be implemented in onMounted. The code is as follows

onMounted(()=>{
  initArcGisMap()
})

const initArcGisMap = () => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
}

In this code, we first create a mapmap object called :

• new Map()A map instance is created via .
• basemap: "topo-vector"Indicates that the map uses the base map provided by ArcGIS topo-vector, which is a vector topological map. Then, a map view object called
  is created :view
• new MapView()A map view instance is created via .
• center: [-118.80500, 34.02700]Indicates the initial center point position of the map view, where the longitude and latitude coordinates are set.
• zoom: 13Indicates the initial zoom level of the map view, with larger values ​​indicating closer zoom levels.
• container: "viewDiv"Indicates that the map view will be rendered into viewDivthe HTML element with id.
• map: mapIndicates that the map view will use the object created above mapas its map instance.

5. Load the map component in App.vue

<template>
  <ArcGisMap></ArcGisMap>
</template>

<script setup>  
import ArcGisMap from './components/ArcGisMap.vue'
</script>
<style scoped>
</style>

When we run the program at this time, we find that the browser displays a blank space and does not load the map. This is because we did not add width and height to the div, so it displays empty. 6. Set the width and height of

viewDiv

<style scoped>  
#viewDiv {
  width: 100%;
  height: 100vh; 
}
</style>

Run the browser and you can see that we have loaded the map.

7. Clear the UI components that come with ArcGIS.
Although our map has been loaded, we found that there is a scroll bar on the right side. Pull the scroll bar down to the bottom. , we found that there is zoom-in, zoom-out and ArcGIS-related information below.

This is the information that comes with ArcGIS by default. We can view.ui.components = [];clear this information through settings
. Add this code after the view instantiation view.ui.components = [];to clear it .

const initArcGisMap = () => {
    
    
  const map = new Map({
    
    
    basemap: "topo-vector"
  });

  const view = new MapView({
    
    
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
  view.ui.components = []; 
}

view.ui.components = []Used to remove default UI components in the map view

• view.uiA user interface object that represents a map view.
• componentsThe array stores the default UI components for displaying. By setting it to an empty array [], the default UI components are removed.

Refresh the browser, you can find that at this time our browser only has a full-screen map. At this

point, we have loaded the ArcGIS map in vue3. Okay, let’s stop here first. Let’s go into details in the next section. Learn about the properties and methods of Map and MapView used in our code in this section.