ArcGIS API for JavaScript+vue系列（二）-地图view与map的基本概述

一、地图Map

在地图中，Map类是非常重要的组成元素，但是在新版本中，地图的很多交互操作被移植到了view类中，所以目前Map的主要作用是包含图层的简单容器。因为单个地图可以被多个视图引用与访问，而改变地图Map将会对多个地图view产生影响，所以将用户与地图图层的交互移植到了view上，而不是在Map中。同时Map的创建也应该先于view，以便传递到对应视图的属性中。

Map的导入与使用也非常简单，Map位于最外层文件夹下，可以通过import的方式导入。在新建Map时，可以直接传入一个basemap的属性，为Map添加一个地理地图，以便展示地图。

import Map from '@arcgis/core/Map'
  const map = new Map({
    basemap: "osm",
  })

下面map的具体定义应该写在setup函数内，同时，因为在setup函数内，去除了this，所以不能使用this来定义map。如果想要在vue2中定义Map，应该按照如下方式定义：

this.map = new Map({
  basemap: "osm",
})

需要注意的是，不能在data中定义一个map:{}。新版的data中不能存放map、view等数据。

basemap有预设的值，可以根据预设值自行填写，可以设置的字符串有[topo，streets，satellite，gray，osm，topo-vector]等。可登陆网址：http://gis.kaiquan.com.cn/latest/api-reference/esri-Map.html#methods-summary查看具体的底图信息。

如果不想使用预设的底图，也可以自己定义地理底图。可以根据ArcGIS Server自行发布服务，用发布的服务来展示自己的地理底图。发布服务后可以通过url来访问。这里使用蓝黑色中文不含兴趣点版中国基础地图，这是一个TileLayer，所以利用import导入TileLayer。

basemap中有一个baselayers，这是一个数组，里面存放了地理底图，在该数组中新建一个图层并传入url，这样可以自定义一个地理底图。

import TileLayer from 'arcgis/core/layers/TileLayer'
const map = new Map({
  basemap: {
    baselayers: [
      new TileLayer({
        url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
      })
    ]
  }
})

这是在创建Map时直接创建地理底图，如果要对地理底图进行切换时，可以使用如下代码

map.basemap.baselayers = [
  new TileLayer: ({
    url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
  })
]

map可以通过add为地图添加图层，添加的图层存放到layers属性中。在地图还有一个属性allLayers，这个属性中存放了地图的底图和其她图层。

二、视图View

地图的view主要分为二维视图与三维视图，二维视图使用的是MapView，三维视图使用的是SceneView，导入的方式分别是：

import MapView from 'arcgis/core/views/MapView'
import MapView from 'arcgis/core/views/SceneView'

除了负责地图及其元素的渲染之外，MapView 还处理用户和地图之间的交互。如可以修改extent属性来设置初始范围或地图可见部分。在定义视图时，一般在初始化时给视图设置三个属性，[map，center，zoom]，map是设置已经实例化的地图，center设置地图的中心位置，zoom设置当前的缩放等级。目前还未给当前视图设置一个容器，容器的设置需要在生命周期函数onMounted中设置。

<div id="mapview"></div>
import { onMounted } from 'vue'
const mapview = new MapView({
  map,
  center: [116.404844,39.913385],
  zoom: 10
})
onMounted(() =>{
  mapview.container = 'mapview'
})

最后还需要给这个挂载的div设置高度和宽度，让地图显示在页面中。这样一个基本的地图展示就完成了。一个地图展示的全部代码如下：

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

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import { onMounted } from 'vue'
export default {
  setup(){
    const map = new Map({
      basemap: "osm",
    })
    const mapview = new MapView({
  	  map,
  	  center: [116.404844,39.913385],
  	  zoom: 12
	})
	onMounted(() =>{
  	  mapview.container = 'mapview'
	})
	return{
	  map,
	  mapview
	}
  }
}
</script>

<style>
  #mapview{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>

三、地图Map与视图View的跨组件传递

在实际的项目和使用过程中，文件的传递是不可缺少的，例如为地图添加一个图层等操作时，势必要跨文件进行操作，势必要将map、view等地图元素交给其他文件来使用和操作。但是在4.20版本后的API中，不能将这些地图元素保存到vue的this中，

而如果还是想在其他文件中使用该地图元素，在vue3中也不能使用parent来直接访问父组件，所以当具有跨文件的需求时，如子组件需要使用父组件的地图元素时，不能使用props将父组件中的地图要素传递给子组件，而是应该使用另外的方法。

这里使用的是provide与inject，在父组件中使用provide将地图元素传输给子组件。且只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。相比于其他的传输方式，更加实用。

// 需要传输的组件
import { provide } from 'vue'
  const map = new Map({
    basemap: "osm",
  })
  provide('map',map)
  
// 需要接收的组件
import { inject } from 'vue'
  const map = inject('map')
  map.basemap = 'topo'

摸索了一周多的时间，甚至有过怀疑是不是vue3不支持ArcGIS API的跨文件传输，终于找到的方法，希望能给后来学习的人一点帮助。