修改 basemap 的样式

https://developers.arcgis.com/javascript/latest/tutorials/change-the-basemap-style/

学习使用 Basemap style service 来修改 basemap 的 style.

Basemap style service 就是提供 basemap layer 的服务.

简单来说就是切换 Map 的底图.

文档中的案例使用 Combobox 来切换底图.

通过创建特定的 DOM 元素, 然后将其作为 Wigets 组件添加到 UI 中. 并在 Combobox 的 change 事件中来进行切换

切换的方式: <view>.map.basemap 来实现.

前置要求

需要 ApiKey.

基本步骤

基本模型不使用官方文档, 因为网络的原因. 这里使用天地图来实现矢量底图与影像底图的切换.

1. 创建项目, 导入模块.
2. 准备好天地图的参数, 准备好影像底图与影像注记, 以及矢量地图与矢量注记的接口 url.
3. 创建 Basemap 实例, 使用影像图和矢量图进行初始化 (即两套底图).
4. 创建 Map 实例, 使用其中一套底图.
5. 创建 MapView, 需要注意该实例需要在外部可访问.
6. 准备 Switch 控件 (使用 AntdVue 来辅助).
7. 为 Switch 准备 change 事件, 在该事件中利用 <MapView>.map.basemap = <Basemap> 来切换底图.

参考代码

<template>
  <Switch v-model:checked="sw" @change="change"></Switch>
  <div class="arcgis" ref="arcgisDiv"></div>
</template>
<style>
* { margin: 0; padding: 0; }
.arcgis {
  margin: 1rem 0;
  border: 1px dashed red;
  width: 1000px;
  height: 700px;
}
</style>

导入模块部分

import Basemap from '@arcgis/core/Basemap'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import { onMounted, ref } from 'vue';
import '@arcgis/core/assets/esri/themes/light/main.css'

import { Switch } from 'ant-design-vue'

const arcgisDiv = ref<HTMLDivElement>()
const sw = ref<boolean>(false)

准备底图实例

// 影像底图
const layer0 = new WebTileLayer({
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/img_w/wmts?' 
              + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img' 
              + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' 
              + '&tk=token',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

// 影像注记
const layer1 = new WebTileLayer({
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cia_w/wmts?' 
              + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia' 
              + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' 
              + '&tk=token',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

// 影像底图
const layer3 = new WebTileLayer({
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/vec_w/wmts?' 
              + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec' 
              + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' 
              + '&tk=token',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

// 影像注记
const layer4 = new WebTileLayer({
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cva_w/wmts?' 
              + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva' 
              + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' 
              + '&tk=token',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

实例化地图

const basemap1 = new Basemap({
  baseLayers: [ layer0, layer1 ]
})
const basemap2 = new Basemap({
  baseLayers: [ layer3, layer4 ]
})

const map = new Map({ basemap: basemap1 })

let mapView: MapView | undefined

onMounted(() => {
  mapView = new MapView({
    map: map,
    center: [120, 28],
    zoom: 4,
    container: arcgisDiv.value,
    constraints: { minZoom: 3, maxZoom: 18 }
  })
})

处理 Switch 的 Change

const change = (checked: boolean | string | number) => {
  if (mapView == null) return
  if (checked) {
    mapView!.map.basemap = basemap2
  } else {
    mapView!.map.basemap = basemap1
  }
}