基于Vue项目从零开始学ArcGIS（1），把ArcGIS引入项目到基本使用

前言：

最近因为工作需要学习ArcGIS，在网上找了很多文字资料和视频，发现ArcGIS教学要么是版本比较老的、要么是基于原生的教学，如果放到Vue框架上用法多少有点变化，并且官方文档还是全英文的综合下来确实有点杂。所以我整合多个学习资料学习的过程中，顺便搞个Vue3+ArcGIS的系列教程，除了在做笔记的过程中希望能有同行从中得到学习。

这一章节主要说说怎么把ArcGIS引入Vue项目并且基础使用，最后再实现一个如下图所示二三维地图联动的小功能。后续持续学习再继续更新内容和案例。

一、Vue3引入ArcGIS安装

项目是基于Vue3的，我是随手架个空框架练手的，具体怎么架就不细说了，直接入正文。

（1）npm引入

npm install @arcgis/core
或者
yarn yarn add @arcgis/core

（2）挂载在项目

在main.js文件中引入样式

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

（3）页面引用

在使用到地图的地方引入必要的视图，如下三个最常用的

• Map: 存放所有图层
• MapView： 显示2D图层，并且图层的事件和配置都写在里面（即负责用户的交互）
• SceneView: 显示3D视图，并且图层的事件和配置都写在里面（即负责用户的交互）

<script setup>

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

</script>

二、最简单的地图展示

上面执行了引入安装的步骤，下面直接引入一个完整的视图；大概思路是通过引入的new Map初始化一个视图，然后通过 new MapView去显示一个2D的图层并且里面有各种配置属性，以下每一行代码都添加了注释，下面附带效果动图

<template>
  <main>
    <div id="viewDiv"></div>
  </main>
</template>

<script setup>
import { onMounted } from "vue";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
/**
 * Map: 存放所有图层
 * MapView： 显示2D图层，并且图层的事件和配置都写在里面（即负责用户的交互）
 */

let mymap = null;
let myview = null;

onMounted(() => {
  initMap();
});
// 初始化地图
const initMap = () => {
  mymap = new Map({
    basemap: "satellite", // 设置地图类型为标注影像混合切片
  });

  myview = new MapView({
    container: "viewDiv", // 挂载在那个DOM
    map: mymap, // 绑定的map对象
    center: [113.5, 23.2], // 设置视图的中心点
    zoom: 8, // 设置视图初始的缩放级别
  });

  myview.ui.remove(["zoom", "attribution"]);  // 把缩放按钮去掉，和把底部的介绍去掉
};
</script>

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

三、实现一个二三维联动的小功能

简单解释：

1、先用new Map和new MapView初始化一个2D地图，然后用new Map和new SceneView初始化一个3D地图

2、用view.watch监听地图当前是不是在交互（例如缩放和拖动），如果是就反交互的内容同步到另一个地图实现联动

3、结尾处的when方法： 作用是进入页面初始化完成的时候会自动执行里面的函数myview3.goTo， goTo即到达某个坐标或者默认的缩放大小

<template>
  <h3>二三维视图联动效果</h3>
  <div class="about">
    <div id="view2"></div>
    <div id="view3"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import SceneView from "@arcgis/core/views/SceneView.js";


let 
  mymap2 = null,
  mymap3 = null,
  myview2 = null, // 展示2维视图
  myview3 = null, // 展示3维视图
  active, // 存放当前选中激活的视图
  sync, // 把激活的视图点动态传给未激活视图，实现实时联动
  views = [];


onMounted(() => {
  initMap();
});

// 初始化地图
const initMap = () => {
  mymap3 = new Map({
    basemap: "satellite", 
  });
  mymap2 = new Map({
    basemap: "terrain", 
  });

  // 2维视图的逻辑-------------------------------------------------------------------
  myview2 = new MapView({
    container: "view2", // 挂载在那个DOM
    map: mymap2, // 绑定的map对象
  });


  // 3维视图的逻辑--------------------------------------------------------------------------
  myview3 = new SceneView({
    container: "view3", // 挂载在那个DOM
    map: mymap3, // 绑定的map对象
  });


  // 遍历两种视图
  views = [myview2, myview3];
  // 如果当前存在激活视图，则执行下面语句
  sync = (source) => {
    if (source !== active || !active || !active.viewpoint) {
      return;
    }
    for (const view of views) {
      // 将激活视图的中心点，传递给不激活的,从而实现联动
      if (view !== active) {
        view.viewpoint = active.viewpoint;
      }
    }
  };
  for (const view of views) {
    // 监听视图是否正在与用户交互，例如拖动和旋转或者动画
    // interacting：当前是否在跟用户交互是则返回true     animation：是否在执行动画效果
    view.watch(["interacting", "animation"], () => {
      active = view; // 把本视图作为当前激活视图
      sync(active); // 对当前执行视图执行sync方法
    });
    // 监听视点变化时不将本视图作为激活视图
    view.watch("viewpoint", () => {
      sync(view);
    });
  }

  //when方法： 进入页面初始化完成的时候会自动执行里面的函数myview3.goTo， goTo即到达某个坐标或者默认的缩放大小
  myview2.when(() => {
    myview3.goTo({
      target: [113.5, 23.2],
      zoom: 3,
    });
  });
};
</script>

<style scoped>
.about {
  height: 80vh;
  display: flex;
  align-items: center;
  /* flex-direction: column; */
}
.about div:nth-child(1) {
  width: 50%;
  min-height: 80vh;
  /* border: 1px solid teal; */
}
.about div:nth-child(2) {
  width: 50%;
  min-height: 80vh;
  /* border: 1px solid teal; */
}
</style>

小结：

学了一下发现其实东西不难，但这个库有点庞大，文档里面属性非常多而且还是纯英文的，经典的易学难精的一个东西。