首页 > 其他分享 >openlayers在地图上使用Overlay渲染图标无法操作地图问题

openlayers在地图上使用Overlay渲染图标无法操作地图问题

时间:2024-07-22 10:09:10浏览次数:10  
标签:lable 鼠标 overlay Overlay 地图 openlayers div 图标

ol对于在地图上渲染图标,并且图标可以随着地图的缩放层级自适应,跟随地图移动,ol是提供了一个很好用的方法的---overlay

代码如下:

//定义标注对象
let lable_div = document.createElement('div')
lable_div.className = [s.labelDiv]

let offsetY = 0
let _classname = ''
_classname = s.highClass
offsetY = -62
lable_div.innerHTML = `<div class=${s.con}>
    <div class=${s.title}><b> ${obj?.name} </b></div> 
    <div>水位(m):${obj?sw}</div> 
    </div>`

const lable_overlay = new Overlay({
    element: lable_div,
    offset: [0, offsetY],
    positioning: 'top-center',
    className: _classname,
});
lable_overlay.setPosition(coordinate);
Global.map.addOverlay(lable_overlay);

解决

但会有一个问题,那就是当鼠标移入到该图标上后,就无法操作地图了,无论是双击放大、滚轮缩放、鼠标拖动地图这些都会失效,起因是当前鼠标作用到了overlay所在的dom盒子上去了,没有作用到地图所在盒子的canvas上面。
有一个配置项可以解决这个问题 :
当你将一个overlay添加到地图上时,默认情况下,它会阻止鼠标事件透传到地图上,这就导致了无法拖动地图或进行缩放操作。这是因为overlay的元素会遮挡地图,并捕获所有与其相关的事件。
如果你希望在拖动overlay时仍然能够拖动地图或进行缩放操作,可以通过设置overlay的stopEvent属性为false来解决这个问题。这样做会允许鼠标事件继续传递到地图上。

以下代码片段,展示如何设置overlay的stopEvent属性:

const lable_overlay = new Overlay({
    element: lable_div,
    offset: [0, offsetY],
    positioning: 'top-center',
    className: _classname,
    stopEvent: false, // 允许事件传递到地图,防止鼠标移动到悬浮图标上无法操作地图
});

标签:lable,鼠标,overlay,Overlay,地图,openlayers,div,图标
From: https://www.cnblogs.com/ZerlinM/p/18315508

相关文章

  • 全地图商家采集工具
    1.引言地图信息采集软件在商业分析、城市规划和交通管理等领域发挥着重要作用。通过实时采集地图上的商户信息,该软件能够帮助用户快速获取所需的地理数据和商业信息。2.系统功能2.1地图数据采集多平台支持:软件支持百度地图、高德地图、腾讯地图等主流电子地图服务。......
  • 全地图商家采集工具
    1.引言地图信息采集软件在商业分析、城市规划和交通管理等领域发挥着重要作用。通过实时采集地图上的商户信息,该软件能够帮助用户快速获取所需的地理数据和商业信息。2.系统功能2.1地图数据采集多平台支持:软件支持百度地图、高德地图、腾讯地图等主流电子地图服务。实......
  • 注意!使用高德地图授权但还未缴费的用户,账号将被强制关闭
    这回高德是来真的了,以前三大图商的催收策略是不停地进行电话轰炸,限流、关闭账号、法律起诉等都是停留在口头的告知,并未真正地行动。现在是来真的了,前面的文章我也提到过,高德在今年7月将会出行新的政策,现在已经在其平台公布,且限流、关闭账号、等一些列催......
  • GIS地图可视化怎么做?这款免费工具帮你轻松搞定
    GIS地图可视化怎么做?山海鲸可视化这款免费可视化工具帮你轻松搞定。从三维GIS地图可视化需求出发,山海鲸可视化提供了强大的GIS场景编辑功能,包括支持添加倾斜摄影和地形编辑。无论是复杂的地形调整还是细致的倾斜摄影添加,这款工具都能轻松实现。山海鲸可视化是一款非常易用的软件......
  • 使用高德/百度/腾讯SDK,不购买地图商用授权APP无法上架?
    随着国内三大图商联合针对地图位置服务收取5万/年的商业授权费,许多使用三大图商地图或定位sdk的应用开发企业遇到了两难:没有地图商业授权,无法上架!其实大家信息了解有误区,并非都无法上线。目前国内主流的上架商城:华为商城、小米商城、应用宝、vivo、oppo等。上架华为商城通常......
  • Vue.js 集成高德地图:从零开始的实战指南
    Vue.js集成高德地图:从零开始的实战指南在现代Web开发中,地图服务已经成为许多应用的核心功能之一。高德地图作为国内领先的地图服务提供商,提供了强大的API接口,方便开发者在应用中集成地图功能。今天,我们将深入探讨如何在Vue.js项目中集成高德地图,并通过实际代码示例来展示......
  • openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景
    这是实践效果如果没有任何基础就看这个专栏:http://t.csdnimg.cn/qB4w0这个专栏里有从最简单的地图到复杂地图的示例最终效果:线上示例代码:想要做这个效果如果你的行政区划编辑点较多可能会有卡顿感如果出现卡顿感需要将边界点相应减少一些这样地图边界会相对......
  • BLOS-BEV:导航地图助力BEV分割实现200米超远感知新SOTA
    BLOS-BEV:导航地图助力BEV分割实现200米超远感知新SOTA早期,由于感知算法模型的感知能力还比较有限,在城市中的自动驾驶车辆通常都需要依赖高精地图(High-Definition,HDMap)来提供丰富和精确的道路信息,比如道路的拓扑结构,停止线,车道线曲率等相关路况信息。但由于高精地图的采集和......
  • 如何给地图瓦片底图添加滤镜,实现自己想要的主题色
    核心:使用css的filter滤镜属性,然而搭配svg实现想要的效果首先确认底图服务提供的瓦片是否为浅色主题(透明瓦片不适用)实现步骤: 截取原浅色底图图片,类似于下图,最好是带上海洋部分的截图SVGGradientMapFilter这个网站调整自己想要的底图主题效果,网址:https://yoksel.github.......
  • MapLibre/Martin | 使用Martin发布MBTiles地图切片包
    什么是MartinMartin是一个高性能的地图切片服务器,使用Rust编写,支持PostGIS,MBTiles,PMTiles。什么是MBTilesMBTiles是个sqlite文件,也就是说MBTiles文件是个单文件数据库。截至本文写作时,最新标准是1.3.MBTIles利用了数据库的索引机制,避免相同内容的切片重复占用空间,同时也有......