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

vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务

本篇介绍一下使用vue3-openlayers加载天地图切片,三种方法:

  1. 使用tianditu(ol-source-tianditu内部实现其实用的wmts)
  2. 使用wmts(ol-source-wmts)
  3. 使用xyz(ol-source-xyz)

1 需求

  • vue3-openlayers加载天地图

2 分析

主要是不同类型source的使用

3 实现

3.1 ol-source-tianditu

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-viewref="view":center="center":rotation="rotation":zoom="zoom":projection="projection"/><ol-tile-layer><ol-source-tianditulayerType="img":projection="projection":tk="key":hidpi="true"ref="sourceRef" ></ol-source-tianditu></ol-tile-layer><ol-tile-layer><ol-source-tianditu:isLabel="true"layerType="img":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer><!-- 下面的注记加载等价于上面的 --><!-- <ol-tile-layer><ol-source-tianditulayerType="cia":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer> --></ol-map>
</template><script setup lang="ts">const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef=ref();
const key = '换成申请的天地图key';
const sourceRef = ref(null);
// layerType  img, vec, ter, cia, cta
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记onMounted(() => {const source = sourceRef.value?.source;// 调用source上的方法
});
</script>
<style scoped lang="scss">
</style>

3.2 wmts

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-viewref="view":center="center":rotation="rotation":zoom="zoom":projection="projection"/><ol-tile-layer><ol-source-wmtsref="sourceRef":attributions="attribution":url="url":projection="projection":matrixSet="matrixSet":format="format":layer="layerImage":styles="styleName"></ol-source-wmts></ol-tile-layer><ol-tile-layer><ol-source-wmts:attributions="attribution":url="url_address":projection="projection":matrixSet="matrixSet":format="format":layer="layerAddress":styles="styleName"></ol-source-wmts></ol-tile-layer></ol-map>
</template><script setup lang="ts">
const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef = ref();
const format = ref('image/png');
const styleName = ref('default');
const attribution = ref('Tiles © <a href="https://www.tianditu.gov.cn/">天地图</a>');
const key = '换成申请的天地图key';
const sourceRef = ref(null);const layerImage = ref('img');
const layerAddress = ref('cia');
const matrixSet = ref('c');//c: 经纬度投影 w: 墨卡托投影
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记// 影像底图
const url = ref(`http://t{0-6}.tianditu.com/${layerImage.value}_${matrixSet.value}/wmts?tk=${key}`);
// 影像注记
const url_address = ref(`http://t{0-6}.tianditu.com/${layerAddress.value}_${matrixSet.value}/wmts?tk=${key}`
);onMounted(() => {const map=mapRef.value?.mapconst source = sourceRef.value?.source;
});
</script>
<style scoped lang="scss"></style></script>
<style scoped lang="scss">
</style>

3.3 xyz

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-viewref="view":center="center":rotation="rotation":zoom="zoom":projection="projection"/><ol-tile-layer><ol-source-xyz :projection="projection" :url="imageUrl" /></ol-tile-layer><ol-tile-layer :opacity="0.9"><ol-source-xyz :projection="projection" :url="addressUrl" /></ol-tile-layer></ol-map>
</template><script setup lang="ts">
const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef = ref();
const key = '换成申请的天地图key';
const sourceRef = ref(null);const layerImage = ref('img');
const layerAddress = ref('cia');
const matrixSet = ref('c');//c: 经纬度投影 w: 墨卡托投影
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记// 影像底图
const imageUrl = ref(`https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerImage.value}_${matrixSet.value}&tk=${key}&x={x}&y={y}&l={z}`
);
// 影像注记
const addressUrl = ref(`https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerAddress.value}_${matrixSet.value}&tk=${key}&x={x}&y={y}&l={z}`
);onMounted(() => {const map = mapRef.value?.map;const source = sourceRef.value?.source;
});
</script>
<style scoped lang="scss"></style>

加载注记图层后,切片虽然显示png,但是好像不是透明的,只能在注记图层增加透明度控制

相关文章:

vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务

本篇介绍一下使用vue3-openlayers加载天地图切片&#xff0c;三种方法&#xff1a; 使用tianditu&#xff08;ol-source-tianditu内部实现其实用的wmts&#xff09;使用wmts&#xff08;ol-source-wmts&#xff09;使用xyz&#xff08;ol-source-xyz&#xff09; 1 需求 vue…...

npm、yarn、pnpm 最新国内镜像源设置和常见问题解决

1. npm 设置国内镜像源 1.1 镜像源概述 镜像源是软件包管理工具用来下载和安装软件包的服务器地址。由于网络原因&#xff0c;直接使用官方源可能会导致速度慢或连接失败的问题。国内镜像源可以提供更快的访问速度和更稳定的连接。 1.2 镜像源的选择 国内有许多可用的npm镜…...

Qt Object:智能即时聊天室项目

目录 1.项目介绍 2.设计思路 3.Pro文件配置 4.项目演示 5.项目开源 项目介绍 智能即时聊天室系统&#xff08;AIChatProject&#xff09;是一个高效、灵活的即时通讯解决方案。它融合了百度的开源大型语言模型——文心一言&#xff0c;通过API接口实现深度集成。系统专为聊天和…...

php,python aes加密反解

1. python版本 import base64 from Crypto.Cipher import AES from Crypto.Util.Padding import pad, unpadclass AESUtilCBC:def __init__(self, key, iv):self.key key.encode(utf-8)self.iv iv.encode(utf-8)self.pad_length AES.block_sizedef encrypt(self, data):try…...

基于Java学生选课管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…...

阅读笔记——《Large Language Model guided Protocol Fuzzing》

