二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据

官网demo地址:

 

https://openlayers.org/en/latest/examples/data-tiles.html

这篇示例讲解的是自定义加载DataTile源格式的数据。

先来看一下什么是DataTile,这个源是一个数组,与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成、处理或渲染瓦片数据的复杂场景。

先新建一个canvas,设置一下画布参数。

   //256x256 像素是瓦片图层的常见尺寸const size = 256;const canvas = document.createElement("canvas");canvas.width = size;canvas.height = size;const context = canvas.getContext("2d");//设置描边颜色为白色。context.strokeStyle = "white";//设置文本对齐方式为居中context.textAlign = "center";//设置字体为 24 像素的无衬线字体。context.font = "24px sans-serif";//用于控制文本行高const lineHeight = 30;

 loader 是一个自定义数据加载函数,用于在需要时生成或获取瓦片数据。它的设计目的是为了处理动态生成的或特定格式的数据,比如在运行时计算或从非标准源获取的数据。

new TileLayer({source: new DataTile({loader: function (z, x, y) {const half = size / 2;//清除画布内容context.clearRect(0, 0, size, size);context.fillStyle = "rgba(100, 100, 100, 0.5)";//填充整个画布context.fillRect(0, 0, size, size);context.fillStyle = "red";//绘制文字context.fillText(`z: ${z}`, half, half - lineHeight);context.fillText(`x: ${x}`, half, half);context.fillText(`y: ${y}`, half, half + lineHeight);context.strokeRect(0, 0, size, size);//获取画布内容的像素数据const data = context.getImageData(0, 0, size, size).data;// 转换为Uint8Array以提高浏览器兼容性return new Uint8Array(data.buffer);},//禁用不透明度过渡,以避免在tile加载期间重叠标签transition: 0,}),}),

事实上,很多源都提供loader参数方便我们把获取的数据或地图路径经过二次处理之后再加载到地图上。而具体返回什么样的数据格式取决于源本身所接受的数据格式。

完整代码:

<template><div class="box"><h1>Data Tiles自定义绘制DataTile源数据</h1><div id="map"></div></div>
</template><script>
import DataTile from "ol/source/DataTile.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/WebGLTile.js";
import View from "ol/View.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {//256x256 像素是瓦片图层的常见尺寸const size = 256;const canvas = document.createElement("canvas");canvas.width = size;canvas.height = size;const context = canvas.getContext("2d");//设置描边颜色为白色。context.strokeStyle = "white";//设置文本对齐方式为居中context.textAlign = "center";//设置字体为 24 像素的无衬线字体。context.font = "24px sans-serif";//用于控制文本行高const lineHeight = 30;const map = new Map({target: "map",layers: [new TileLayer({source: new DataTile({loader: function (z, x, y) {const half = size / 2;//清除画布内容context.clearRect(0, 0, size, size);context.fillStyle = "rgba(100, 100, 100, 0.5)";//填充整个画布context.fillRect(0, 0, size, size);context.fillStyle = "red";//绘制文字context.fillText(`z: ${z}`, half, half - lineHeight);context.fillText(`x: ${x}`, half, half);context.fillText(`y: ${y}`, half, half + lineHeight);context.strokeRect(0, 0, size, size);//获取画布内容的像素数据const data = context.getImageData(0, 0, size, size).data;// 转换为Uint8Array以提高浏览器兼容性return new Uint8Array(data.buffer);},//禁用不透明度过渡,以避免在tile加载期间重叠标签transition: 0,}),}),],view: new View({center: [0, 0],zoom: 0,}),});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}#info {width: 100%;height: 24rem;overflow: scroll;display: flex;align-items: baseline;border: 1px solid black;justify-content: flex-start;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典面试题:MySQL如何调优?

目录 前言1. SQL查询优化2. 索引优化3. 表结构设计4. 硬件与配置优化5. 日常维护6. 性能测试与基准测试 前言 MySQL如何进行调优&#xff1f;这是面试中容易被问到的高频问题。 1. SQL查询优化 避免使用select* &#xff1a;只选取需要的列&#xff0c;减少数据传输量。使用…

Host头攻击-使用安全的Web服务器配置

Nginx配置示例 在Nginx中&#xff0c;你可以通过修改配置文件来验证HTTP Host头&#xff0c;确保它符合预期的值。以下是一个简单的配置示例&#xff1a; 1.添加HTTP Host头验证规则&#xff1a; 在Nginx的配置文件中&#xff0c;找到针对目标URL的相关配置块&#xff0c;并…

算法简单笔记2

5月26号&#xff0c;之前学了两天算法烦了&#xff0c;去学了几天鸿蒙&#xff0c;今天又回来看一下算法&#xff0c;距离6月1日国赛还有6天&#xff0c;哈哈真是等死咯...... 一、蓝桥杯第13届国赛第1题填空题&#xff1a;重合次数 &#xff08;半难不难&#xff0c;写编程难…

通过JavaScript本地存储数据

文章目录 本地存储本地存储分类 - localStorage本地存储分类 - sessionStorage存储复杂数据类型解决方法 本地存储 数据存储在用户浏览器中设置、读取方便、甚至页面刷新都不丢失数据容量较大&#xff0c;sessionStorage和localStorage约5M左右 本地存储分类 - localStorage …

探索演进:了解IPv4和IPv6之间的区别

探索演进&#xff1a;了解IPv4和IPv6之间的区别 在广阔的互联网领域中&#xff0c;设备之间的通信依赖于一组独特的协议来促进连接。前景协议中&#xff0c;IPv4&#xff08;Internet 协议版本 4&#xff09;和 IPv6&#xff08;Internet 协议版本 6&#xff09;是数字基础设施…

括号匹配数据结构

括号匹配是一种数据结构问题&#xff0c;用于检查给定的字符串中的括号是否匹配。例如&#xff0c;对于字符串 "((())())"&#xff0c;括号是匹配的&#xff0c;而对于字符串 "())("&#xff0c;括号是不匹配的。 常见的解决括号匹配问题的数据结构是栈。…

内存泄漏案例分享3-view的内存泄漏

案例3——view内存泄漏 前文提到&#xff0c;profile#Leaks视图无法展示非Activity、非Fragment的内存泄漏&#xff0c;换言之&#xff0c;除了Activity、Fragment的内存泄漏外&#xff0c;其他类的内存问题我们只能自己检索hprof文件查询了。 下面有一个极佳的view内存泄漏例子…

StringReader类,你学会了吗?

在 Java 编程中,StringReader 类是一个用于读取字符串的字符输入流。它可以将字符串转换为字符流,以便进行字符数据的读取和处理。 StringReader 类提供了一些便捷的方法,可以方便地从字符串中读取字符数据,并且具有良好的性能和可靠性。 本文将深入探讨 StringReader 类…

OrangePi AIpro开箱测评

OrangePi AIpro(8T) 香橙派联合华为精心打造&#xff0c;建设人工智能新生态 章节一&#xff1a;引言 1.1 背景 香橙派&#xff08;OrangePi&#xff09;是深圳市迅龙软件有限公司旗下开源产品品牌&#xff0c;迅龙软件成立于2005年&#xff0c;是全球领先的开源硬件和开源软…

初识C语言——第二十九天

数组 本章重点 1.一维数组的创建和初始化 数组的创建 注意事项&#xff1a; 1.一维由低数组在内存中是连续存放的&#xff01; 2.随着数组下标的增长&#xff0c;地址是由低到高变化的 2.二维数组的创建和初始化 注意事项&#xff1a; 1.二维数组在内存中也是连续存放的&am…

YOLOv8+PyQt5面部表情检测系统完整资源集合(yolov8模型,从图像、视频和摄像头三种路径识别检测,包含登陆页面、注册页面和检测页面)

1.资源包含可视化的面部表情检测系统&#xff0c;基于最新的YOLOv8训练的面部表情检测模型&#xff0c;和基于PyQt5制作的可视化面部表情检测系统&#xff0c;包含登陆页面、注册页面和检测页面&#xff0c;该系统可自动检测和识别图片或视频当中出现的八类面部表情&#xff1a…

211大学计算机专业不考408,新增的交叉专业却考408!南京农业大学计算机考研考情分析!

南京农业大学信息科技学院可追溯至1981年成立的计算中心和1985年筹建的农业图书情报专业。1987年设立了农业图书情报系&#xff0c;1993 年农业图书情报系更名为信息管理系&#xff0c;本科专业名称也于1999年更名为信息管理与信息系统专业。1994年计算中心开始招收计算机应用专…

开源网页视频会议,WebRTC音视频功能比较

1. 概述 OpenAI 发布了新一代旗舰生成模型 GPT-4o,这是一款真正的多模态大模型,可以「实时对音频、视觉和文本进行推理」。 支持与 AI 实时语音对话,且响应时间达到毫秒级;交互中可识别人类情绪并以相应的情感做出回应;多语言能力的提升,WebRTC 成为大模型关键能力。 视频会议…

theharvester一键收集域名信息(KALI工具系列十)

目录 1、KALI LINUX简介 2、theharvester工具简介 3、在KALI中使用theharvester 3.1 用搜索引擎扫描 3.2 扫描并输出结果 3.3 扫描某域名下的所有账号 3.4 使用所有的搜索引擎扫描 4、总结 1、KALI LINUX简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版&…

【Docker学习】详细讲解docker ps

docker ps是我们操作容器次数最多的命令之一&#xff0c;但我们往往使用docker ps或是docker ps -a&#xff0c;对于该命令的其它选项&#xff0c;我们关注比较少。那么这一讲&#xff0c;我给大家详细讲讲该命令的全部方法。 命令&#xff1a; docker container ls 描述&am…

【MySQL精通之路】SQL优化(1)-查询优化(10)-外部联接简化

主博客&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化-CSDN博客 上一篇&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化(9)-外部联接优化-CSDN博客 下一篇&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化(11)-多范围查询优化-CSDN博客 查询时FROM子句中的表达…

前后端项目部署和解决跨域

文章目录 一.前端项目部署1.1 上传前端文件1.2 项目部署1.3 解决跨域1.3.1 什么是跨域1.3.2 配置文件 二.后端项目部署2.1 上传后端文件2.2 项目部署2.3 解决跨域 一.前端项目部署 1.1 上传前端文件 站点创建好了&#xff0c;进入到站点的目录。 然后把它默认的文件删掉。 你…

2024.5.22 关于 SpringCloud —— Nacos 配置管理

目录 Nacos 配置统一管理 Nacos 配置热部署 Nacos 多环境配置共享 配置优先级 Nacos 配置统一管理 实例理解 我们想要利用 Nacos 在 user-service 的 application.yml 配置文件中新增配置项此处我们将新增配置日期格式为 yyyy-MM-dd HH:mm:ss下图为新增 Nacos 配置统一管理…

Redis篇 String

String概念和set,get扩充 一. String类型的基本介绍二. String中set,get方法扩充 一. String类型的基本介绍 redis中所有的key都是字符串类型的,但是value的类型差异很大. redis中的字符串,直接就是二进制方式存储的,可以存储整数,二进制数据 文本数据,Json,xml还有音频等. 二.…