Arcgis使用过程（二）——使用WebTileLayer实现给卫星图上添加中文的标注图层

上一篇实现了创建地图为卫星图的地图，并且尝试设置一些地图的基础参数，但是只有卫星图，我们不知道图上的某个位置到底是哪个地方，这个时候就需要在卫星图上添加标注图层，标注上道路名称以及地方名称，这样就一目了然。

但是有一点让人比较困扰，Arcgis提供的路线图等都是英文的，也或许是我没有找到。但是没有关系，既然找不到现成的，那就自己实现一个呗。接下来就是实现给卫星图上添加标注涂层的过程：

1、了解地图的图层

我们平常看到的地图（例如：百度地图、高德地图）其实都是由多个图层组成，比如说看地图时能看到建筑物位置、路网、地点标注等等，都是由多个图层进行叠加显示的。看一下下面的图可能会更清晰一点：

西安钟楼卫星图

西安钟楼标注图

西安钟楼卫星+标注（也就是本次要实现的效果）

2、Arcgis中的图层------layers

Arcgis中可以加载很多类型的图层：WebTileLayer、FeatureLayer、GraphicLayer等等。

上一篇实现了创建地图，我们在Arcgis中创建的Map实例，还使用了basemap设置了底图，实际Map实例有一个叫做layers的集合参数，所有的图层都保存在layers中，我们也可以通过layers来设置图层。

下方的案例，可能会更加清晰：

案例一：在创建Map时设置图层，显示卫星影像

vue 复制代码

const layer1 = new WebTileLayer({
    urlTemplate: 'http://t0.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=d419f4158602636f22942a79a96a2325'
});

const map = new Map({
    layers: [layer1] // 重点：使用layers参数设置图层
});

const view = new MapView({
    map: map,
    center: [108.942342, 34.260985], // 地图的中心点，当前中心点是西安钟楼
    zoom: 18,
    container: "map"
});

上述代码实现的效果就是显示出卫星影像，这里我们使用WebTileLayer创建了一个图层实例，在创建Map实例的时候，这次没有使用参数basemap，而是使用layers进行设置，也就是说我们可以在layers中设置我们想要的图层。

案例二：通过Map的属性layers的add方法添加图层影像

vue 复制代码

const map = new Map();

const view = new MapView({
    map: map,
    center: [108.942342, 34.260985], // 地图的中心点，当前中心点是西安钟楼
    zoom: 18,
    container: "map"
});

// 创建图层
const layer1 = new WebTileLayer({
    urlTemplate: 'http://t0.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=d419f4158602636f22942a79a96a2325'
});

map.layers.add(layer1); // 使用layers的add方法添加图层

上述代码实现的效果也是显示出卫星影像，这里我们先创建了一个Map实例，之后创建了一个WebTileLayer图层，最后利用Map的layers属性的add方法成功添加上了图层。

总结：上述两个案例都是通过操作layers实现图层的添加，之后我们添加图层，都将采用上述两种方式。

3、为什么使用WebTileLayer图层

（1）Arcgis对WebTileLayer的描述

WebTileLayer 提供了一种简单的方法，可将非 ArcGIS Server 地图瓦片作为图层添加到地图中。而我们要实现的卫星图和标注图都是发布的地图瓦片服务。

（2）地图瓦片

地图瓦片是一种在网络地图服务中广泛使用的优化技术，它将大范围的地图数据切割成一系列较小的、固定大小的图像块，这些图像块被称为"瓦片"（Tiles）。每个瓦片通常是一个JPEG、PNG或者其他格式的图片文件。

（3）简单的理解

地图图层是由很多个方形的图片组成，一个图片就是一个瓦片，想象一下拼图，就有概念了。这也就是为什么有的时候在网不好的情况下加载地图，会出现许多个小格子先后显示的情况。

4、查找卫星图和标注图的地图瓦片资源（准备工作）

（1）开始要知道的东西------地图服务

地图服务的功能很强大，在这里不详细说明，这里只需要知道一点，瓦片数据是由地图服务发布的。

简单来说，就是相当于数据在服务器上，要访问数据必须要通过服务器来进行访问。

（2）查找地图瓦片资源

我使用的地图瓦片资源是来自------国家地理信息公共服务平台天地图

查找步骤

步骤1、点击图中左侧菜单中的的开发资源

步骤2、点击地图API中的影像底图

步骤3、锁定要使用的影像底图和影像注记（这里锁定经纬度投影）

步骤4、注册账号并创建项目生成key

图片第二步中的key名称就是我们所需要的key。

步骤4、准备好调用获取地图瓦片的服务连接（参数中要用到key）

vbnet 复制代码

// 卫星影像的服务链接
http://t0.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=您的密钥(就是创建项目后的key)

// 影像注记的服务链接
http://t0.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=您的密钥(就是创建项目后的key)

其实就是服务地址不同，并且后面参数中的LAYER的类型不同。

5、实现给卫星图上添加中文标注层

（1）准备好上一篇已经完成的卫星影像地图，我们卫星图就用basemap设置，Arcgis的卫星图和天地图的卫星图差不多是一样的，直接使用basemap设置比较容易。

（2）利用WebTileLayer创建标注图层

vue 复制代码

// 1、导入WebTileLayer
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";

// 2、创建标注图层
const layer = new WebTileLayer({
    // 天地图标注服务的链接
    urlTemplate: 'http://t0.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=d419f4158602636f22942a79a96a2325'
});

// 3、将图层添加到layers中
map.layers.add(layer);

6、结合上一篇效果的完整代码

vue 复制代码

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 7、导入WebTileLayer
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";

// 1、引入 地图 以及 视图
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";

// 4、地图容器定义
const map = ref<HTMLDivElement | undefined>(undefined);

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

// 创建地图函数
const createMap = () => {
  // 5、创建地图
  const myMap = new Map({
    basemap: "satellite" // basemap: 地图的底图  satellite：卫星图
  });

  // 6、创建视图
  const mapView = new MapView({
    map: myMap, // 创建的地图
    container: map.value, // 地图的容器
    zoom: 17, // 地图的缩放级别：1-19
    center: [108.942342, 34.260985], // 地图的中心点，当前中心点是西安钟楼
  });
  
  // 8、创建标注图层
  const layer = new WebTileLayer({
    // 天地图标注服务的链接
    urlTemplate: 'http://t0.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=d419f4158602636f22942a79a96a2325'
  });

  // 9、将图层添加到layers中
  myMap.layers.add(layer);
}
</script>

<template>
  <!-- 2、创建地图容器 -->
  <div class="map" ref="map"></div>
</template>

<style scoped>
/* 3、设置地图容器的样式 */
.map {
  width: 100vw;
  height: 100vh;
}
</style>

最终效果