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>
  • 最终效果
相关推荐
EricWang13582 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning2 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人12 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂34 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石42 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程44 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js