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

vue2+OpenLayers 天地图上打点并且显示相关的信息(2)

上次是在地图上打点 这次鼠标移动在图标上面显示相关的信息
首先有两个事件 鼠标移入 和 鼠标移出事件
pointermove pointerout

鼠标放上去之前
在这里插入图片描述
放上去后
在这里插入图片描述
代码如下

<template><div class="container"><div id="vue-openlayers" class="map-x"></div><divid="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv" style="width: 100px; height: 100px"></div></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import s40s from "@/assets/img/404.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";export default {name: "FirstMap",data() {return {map: null,draw: null,maskLayer: null,logo,s40s,layers: [],};},methods: {initMap() {let that = this;// 将图标样式应用到点要素const features = [];const point = new Point([108.56, 34.15]); // 修改坐标格式const feature = new Feature({geometry: point,custom: { data: "123", type: "icon" },type: "icon",});feature.setStyle([new Style({image: new Icon({crossOrigin: "anonymous",src: this.logo,// size: [40, 40],scale: 0.2, // 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源const source = new VectorSource({features,});let markLayerPoints = new VectorLayer({source: source,});let map = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new XYZ({url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",}),}),markLayerPoints, // 确保图层顺序正确// vectorLayers,],view: new View({projection: "EPSG:4326",center: [108.56, 34.15], // 修改中心坐标格式zoom: 6,}),});this.map = map;// 定义变量来跟踪是否鼠标悬停在图标上var infoBox = document.getElementById("info-box");let pointFeatures;var iconStyleDefault = new Style({image: new Icon({src: this.logo, // 图标图片的路径crossOrigin: "anonymous",scale: 0.2, // 图标缩放比例}),});map.on("pointermove", function (event) {if (pointFeatures) {infoBox.style.display = "none"; // 隐藏信息盒子pointFeatures.setStyle(iconStyleDefault);}map.forEachFeatureAtPixel(event.pixel, function (feature) {console.log("进入11111111111111111111");// 这里 feature 就是当前悬停的要素if (feature.values_.type == "icon") {var coord = feature.getGeometry().getCoordinates(); //地理坐标,也就是经纬度var pixel = map.getPixelFromCoordinate(coord); //像素是屏幕上的位置   像素坐标pointFeatures = feature; // 当前的图层// 设置文本样式,显示在图标旁边var textStyle = new Text({text: "文本", // 要显示的文本font: "14px sans-serif", // 字体样式fill: new Fill({color: "black", // 文本颜色}),stroke: new Stroke({color: "white", // 文本轮廓颜色,使文本更突出width: 2,}),// 将文本底部对齐到点的坐标位置textBaseline: "bottom",// 根据需要调整文本的水平对齐方式,'center' 表示文本居中对齐textAlign: "center",});var iconStyleHover1 = new Style({image: new Icon({src: that.s40s, // 图标图片的路径crossOrigin: "anonymous",// anchor: [0.5, 46], // 图标锚点,相对于图标大小的百分比scale: 0.2, // 图标缩放比例textBaseline: "top",}),text: textStyle,});pointFeatures.setStyle(iconStyleHover1);console.log(infoBox, "infoBoxinfoBox");infoBox.style.display = "block"; // 显示信息盒子infoBox.style.left = pixel[0] + 10 + "px"; // 设置信息盒子位置infoBox.style.top = pixel[1] - 5 - infoBox.offsetHeight + "px"; // 防止信息盒子被图标遮挡infoBox.innerHTML = "这里是信息+" + feature.values_.custom.data; // 设置信息盒子内容'; // 设置信息盒子内容}});});// 添加鼠标离开图层监听器markLayerPoints.on("pointerout", function (event) {if (pointFeatures) {pointFeatures.setStyle(iconStyleDefault);pointFeatures = null;infoBox.style.display = "none"; // 隐藏信息盒子}});},
},mounted() {this.initMap();},
};
</script>
<style scoped lang="scss">
.input {position: fixed;top: 10px;right: 10px;border-radius: 10px;background: #fff;display: flex;flex-direction: column;padding: 5px;padding-bottom: 10px;> * {margin-top: 10px;display: flex;align-items: center;}
}
</style><style scoped lang="scss">
.container {position: relative;.btn {position: absolute;left: 4%;top: 1%;}
}#vue-openlayers {width: 100vw;height: 100vh;
}h3 {line-height: 40px;
}/* 隐藏信息盒子的初始样式 */
#info-box {display: none;position: absolute;background: white;border: 1px solid black;padding: 10px;border-radius: 5px;font-size: 14px;pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>

