在vue中使用ArcGIS API调取天地图底图并与ArcGIS Server发布的矢量瓦片相叠加

1.如何在vue中使用ArcGIS API

在vue中想要让Webpack认识ArcGIS API需要安装esri-loader。

第一步：通过npm安装esri-loader

安装命令：npm install esri-loader -S

第二步：在需要使用ArcGIS API的页面进行引入

HTML部分：（注意：地图是要挂载在dom元素上的）

<template>
	<div id='map'> </div>
</template>

JS部分：
import esriLoader from 'esri-loader'

第三步：引入ArcGIS 的一些在线API，和在线样式链接（注意：为了获得地图更快的加载速度，和稳定性，我们需要离线部署一套ArcGIS API，过几天会单独出一期如何离线部署ArcGIS API）

JS部分：

mounted() {
	const option = {url:'https://js.arcgis.com/4.3/'};
}

CSS部分：

@import url("https://js.arcgis.com/4.3/esri/css/main.css")

第四步：开始书写我们加载地图的代码

注意：esriLoader有以下几个方法：

1. getScript() 从库里面获取JS文件；get the script injected by this library
2. isLoaded() 检测模块是否加载完成；
3. loadModules（[ ],options）用于加载ArcGIS模块；
4. loadCss（url）用于加载css文件；
5. loadScript（{url:‘xxxxxxxx’}）将js加载到页面上

在mounted钩子中进行挂载

mounted() {
const option = {url: 'https://js.arcgis.com/4.3/'}    //注意：不同版本的ArcGIS API的用法可能不一样

esriLoader.loadModules ([
		"dojo/dom",    //该模块定义了核心的dojo DOM构建API。
          "dojo/on",    //是用于DOM节点和其他事件发出对象的通用事件处理程序模块，提供规范化的事件侦听和事件分派功能。
          "dojo/_base/declare",   //包含用于定义Dojo类的函数，这些类支持Dojo中的标准面向对象的概念，使用来模拟基于类的继承的功能。
          "dojo/json",    //是基于标准的ES5的JSON对象进行JSON解析和序列化的模块
          "dojo/_base/lang",   //包含用于支持多态和其他语言构造的功能，这些功能是该工具包其余部分的基础。
          "dojo/_base/url",
          "dojo/string",     //提供了一些简单的字符串操作实用程序（包括修剪（trim）、填充（pad）、重复（rep）、替换（replace））
          "dojo/dom-construct",  //该模块定义了核心的dojo DOM构建API。此模块的返回变量的约定为domConstruct。
          "dojo/number",    //包含用户展示javascript Number对象的方法：格式化、解析和舍入
          "esri/Map",    //Map类创建一个容器和必须的DOM结构，以添加图层、图形、信息窗口和其他导航控件
          "esri/geometry/Extent",    //边界框的最小和最大X坐标和Y坐标
          "esri/layers/support/TileInfo",   //包含有关TileLayers、ElevationLayers和Web TileLayers的切片方案的信息
          "esri/layers/support/LOD",   //一个ArcGISTiledMapServiceLayer有许多的LOD（细节层次）的。每个LOD对应于给定比例或分辨率的地图。
          "esri/geometry/SpatialReference",   //定义视图、图层或任务参数的空间参考。这表示用于在地图中定位地理要素的投影坐标系或地理坐标系。每个投影的地理坐标系都是由众多周知的ID