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

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

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

1、了解地图的图层

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

  • 西安钟楼卫星图

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

  • 西安钟楼标注图

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

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

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

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、点击图中左侧菜单中的的开发资源

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

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

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

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

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

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

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

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

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

图片第二步中的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>
  • 最终效果

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

原文链接:https://juejin.cn/post/7347911052170002468 作者:_瑶瑶_

(0)
上一篇 2024年3月19日 下午4:00
下一篇 2024年3月19日 下午4:12

相关推荐

发表回复

登录后才能评论