ArcGIS API for JavaScript 地图的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着科技的发展，互联网的普及，线上地图被应用的越来越广泛了。

---

一、ArcGis是什么？

ArcGIS产品线为用户提供一个可伸缩的，全面的GIS平台。ArcObjects包含了许多的可编程组件，从细粒度的对象（例如单个的几何对象）到粗粒度的对象（例如与现有ArcMap文档交互的地图对象）涉及面极广，这些对象为开发者集成了全面的GIS功能。

二、使用步骤

1.引入库

ArcGis官网：https://developers.arcgis.com/
ES模块安装arcgis:

npm install @arcgis/core

安装完成后，在组件中引入map,mapView:

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

2.创建地图

定义容器：

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

创建地图：

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;
    }

在mounted钩子中挂载：

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

3.底图切换

在创建完地图后，我们可以使用arcgis提供的方法完成底图切换。arcgis提供了BasemapToggle 和BasemapGallery两种方法来解决底图切换问题。
使用前引入：

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

BasemapToggle:BasemapToggle可以在页面上添加一个切换底图的功能配件，切换的basemap通过nextBasemap设置。

在创建地图的函数中，设置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可以在页面上添加一个切换底图功能的目录配件，它与BasemapToggle的区别就是：BasemapToggle只可以在两张底图之间切换，而BasemapGallery提供一组底图供选择切换。

在创建地图的函数中添加以下代码：

//创建并配置一个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.图形添加

arcgis提供了Graphic来解决图形添加问题。
引入Graphic：

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

在创建地图的函数中添加以下代码：

//创建并配置一个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.定位搜索框

arcgis提供了Search来解决定位搜索问题。
引入Search：

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

在创建地图的函数中添加以下代码：

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

---