上一篇实现了创建地图为卫星图的地图,并且尝试设置一些地图的基础参数,但是只有卫星图,我们不知道图上的某个位置到底是哪个地方,这个时候就需要在卫星图上添加标注图层,标注上道路名称以及地方名称,这样就一目了然。
但是有一点让人比较困扰,Arcgis提供的路线图等都是英文的,也或许是我没有找到。但是没有关系,既然找不到现成的,那就自己实现一个呗。接下来就是实现给卫星图上添加标注涂层的过程:
1、了解地图的图层
我们平常看到的地图(例如:百度地图、高德地图)其实都是由多个图层组成,比如说看地图时能看到建筑物位置、路网、地点标注等等,都是由多个图层进行叠加显示的。看一下下面的图可能会更清晰一点:
- 西安钟楼卫星图
- 西安钟楼标注图
- 西安钟楼卫星+标注(也就是本次要实现的效果)
2、Arcgis中的图层——layers
Arcgis中可以加载很多类型的图层:WebTileLayer、FeatureLayer、GraphicLayer等等。
上一篇实现了创建地图,我们在Arcgis中创建的Map实例,还使用了basemap设置了底图,实际Map实例有一个叫做layers的集合参数,所有的图层都保存在layers中,我们也可以通过layers来设置图层。
- 下方的案例,可能会更加清晰:
案例一:在创建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'
});
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方法添加图层影像
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)
// 卫星影像的服务链接
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创建标注图层
// 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、结合上一篇效果的完整代码
<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>
- 最终效果
原文链接:https://juejin.cn/post/7347911052170002468 作者:_瑶瑶_