五十三、openlayers官网示例Layer Spy解析——跟随鼠标透视望远镜效果、图层剪裁

官网demo地址:

Layer Spy

 这篇实现了鼠标跟随望远镜效果,鼠标移动时绘制一个圆形的剪裁区剪裁上层图层。

container.addEventListener("mousemove", function (event) {mousePosition = map.getEventPixel(event);map.render();});container.addEventListener("mouseout", function () {mousePosition = null;map.render();});

通过map.render()触发prerender,postrender两个函数来完成裁剪,其原理和上篇的卷帘效果一样。

上篇地址: 

 完整代码:

<template><div class="box"><h1>Layer Spy</h1><div id="map" class="map"></div></div>
</template><script>
import StadiaMaps from "ol/source/StadiaMaps.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";
import { fromLonLat } from "ol/proj.js";
import { getRenderPixel } from "ol/render.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const container = document.getElementById("map");const layer = new TileLayer({source: new StadiaMaps({layer: "stamen_terrain_background",}),zIndex: 2,});const map = new Map({layers: [layer,new TileLayer({source: new StadiaMaps({layer: "outdoors",}),}),],target: "map",view: new View({center: [0, 0],zoom: 2,projection: "EPSG:4326",}),});let radius = 75;document.addEventListener("keydown", function (evt) {if (evt.key === "ArrowUp") {radius = Math.min(radius + 5, 150);map.render();evt.preventDefault();} else if (evt.key === "ArrowDown") {radius = Math.max(radius - 5, 25);map.render();evt.preventDefault();}});let mousePosition = null;container.addEventListener("mousemove", function (event) {mousePosition = map.getEventPixel(event);map.render();});container.addEventListener("mouseout", function () {mousePosition = null;map.render();});layer.on("prerender", function (event) {const ctx = event.context;ctx.save();ctx.beginPath();if (mousePosition) {const pixel = getRenderPixel(event, mousePosition);const offset = getRenderPixel(event, [mousePosition[0] + radius,mousePosition[1],]);const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);ctx.lineWidth = (5 * canvasRadius) / radius;ctx.strokeStyle = "rgba(0,0,0,0.5)";ctx.stroke();}ctx.clip();});layer.on("postrender", function (event) {const ctx = event.context;ctx.restore();});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}</style>

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

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

相关文章

【windows|009】计算机网络基础知识

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…

代码评审——Java占位符%n的处理

问题描述 在软件开发项目中&#xff0c;特别是在处理动态内容生成与呈现至前端界面的过程中&#xff0c;正确运用占位符以确保文本完整性和数据准确性显得尤为重要。不当的占位符管理不仅可能导致语法错误或逻辑混乱&#xff0c;还会引发一系列隐蔽的问题&#xff0c;这些问题…

ASP.NET Core 6.0 多种部署方式

IIS 环境准备和部署 安装并配置 IIS 安装 IIS&#xff0c;在搜索输入并打开 启用或关闭 Windows 功能。 配置IIS 需要配置 ASPNETCore 部署IS 程序包安装 &#xff08;ASP.NET Core Module v2&#xff09; Download .NET 6.0 (Linux, macOS, and Windows).NET 6.0 downloads…

人工智能如何助力人才招聘方式改变

尽管全球经济不稳定&#xff0c;但在当今的就业市场上&#xff0c;招聘顶尖人才仍然竞争激烈&#xff0c;企业很难找到优质人才。明智的人才招聘团队会将人工智能融入日常招聘流程当中&#xff0c;借助人工智能工具或智能招聘系统&#xff08;如大易招聘管理系统&#xff09;&a…

Kafka第一篇——内部组件概念架构启动服务器zookeeper选举以及底层原理

目录 引入 ——为什么分布式系统需要用第三方软件&#xff1f; JMS 对比 组件 架构推演——备份实现安全可靠 &#xff0c; Zookeeper controller的选举 controller和broker底层通信原理 BROKER内部组件 ​编辑 topic创建 引入 ——为什么分布式系统需要用第三方软件&#…

收费4980的AI批量混剪,素材技术方法工具配套,详细拆解!

前几天有朋友跟我讲&#xff0c;他说有做旅游卡的&#xff0c;他们收费4980元&#xff0c;给500张卡&#xff0c;送AI批量混剪技术&#xff0c;问我们有没有&#xff1f; 批量混剪技术&#xff0c;这个其他早在2022年的时候我们就已经使用了。有开通抖音企业号的朋友都知道&am…

[leetcode 27移除元素]双指针

