当前位置: 首页 > news >正文

Vue2+OpenLayers调用WMTS服务初始化天地图示例

目录

一、案例截图

二、安装OpenLayers库

三、WMTS服务详解

四、完整代码

五、Gitee源码


一、案例截图

二、安装OpenLayers库

npm install ol

三、WMTS服务详解

WMTS(Web Map Tile Service)是一种标准的网络地图服务协议,用于提供基于瓦片的地图数据。它允许客户端请求地图的具体区域,并将相应的瓦片整合在一起。WMTS的主要优点在于其高效性,能够快速加载和显示地图。

1、layer:指定所请求的地图图层。可以是基础地图图层或叠加图层。

2、style:图层的样式。通常用于定义地图的外观,可以使用默认样式或自定义样式。

3、tilematrixset:指定瓦片矩阵集,定义了地图的缩放层级和瓦片的排列方式。

4、Service:服务指定为WMTS。

5、Request:表示请求的类型,常见的请求包括 GetCapabilities(获取服务能力)、GetTile(获取指定瓦片)等。

6、Version:指定 WMTS 协议的版本,如 1.0.0。

7、Format:表示请求的数据格式,常见的如 image/png、image/jpeg 等。

8、TileMatrix:当前请求的瓦片矩阵,表示具体的缩放级别。

9、TileCol:指定请求的瓦片行。

10、TileRow:指定请求的瓦片列。

请求参数示例截图:

这样就能成功获取到其中一部分瓦片:

四、完整代码

<template><div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);
}let map;
export default {data() {return {}},mounted(){this.initMap() // 加载矢量底图},methods:{initMap() {const KEY = '你申请的KEY'map = new Map({target: 'map-container',layers: [// 底图new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,layer: 'vec', // 矢量底图matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影style: "default",crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加format: "tiles", //请求的图层格式,这里指定为瓦片格式wrapX: true, // 允许地图在 X 方向重复(环绕)tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})}),// 标注new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,layer: 'cva', //矢量注记matrixSet: 'c',style: "default",crossOrigin: 'anonymous',format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})})],view: new View({center: [113.082753,28.180449],projection: projection,zoom: 12,maxZoom: 17,minZoom: 1}),//加载控件到地图容器中controls: defaultControls({zoom: false,rotate: false,attribution: false})})}}
}
</script>
<style scoped>
#map-container {width: 100%;height: 100vh;
}
</style>

补充一下: 

WMTSTileGrid: 这个类用于创建一个瓦片网格,通常用于 Web 地图应用,方便进行地图切片的处理和显示。

origin: 设置瓦片网格的原点,通常是地图的左上角坐标。在这里,getTopLeft(projectionExtent) 是一个函数调用,返回投影范围的左上角坐标。

resolutions: 这是一个数组,定义了每个缩放级别的分辨率。分辨率通常表示地图上单位长度对应于地理坐标的比例,影响地图的细节显示。

matrixIds: 这是一个数组,定义了不同缩放级别的矩阵 ID。在瓦片服务中,矩阵 ID 用于标识每个级别的瓦片位置和组织方式。此处 ID 从 '0' 到 '18',表示 19 个不同的缩放级别。

这段代码是在设置一个地图的瓦片网格,以便将地图切片以不同的分辨率和缩放级别展现出来。

五、Gitee源码

Vue2+OpenLayers调用WMTS服务初始化天地图示例


http://www.mrgr.cn/news/83440.html

相关文章:

  • 从零搭建SpringBoot3+Vue3前后端分离项目基座,中小项目可用
  • 2025 年前端开发现状分析:卷疯了还是卷麻了?
  • 【AI时代】-开发环境准备 之 Conda 创建 Python 环境 (含pip常用命令、jupyter 安装及汉化、自定义文档位置等配置)
  • uniapp访问django目录中的图片和视频,2025[最新]中间件访问方式
  • Docker安装pypiserver私服
  • 机器学习 —— 深入剖析线性回归模型
  • git lfs
  • Docker 基础知识
  • Flyte工作流平台调研(四)——服务部署
  • 【数据分析】一、初探 Numpy
  • 计算机视觉算法实战——视频分析(Video Analysis)
  • 【Vim Masterclass 笔记09】S06L22:Vim 核心操作训练之 —— 文本的搜索、查找与替换操作(第一部分)
  • SpringCloud项目搭建快速入门
  • CentOS 7 下 MySQL 5.7 的详细安装与配置
  • C语言程序环境和预处理详解
  • 模拟闯红灯的抓拍系统
  • RabbitMQ高级篇
  • LeetCode 热题 100 | 双指针
  • 【数据结构】第1天之Java中的数据结构
  • 【MySQL学习笔记】MySQL视图View
  • C语言中两个不同类型的结构体相互赋值
  • ffmpeg 常用命令 案例
  • word中电流符号i或者j,这两个字母的头上的点会消失---完美解决办法
  • AI人工智能(3):Python 入门机器学习
  • fisco bcos CRUD编写合约的注意点
  • 【应用篇】09.自主Shell命令行解释器