Using ArcGIS API for JavaScript Maps

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

foreword

With the development of technology and the popularity of the Internet, online maps are being used more and more widely.

---

1. What is ArcGis?

The ArcGIS product line provides users with a scalable and comprehensive GIS platform. ArcObjects contains many programmable components, ranging from fine-grained objects (such as individual geometric objects) to coarse-grained objects (such as map objects that interact with existing ArcMap documents), which provide developers with integrated Comprehensive GIS functionality.

2. Use steps

1. Import library

ArcGis official website: https://developers.arcgis.com/
ES module to install arcgis:

npm install @arcgis/core

After the installation is complete, introduce map and mapView in the component:

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";

2. Create a map

Define the container:

<template>
  <div id="content"><div>
</template>

Create a map:

methods:{
    
    
 _createMapView: function () {
    
    
      const map = new Map({
    
    //定义map
        basemap: "streets",//地图类型
        ground: "world-elevation",
      });
      const view = new MapView({
    
    
        // eslint-disable-line no-unused-vars
        container: "content",//容器
        map: map,//使用map
        zoom: 9,//地图缩放大小
        //经度纬度
        center: [100, 10],//可自定义
      });
      this.view = view;
    }

Mount in the mounted hook:

  mounted: function () {
    
    
    this._createMapView();
}

3. Basemap switching

After creating the map, we can use the method provided by arcgis to complete the basemap switching. arcgis provides two methods, BasemapToggle and BasemapGallery, to solve the problem of basemap switching.
Import before use:

import BasemapToggle from "@arcgis/core/widgets/BasemapToggle";
import BasemapGallery from "@arcgis/core/widgets/BasemapGallery";

BasemapToggle:BasemapToggle can add a functional accessory to switch the basemap on the page, and the switched basemap is set through nextBasemap.

In the function that creates the map, set nextBasemap:

//创建一个并配置一个basemapToggle
 let toggle = new BasemapToggle(
        {
    
    
          view: view, // The view that provides access to the map's "streets-vector" basemap
          nextBasemap: "hybrid", // Allows for toggling to the "hybrid" basemap
          basemap: "satellite",
          title: "aaa",
          visible: true,
        }
      );
       //在视图上添加basemaotoggle 配件
      this.view.ui.add(toggle, "bottom-right");

BasemapGallery:BasemapGallery can add a directory accessory with the function of switching basemaps on the page. The difference between it and BasemapToggle is: BasemapToggle can only switch between two basemaps, while BasemapGallery provides a set of basemaps for selection and switching.

Add the following code to the function that creates the map:

//创建并配置一个basemapGallery
var basemapGallery = new BasemapGallery({
    
    
        view: view,
        source: {
    
    
          portal: {
    
    
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  // Load vector tile basemaps
          }
        }
      });
//在视图上添加basemapGallery配件
 this.view.ui.add(basemapGallery, "top-right");

4. Add graphics

arcgis provides Graphic to solve the problem of adding graphics.
Import Graphic:

import Graphic from "@arcgis/core/Graphic";

Add the following code to the function that creates the map:

//创建并配置一个Graphic
const pointGraphic = new Graphic({
    
    
        geometry: {
    
    
          type: "point",
          // 显示的位置
          longitude: 110,
          latitude: 10,
        },
        symbol: {
    
    
          // 类型有 图片标记 和 点
          type: "picture-marker",
          // 图片地址，可以网络路径或本地路径（PS：base64亦可）
          url: require("../assets/img/local.png"),
          // 图片的大小
          width: "32px",
          height: "32px",
        },
      });
      // 将图形添加到视图的图形层
      this.view.graphics.addMany([pointGraphic]);

5. Position the search box

arcgis provides Search to solve the positioning search problem.
Introducing Search:

import Search from "@arcgis/core/widgets/Search";

Add the following code to the function that creates the map:

const search = new Search({
    
    
        //Add Search widget
        view: view,
        container: content,//容器
        sources: [],//配置项
      });
//在视图上添加search配件
this.view.ui.add(search, "top-right");

---