Problem: 27. 移除元素 文章目录 思路Code 思路 使用双指针 第一个指针,遍历整个数组 第二个指针,当第一个指针遍历到不等于val值时,将其赋给第一个指针所指的位置 并且每赋值一个,第二个指针向后移动一个 最后第二个指针的长度就是结果 Code class Solution {public int remo…

太牛了!AI换脸数字人,限制解除,免费用!

哈喽&#xff0c;各位小伙伴们好&#xff0c;我是给大家带来各类黑科技与前沿资讯的小武。 今天给大家安利一款美图公司出品的神器&#xff0c;功能限制完全解除&#xff0c;可以免费使用AI换脸数字人、AI提词器、AI脚本、AI抠图、AI清除、AI封面等超多超实用功能&#xff0c;…

抖音商城618好物节消费数据报告发布,带货成交额同比增长300%

6月21日&#xff0c;“抖音商城618好物节”消费数据报告发布&#xff0c;呈现618期间平台全域经营情况及大众消费趋势。 今年618大促活动中&#xff0c;抖音电商投入流量资源和消费券&#xff0c;鼓励商家、达人双向经营货架场景和内容场景&#xff0c;不断激活消费市场。 报…

SEGGER Embedded Studio IDE移植embOS

SEGGER Embedded Studio IDE移植embOS 一、背景介绍二、任务目标三、技术实现3.1 获得embOS3.2 创建SES工程3.2.1 创建初始Solution和Project3.2.2 制作项目文件结构3.2.3 移植embOS库和有关头文件3.2.3.1 头文件3.2.3.2 库文件3.2.3.3 创建RTOSInit.c源文件3.2.3.4 OS_Error.c…

Golang——channel

channel是Go在语言层面提供的协程间的通信方式。通过channel我们可以实现多个协程之间的通信&#xff0c;并对协程进行并发控制。 使用注意&#xff1a; 管道没有缓冲区时&#xff0c;从管道中读取数据会阻塞&#xff0c;直到有协程向管道中写入数据。类似地&#xff0c;向管道…

生产实习Day9 ---- Scala介绍

文章目录 Scala&#xff1a;融合面向对象与函数式编程的强大语言引言Scala与Java的互操作性Scala在大数据处理中的应用Scala的并发编程Scala的学习资源和社区结论 Scala&#xff1a;融合面向对象与函数式编程的强大语言 引言 Scala&#xff0c;全称Scalable Language&#xff…

创新案例|星巴克中国市场创新之路: 2025目标9000家店的挑战与策略

星巴克创始人霍华德舒尔茨&#xff1a;“为迎接中国市场的全面消费复苏&#xff0c;星巴克2025年推进9000家门店计划&#xff0c;将外卖、电商以及家享和外出场景咖啡业务纳入中国新一轮增长计划中。”在面临中国市场同店增长大幅下滑29%背景下&#xff0c;星巴克通过DTC用户体…

【管理咨询宝藏134】麦肯锡咨询公司为DB物流公司价格体系优化设计方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏134】麦肯锡咨询公司为DB物流公司价格体系优化设计方案 【格式】PDF版本 【关键词】麦肯锡、物流、价格战略、定价体系 【核心观点】 - 与竞争对…

【mysql 安装启动失败】 没有网下 libssl.so.10 not found 如何解决?

问题描述&#xff1a; libssl.so.10 > not found libcrypto.so.10 > not found [rootmysql tools]# ls -l /usr/sbin/mysqld -rwxr-xr-x. 1 root root 64290024 Sep 14 2022 /usr/sbin/mysqld [rootmysql tools]# ldd /usr/sbin/mysqldlinux-vdso.so.1 (0x00007fff97105…

拒绝零散碎片, 一文理清MySQL的各种锁

系列文章目录 学习MySQL先有全局观&#xff0c;细说其发展历程及特点 Mysql常用操作&#xff0c;谈谈排序与分页 拒绝零散碎片&#xff0c; 一文理清MySQL的各种锁&#xff08;收藏向&#xff09; 系列文章目录一、MySQL的锁指什么二、排他与共享三、全局锁&#xff08;Global…

【C++】数据类型、函数、头文件、断点调试、输入输出、条件与分支、VS项目设置

四、基本概念 这部分和C语言重复的部分就简写速过&#xff0c;因为我之前写过一个C语言的系列&#xff0c;非常详细。C和C这些都是一样的&#xff0c;所以这里不再一遍遍重复码字了。感兴趣的同学可以翻看我之前的C语言系列文章。 1、数据类型 编程的本质就是操作数据。 操…

从零入手人工智能(4)—— 逻辑回归

1.小故事 一家金融科技公司&#xff0c;公司的首席执行官找到团队提出了一个紧迫的问题&#xff1a;“我们如何提前知道哪些客户可能会违约贷款&#xff1f;” 这让团队陷入了沉思&#xff0c;经过激烈讨论团队中的数据分析师提议&#xff1a;“我们可以尝试使用逻辑回归来预测…

基于51单片机的函数信号发生器

基于51单片机函数信号发生器 &#xff08;仿真&#xff0b;程序&#xff0b;原理图&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.LCD1602液晶显示波形种类和频率值&#xff08;10-100HZ&#xff09;&#xff1b; 2.按键设置波形种类和设定频率步进值…

UE5近战对抗系统Tutorial

文章目录 BP_Character 组合攻击Notify State 检测攻击BP_Character 攻击反馈BP_Character 生命系统BP_Character 死亡效果BP_Character 武器系统BP_Enemy 初始化和行为树 BP_Character 组合攻击 首先我们获取攻击动画&#xff0c;在这里使用的是 Easy Combo Buffering 的攻击…