相关文章:

vue2+OpenLayers 天地图上打点并且显示相关的信息(2)

上次是在地图上打点 这次鼠标移动在图标上面显示相关的信息 首先有两个事件 鼠标移入 和 鼠标移出事件 pointermove pointerout 鼠标放上去之前 放上去后 代码如下 <template><div class"container"><div id"vue-openlayers" class&quo…...

c++继承(二)

一、友元函数的继承 友元函数不能被继承&#xff0c;就像爸爸的朋友不是你的朋友&#xff0c;如果要有友元函数&#xff0c;在子类重新定义一个。 二、静态成员的继承 静态成员的继承仍然是那个成员&#xff0c;普通成员的继承是不同的。 父类的静态成员属于当前类&#xf…...

低代码开发的崛起:机遇与挑战

近年来&#xff0c;“低代码”开发平台的迅速崛起&#xff0c;已经成为IT行业中不可忽视的趋势。这些平台承诺让非专业人士也能快速构建应用程序&#xff0c;通过减少代码编写的需求&#xff0c;大幅提高开发效率。对于许多企业而言&#xff0c;低代码开发工具成为了一个加速数…...

Json-JacksonUtils工具类

为了创建一个通用的 Jackson 工具类,我们可以定义一个名为 JacksonUtils 的工具类,该类将提 供多种方法来支持不同类型的 JSON 转换需求。下面是一个示例实现,包括基本的 JSON 到 Java 对象的转换、Java 对象到 JSON 的转换、以及更复杂的类型如 CommonResult 的转换。 C…...

svn客户端装完后没有svn.exe

如果SVN客户端&#xff08;如TortoiseSVN&#xff09;安装完成后&#xff0c;在预期的安装目录&#xff08;通常是bin目录&#xff09;中没有找到svn.exe文件&#xff0c;这通常是因为在安装过程中没有选择安装命令行客户端工具&#xff08;Command Line Client Tools&#xff…...

TinyWebserver的复现与改进(4):主线程的具体实现

GitHub - yzfzzz/MyWebServer: Linux高并发服务器项目&#xff0c;参考了TinyWebServer&#xff0c;将在此基础上进行性能改进与功能增加。为方便读者学习&#xff0c;附带详细注释和博客&#xff01; TinyWebserver的复现与改进&#xff08;1&#xff09;&#xff1a;服务器环…...

DaemonSet 不能帮助我们做什么事情?

DaemonSet 不能帮助我们做什么事情&#xff1f; A. 保证集群内每一个(或者一些)节点都运行一组相同的Pod B. 跟踪集群节点状态&#xff0c;保证新加入的节点自动创建对应的Pod C. 跟踪集群节点状态&#xff0c;保证移除的节点删除对应的Pod D. 能够设置Pod重试次数&#xff0c;…...

开源模型应用落地-LangChain高阶-记忆组件-RedisChatMessageHistory正确使用(八)

一、前言 LangChain 的记忆组件发挥着至关重要的作用,其旨在协助大语言模型(LLM)有效地留存历史对话信息。通过这一功能,使得大语言模型在对话过程中能够更出色地维持上下文的连贯性和一致性,进而能够像人类的记忆运作方式那样,进行更为自然、流畅且智能化的交互。 它仿佛…...

解决Openwrt 串口默认是没有密码的方法

将串口登录加入密码方法如下&#xff1a; 步骤一&#xff1a;配置busybox的登录&#xff0c;可以在.config文件中添加如下 CONFIG_BUSYBOX_CONFIG_LOGINy 添加后&#xff0c;需要重新编译busybox。 步骤二&#xff1a;修改target/linux/ramips/base-files/etc/inittab文件 将…...

【vue讲解:v-model 之 lazy、number、trim、与后端交互、小电影案例】

2 v-model 之 lazy、number、trim lazy&#xff1a;等待input框的数据绑定时区焦点之后再变化 number&#xff1a;数字开头&#xff0c;只保留数字&#xff0c;后面的字母不保留&#xff1b;字母开头&#xff0c;都保留 trim&#xff1a;去除首位的空格<!DOCTYPE html> …...

