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

openlayer 鼠标点击船舶,打开船舶简单弹框

背景:

对创建的地图对象,可以添加上监听事件,常用的有:地图点击事件、鼠标移动事件。

通过监听这些事件,又可以区分不同图层的不同要素,获取不同数据;

根据这些数据,又可以发起网络请求、打开另一个弹框等后续操作。

在这里,主要介绍对船舶的不同点击或鼠标移动事件,二者的实现思路,仅供参考。

效果展示:

船舶的点击效果:点击船舶,选中的船舶添加上选中效果,是一个红色框。2.选中弹框更详细

船舶的鼠标移动效果:当鼠标移动到船舶对象上,选中的船舶变成选中效果,是原来船舶黑色边框变为红色边框,代表选中。 2.选中弹框包括一下基础信息。

一、监听地图对象的点击事件

1.监听鼠标点击

    //覆盖图层点击事件MAPutils.GlobalMap.on('singleclick', function (e) {...方法体...})

2. 鼠标点击触发的方法

判断鼠标移动的地图对象是否存在。接着判断是哪一个图层,根据不同图层,触发不同是事件。这里自定义了一个事件featureClick(参数1,参数2).
不同的实现思路,不同的代码

   /*** 图层点击事件* @return {Function}*/featureClick: (function () {var _layerType = {...// 船舶图层shipLayer: function (feature, offset) {// MAPutils.shipPop(feature.getId(), offset);MAPutils.drawFocus({ id: feature.getId(), layer: MAPutils.shipLayer });MAPutils.openShipDetailsV2(feature.getId());},...}return function (feature, e) {var authId = feature.get('authId');// 如果此按钮是需要校验权限的并且此用户无权限,直接returnif (authId && !WGAuth.click('button', authId))return;var layerType = feature.get("layerType"),offset = MAPutils.getLayerPixel(e);_layerType[layerType] && _layerType[layerType](feature, offset, e);}})(),

 3.打开详细的船舶弹框

此处省略具体方法

openShipDetailsV2:function(){

  //方法体

主要是根据参数发起网络请求、打开详情弹框、在详情弹框中的操作等等

}

以上是鼠标点击的省略思路,参照上面的,这篇文章主要详细介绍鼠标移上船舶、移下船舶的具体实现思路。。。 

二、监听地图对象的鼠标移动事件pointermove

1.监听鼠标移动

MAPutils.GlobalMap.on('pointermove', function (e) {if(e.dragging){return}const pixel = MAPutils.GlobalMap.getEventPixel(e.originalEvent);const hit = MAPutils.GlobalMap.hasFeatureAtPixel(pixel);if (hit) {MAPutils.GlobalMap.getTargetElement().style.cursor = 'pointer';var feature = MAPutils.GlobalMap.forEachFeatureAtPixel(e.pixel,function (feature) {return feature;});if (feature && feature.get("layerType") == "shipLayer") {if(feature !== MAPutils.oldFeature){MAPutils.oldFeature = featureMAPutils.featureMove(feature, e);}}else{MAPutils.oldFeature = nullMAPutils.oldMmsi = null}}else{MAPutils.GlobalMap.getTargetElement().style.cursor = 'default';//关闭弹框MAPutils.DialogIndex && layer.close(MAPutils.DialogIndex || 0);}});

核心代码:

触发打开船舶简介弹框的核心代码:

       if (feature && feature.get("layerType") == "shipLayer") {if(feature !== MAPutils.oldFeature){MAPutils.oldFeature = featureMAPutils.featureMove(feature, e);}}else{MAPutils.oldFeature = nullMAPutils.oldMmsi = null}
备注:判断鼠标移动的地图对象是否存在。接着判断是哪一个图层,根据不同图层,
触发不同是事件。这里自定义了一个事件featureMove(参数1,参数2).
特别说明:这里还做了一个防抖处理。因为鼠标移动事件触发很频繁。并且鼠标摸船
显示弹框,鼠标移开关闭弹框。我这里通过两个变量来做的防抖。
不同的实现思路,不同的代码、

2.鼠标移动触发的方法

封装代码:

/*** 图层点击事件* @return {Function}*/featureMove: (function () {var _layerType = {//鼠标移动到船舶上shipLayer: function (feature, offset) {var myFeature = feature.get('data')var myColor = MAPutils.getAisColor(myFeature.aisType)let _style = new ol.style.Style({stroke: new ol.style.Stroke({color: '#FF6B6B',width: 2}),fill: new ol.style.Fill({color: myColor})});feature.setStyle(_style);MAPutils.shipTipPop(feature.getId(), offset);}};return function (feature, e) {var authId = feature.get('authId');// 如果此按钮是需要校验权限的并且此用户无权限,直接returnif (authId && !WGAuth.click('button', authId))return;var layerType = feature.get("layerType"),offset = MAPutils.getLayerPixel(e);_layerType[layerType] && _layerType[layerType](feature, offset, e);}})(),

3.打开船舶详情弹框

 核心代码:

   /*** 船舶tips弹窗* @param   id 船舶的id(mmsi)* @param  {Array} offset 弹窗位置*/shipTipPop: function (id, offset) {var data = {};var myTimer = 1000;if(MAPutils.oldMmsi !== id){MAPutils.oldMmsi = id}else{return;}debounce(function () {$.post('ship/getByMMSI', { mmsi: id }, function (res) {if (res.code == 200 && !!res.data) {data = res.data}...//根据结果渲染弹框...

相关文章:

openlayer 鼠标点击船舶,打开船舶简单弹框

背景: 对创建的地图对象,可以添加上监听事件,常用的有:地图点击事件、鼠标移动事件。 通过监听这些事件,又可以区分不同图层的不同要素,获取不同数据; 根据这些数据,又可以发起网络请…...

数据挖掘常见算法(关联)

Apriori算法 Apriori算法基于频繁项集性质的先验知识,使用由下至上逐层搜索的迭代方法,即从频繁1项集开始,采用频繁k项集搜索频繁k1项集,直到不能找到包含更多项的频繁项集为止。 Apriori算法由以下步骤组成,其中的核…...

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以…...

Redis Stream Redisson Stream

目录 一、Redis Stream1.1 场景1:多个客户端可以同时接收到消息1.1.1 XADD - 向stream添加Entry(发消息 )1.1.2 XREAD - 从stream中读取Entry(收消息)1.1.3 XRANGE - 从stream指定区间读取Entry(收消息&…...

threadX netx 设置IP地址以及获取IP地址

ThreadX 是一个实时操作系统(RTOS)内核,而 NetX 则是 Express Logic 提供的一个嵌入式 TCP/IP 网络栈,它经常与 ThreadX 一起使用来提供网络功能。在 ThreadX 和 NetX 中设置和获取 IP 地址通常涉及几个步骤。 设置 IP 地址 初始…...

计算机毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计

测试过程及结果 本次对于医生推荐系统测试通过手动测试的方式共进行了两轮测试。 (1)第一轮测试中执行了个20个测试用例,通过16个,失败4个,其中属于严重缺陷的1个,属于一般缺陷的3个。 (2&am…...

lammps已经运算结束,有数据忘记算:rerun 命令

需要的文件 1、模拟运算的所有文件(模型 、in文件、力场文件) 2、模拟计算所得到的dump文件(原子轨迹文件) rerun命令的使用(修改in文件) 1、删除or注释掉 输出dump文件的那一行命令 2、加上需要补充计…...

CARLA自动驾驶模拟器基础

CARLA 使用服务器-客户端架构运行,其中 CARLA 服务器运行模拟并由客户端向其发送指令。客户端代码使用 API 与服务器进行通信。要使用 Python API,您必须通过 PIP 安装该模块: pip3 install carla-simulator # Python 3World and client 客…...

华为HCIP Datacom H12-821 卷16

1.判断题 在 VRRP 中,当设备状态变为 Master 后,,会立刻发送免费 ARP 来刷新下游设备的 MAC 表项,从而把用户的流量引到此台设备上来 A、对 B、错 正确答案: A 解析: 2.判断题 路由选择工具 route- policy 能够基于预先定义的条件来进行过滤并设置 BGP...

Python学习打卡:day17

day17 笔记来源于:黑马程序员python教程,8天python从入门到精通,学python看这套就够了 目录 day17121、Python 操作 MySQL 基础使用pymysql创建到 MySQL 的数据库链接执行 SQL 语句执行非查询性质的SQL语句执行查询性质的SQL语句 122、Pyth…...

Spring Cloud Gateway 与 Nacos 的完美结合

在现代微服务架构中,服务网关扮演着至关重要的角色。它不仅负责路由请求到相应的服务,还承担着诸如负载均衡、安全认证、限流熔断等重要功能。Spring Cloud Gateway 作为 Spring Cloud 生态系统中的一员,以其强大的功能和灵活的配置&#xff…...

vue2 element ui 表单 动态增加表单项 表单项值不可重复 select多选

案例 <template><el-form :model"form" ref"form" label-width"70px"><el-form-item><el-button icon"el-icon-plus" type"primary" plain click"add">新增</el-button><el-b…...

[数据集][目标检测]电力场景下电柜箱门把手检测数据集VOC+YOLO格式1167张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1167 标注数量(xml文件个数)&#xff1a;1167 标注数量(txt文件个数)&#xff1a;1167 标注…...

OverTheWire Bandit 靶场通关解析(上)

介绍 OverTheWire Bandit 是一个针对初学者设计的网络安全挑战平台&#xff0c;旨在帮助用户掌握基本的命令行操作和网络安全技能。Bandit 游戏包含一系列的关卡&#xff0c;每个关卡都需要解决特定的任务来获取进入下一关的凭证。通过逐步挑战更复杂的问题&#xff0c;用户可…...

【Python实战因果推断】4_因果效应异质性4

目录 Cumulative Gain Target Transformation Cumulative Gain 如果采用与累积效应曲线完全相同的逻辑&#xff0c;但将每个点乘以累积样本 Ncum/N&#xff0c;就会得到累积增益曲线。现在&#xff0c;即使曲线的起点具有最高的效果&#xff08;对于一个好的模型来说&#x…...

大模型推理知识总结

一、大模型推理概念 大多数流行的only-decode LLM&#xff08;例如 GPT-3&#xff09;都是针对因果建模目标进行预训练的&#xff0c;本质上是作为下一个词预测器。这些 LLM 将一系列tokens作为输入&#xff0c;并自回归生成后续tokens&#xff0c;直到满足停止条件&#xff0…...

[笔记] keytool 导入服务器证书和证书私钥

背景 我当前手头已有一个服务器证书和对应的私钥&#xff0c;现在需要转换为 Java KeyStore 格式使用&#xff0c;找了一大圈才发现 keytool 无法直接导入服务器证书和私钥&#xff0c;当然证书可以直接导入&#xff0c;但是私钥是无法直接导入。找了一大圈发现可以先将服务器…...

【2024-热-办公软件】ONLYOFFICE8.1版本桌面编辑器测评

在今日快速发展的数字化办公环境中&#xff0c;选择一个功能全面且高效的办公软件是至关重要的。最近&#xff0c;我有幸体验了ONLYOFFICE 8.1版本的桌面编辑器&#xff0c;这款软件不仅提供了强大的编辑功能&#xff0c;还拥有众多改进&#xff0c;让办公更加流畅和高效。在本…...

C# 23设计模式备忘

创建型模式&#xff1a;单例&#xff08;Singleton&#xff09;模式&#xff1a;某个类只能生成一个实例&#xff0c;该类提供了一个全局访问点供外部获取该实例&#xff0c;其拓展是有限多例模式。 原型&#xff08;Prototype&#xff09;模式&#xff1a;将一个对象作为原型&…...

STL中的迭代器模式:将算法与数据结构分离

目录 1.概述 2.容器类 2.1.序列容器 2.2.关联容器 2.3.容器适配器 2.4.数组 3.迭代器 4.重用标准迭代器 5.总结 1.概述 在之前&#xff0c;我们讲了迭代器设计模式&#xff0c;分析了它的结构、角色以及优缺点&#xff1a; 设计模式之迭代器模式-CSDN博客 在 STL 中&a…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者,全面梳理了以下几大板块,并在每个板块末尾列出常见的面试问答思路,帮助你既能夯实基础,又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层(Link Layer) 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...