【参考文献】Meng R, Mirchev M, Bhme M, et al. Large language model guided protocol fuzzing[C]//Proceedings of the 31st Annual Network and Distributed System Security Symposium (NDSS). 2024.&#xff08;CCF A类会议&#xff09;【注】本文仅为作者个人学习笔记&a…...

C#委托:事件驱动编程的基石

目录 了解委托 委托使用的基本步骤 声明委托(定义一个函数的原型&#xff1a;返回值 参数类型和个数&#xff09; 根据委托定义的函数原型编写需要的方法 创建委托对象&#xff0c;关联“具体方法” 通过委托调用方法&#xff0c;而不是直接使用方法 委托对象所关联的方…...

Git的下载安装及可视化工具小乌龟

一、 Git 的下载 第1步&#xff1a;下载Git&#xff0c;下载地址&#xff1a;Git for Windows 这个就需要去 Git 官网下载对应系统的软件了&#xff0c;下载地址为 git-scm.com或者gitforwindows.org&#xff0c;或者阿里镜像&#xff08;感谢评论区的星悸迷航同学&#…...

【面试实战】# 并发编程之线程池配置实战

1.先了解线程池的几个参数含义 corePoolSize (核心线程池大小): 作用: 指定了线程池维护的核心线程数量&#xff0c;即使这些线程处于空闲状态&#xff0c;它们也不会被回收。用途: 核心线程用于处理长期的任务&#xff0c;保持最低的线程数量&#xff0c;以减少线程的创建和…...

Pytest 读取excel文件参数化应用

本文是基于Pytest框架&#xff0c;读取excel中的文件&#xff0c;传入页面表单中&#xff0c;并做相应的断言实现。 1、编辑媒体需求 首先明确一下需求&#xff0c;我们需要对媒体的表单数据进行编辑&#xff0c;步骤如下&#xff1a; 具体表单如下图所示 1、登录 2、点击我…...

qt 一个可以拖拽的矩形

1.概要 2.代码 2.1 mycotrl.h #ifndef MYCOTRL_H #define MYCOTRL_H#include <QWidget> #include <QMouseEvent>class MyCotrl: public QWidget {Q_OBJECT public://MyCotrl();MyCotrl(QWidget *parent nullptr); protected:void paintEvent(QPaintEvent *even…...

C# 启动exe 程序

(1) publicbool Start () System.Diagnostics.Process process new System.Diagnostics.Process(); process.StartInfo.FileName "iexplore.exe"; //IE浏览器&#xff0c;可以更换 process.StartInfo.Arguments "http://www.baidu.com"; process.…...

Netty中的Reactor模型实现

Netty版本&#xff1a;4.1.17 Reactor模型是Doug Lea在《Scalable IO in Java》提出的&#xff0c;主要是针对NIO的。 其中的主从Reactor模式在Netty中的配置如下&#xff1a; EventLoopGroup bossGroup new NioEventLoopGroup(1); EventLoopGroup workerGroup new NioEv…...

dll丢失应该怎么解决,总结5种解决DLL丢失问题的方法

在数字时代&#xff0c;我们与计算机的每一天都密不可分。然而&#xff0c;就像所有技术产品一样&#xff0c;我们的计算设备也时不时地会出现一些问题&#xff0c;让人头疼不已。就在上周&#xff0c;我遭遇了一个令人崩溃的技术挑战——DLL文件丢失。这个看似微不足道的小问题…...

dial tcp 10.96.0.1:443: connect: no route to host

1、创建Pod一直不成功&#xff0c;执行kubectl describe pod runtime-java-c8b465b98-47m82 查看报错 Warning FailedCreatePodSandBox 2m17s kubelet Failed to create pod sandbox: rpc error: code Unknown desc failed to setup network for…...

VScode创建ROS项目 ROS集成开发环境

ROS使用VScode创建项目步骤 1.创建ROS工作空间2.启动VScode3.VScode编译ROS4.创建ROS功能包C语言开发Python语言开发 本文章介绍了如何在Ubuntu18.04系统下搭建VScode 的ROS项目 搭建项目分为一下几个步骤&#xff1a; 1.创建ROS工作空间 创建一个demo的ROS工作空间&#xff0…...

nodejs从基础到实战学习笔记-nodejs简介

一、Node.js简介 • Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。 • Node采用Google开发的V8引擎运行js代码&#xff0c;使用事件驱动、非阻塞和异步I/O模型等技术来提高性能&#xff0c;可优化应用程序的传输量和规模。 1.1 特性 …...

2024年最新版------二进制安装部署Kubernetes(K8S)集群

Kubernetes二进制集群部署 文章目录 Kubernetes二进制集群部署资源列表基础环境一、环境准备1.1、绑定映射关系1.2、所有主机安装Docker1.3、所有主机设置iptables防火墙 二、生成通信加密证书2.1、master上成功CA证书2.2.1、创建证书存放位置并安装证书生成工具2.2.2、拷贝证书…...

【mysql】关键词搜索实现

关键词搜索实现两种方式 -- 方式1 模糊匹配搜索 -- 场景一&#xff1a;搜索出来地址内包含‘李’和‘中国’的 select * from tn_md_cust_link where address like concat (%李%) or address like concat (%中国%) -- 场景二&#xff1a;搜索地址或者名称包含 ‘181’ 的 …...

Python面试十问2

一、如何使用列表创建⼀个DataFrame # 导入pandas库 import pandas as pd# 创建一个列表&#xff0c;其中包含数据 data [[A, 1], [B, 2], [C, 3]]# 使用pandas的DataFrame()函数将列表转换为DataFrame df pd.DataFrame(data, columns[Letter, Number]) # 列名# 显示创建的…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...