ECCV 2024 | 南洋理工三维数字人生成新范式:结构扩散模型

该论文作者均来自于新加坡南洋理工大学 S-Lab 团队&#xff0c;包括博士后胡涛&#xff0c;博士生洪方舟&#xff0c;以及计算与数据学院刘子纬教授&#xff08;《麻省理工科技评论》亚太地区 35 岁以下创新者&#xff09;。S-Lab 近年来在顶级会议如 CVPR, ICCV, ECCV, NeurIP…...

2024.8.13-算法学习(原创+转载)

一、什么是张量并行&#xff08;Tensor Parallelism&#xff09; &#xff1f; 张量并行&#xff08;Tensor Parallelism&#xff09; 是一种分布式矩阵算法。 随着模型越来越大&#xff0c;模型内的矩阵也越来越大。一个大矩阵的乘法可以拆分成多个小矩阵的运算&#xff0c;…...

beautifulsoup的简单使用

文章目录 beautifulsoup一. beautifulsoup的简单使用1、安装2、如何使用3、对象的种类 二、beautifulsoup的遍历文档树2.1 子节点.contents 和 .children descendants2.2 节点内容.string.text 2.3 多个内容.strings**.stripped_strings** 2.4 父节点.parent.parents 三、beaut…...

【Python】Jupyter Notebook的安装及简单使用

Jupyter Notebook的安装及简单使用1、安装2、language设置为中文3、Jupyter Notebook启动4、Jupyter Notebook的常用快捷方式5、将Notebook笔记转为其他文件格式保存 Jupyter Notebook的安装及简单使用 不安装AnaCoda&#xff0c;但需要使用Jupyter Notebook 1、安装 pip inst…...

中国自动驾驶出租车冲击网约车市场

近年来&#xff0c;中国的自动驾驶技术迅速发展&#xff0c;对传统网约车市场构成了越来越大的冲击。随着科技巨头百度旗下的萝卜快跑等公司加速推广无人驾驶出租车&#xff0c;这一趋势引发了广泛的讨论和担忧。 自动驾驶技术的迅猛发展 中国自动驾驶行业正处于快速发展阶段&…...

解决浏览器书签同步问题,极空间部署开源免费的跨平台书签同步工具『xBrowserSync』

解决浏览器书签同步问题&#xff0c;极空间部署开源免费的跨平台书签同步工具『xBrowserSync』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 作为一个喜欢折腾的数码党&#xff0c;我平时上网冲浪使用的浏览器绝不会只限于一种&#xff0c;就比如说我在上班的地方只会用到Edge浏…...

14个SpringBoot优化小妙招

今天我们来分享一下平时用SpringBoot开发时候的一些优化小妙招&#xff0c;用好这些优化小妙招让我们开发的系统架构、系统代码、开发流程、测试流程、运维监控看起来就跟写诗一样优雅&#xff0c;让我们每个人手头负责的代码和工程都要很漂亮~~~ 这里的优化小妙招很多不是说直…...

Elasticsearch 度量(Metric)聚合详解及示例

Elasticsearch 提供了强大的聚合功能&#xff0c;允许用户对数据进行深入的统计分析。度量&#xff08;Metric&#xff09;聚合是其中一种&#xff0c;它用于对数值型数据进行计算&#xff0c;如求和、平均值、最大值、最小值等。本文将详细介绍 Elasticsearch 的度量聚合&…...

基于 jsp 的健身俱乐部会员系统设计与实现

点击下载源码 基于 jsp 的健身俱乐部会员系统设计与实现 摘 要 目前我国虽然己经开发出了应用计算机操作的健身俱乐部管理系统&#xff0c;但管理软件&#xff0c;管理方法和管理思想三者往往相脱节。造成我国健身俱乐部信息管理系统极端化的缺陷。在国外健身俱乐部已经有了一…...

苍穹外卖项目DAY01

苍穹外卖项目Day01 1、软件开发整体介绍 1.1、软件开发流程 1.2、角色分工 项目经理&#xff1a;对整个项目负责&#xff0c;任务分配、把控进度产品经理&#xff1a;进行需求调研&#xff0c;输出需求调研文档、产品原型等UI设计师&#xff1a;根据产品原型输出界面效果图架…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...