关于GraphicLayer和canvas混用时，graphicLayer的绑定点击事件不生效

最新推荐文章于 2024-07-23 16:56:42 发布
最新推荐文章于 2024-07-23 16:56:42 发布
阅读量1.1k 收藏
点赞数
分类专栏： canvas arcgis api for js dojo 文章标签： 图层 绑定事件不能触发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoqiff/article/details/78533077
版权
在项目开发中，当使用GraphicLayer与canvas结合时遇到问题， GraphicLayer的点击事件无法触发。原因是canvas图层可能阻止了事件传递。通过设置CSS3的pointer-events:none属性，允许事件穿透canvas，从而解决点击事件不生效的问题。
摘要由CSDN通过智能技术生成

项目开发中，一开始用的都是graphicLayer，图层绑定的点击事件也能触发，加了canvas图层后，发现之前graphicLayer的点击不生效了，感觉像是屏蔽了，绑定地图本身的点击事件是可以触发，但并不是我想要的，于是就开始查canvas的属性，发现了CSS3 pointer-events:none属性。

   原来是“被遮住了”，设置了pointer-events:none后，就可以穿透过canvas,触发其他dom事件

最低0.47元/天 解锁文章
榆木脑袋敲啊敲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
在supermap地图上生成多个弹窗后无法一一关闭的解决方法
哼唧怪
01-16 530
最开始遇到的问题是这样子的，用supermap为底图，在地图上所有点击生成的窗体，这些点击生成的点都是放在一个数组里面的了，所以想要实现的效果是，每次点击“撤出最后”按钮的时候只关闭隐藏销毁最后一个弹窗。（看下图） 想要在每次点击弹窗右上角按钮的时候，排序最后的一个定位窗口就隐藏消失 但是之前我用的以下的代码却只能作用一次去移除最后一个，看代码 function clickright(){ ...
layer中点击事件不起作用？？
u013239233的博客
01-08 1万+
尴尬了，确实不知道他们有区别，之前一直都是这样用： 不起作用： $('#test').on('click', function() { layer.msg('响应点击事件'); }); 起作用了： $(document).on('click', '#test', function() { layer.msg('响应点击事件'); });好像明白了一点了1》》.click只能为页面现有的元
arcgis api for js4.x实现点击GraphicsLayer上绘制的Graphic获取Graphic中的attributes中的信息
最新发布
wangchaohpu的博客
07-23 554
在Map地图中添加GraphicsLayer图层，在GraphicsLayer图层添加绘制graphics点，点击绘制的点，获取graphics点中的attributes中的信息。
Android GIS开发系列-- 入门季（4） GraphicsLayer的点击查询要素
weixin_34242819的博客
10-29 267
  上一讲中我们学会了如何在MapView中添加Graphic要素，那么在百度或高德地图中，当我们点击要素时，会显示出相应的详细信息。在GraphicsLayer中也提供了这样的方法。下面我们来学习在GraphicsLayer中如何点击查找要素。 首先在MapView中添加两个Graphic要素。代码如下，注意这里用Graphic(Geometry geometry, Symbol symbol...
为canvas绘制的多个图形设置点击事件
热门推荐
MooreLxr的博客
08-03 2万+
一、给Canvas元素绑定事件基础知识 由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。 基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。 第一步：封装一个获取...
移动端开发必会出现的问题和解决方案
qq_43623970的博客
04-30 1701
对于一个开发了多个H5的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上...
移动端H5常见问题以及解决方案
bufanweb的博客
07-16 1374
移动端H5常见问题以及解决方案 问题 下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究. 1.iOS滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性. 产生原因 为什么在iOS的webview中滑动不流畅,它是如何定义的?* 最终我在safari文档里面寻找到了答案(文
12个前端必会 H5 问题及解决方法
qianduan666a的博客
08-14 887
前言 作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟
校招面试冲刺
weixin_45221036的博客
08-24 1784
HTML 1】语义化： 尽可能少的使用无语义的标签div和span 在语义化不明显时，尽量使用p标签，因为p在默认情况下有上下间距 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i） 什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页
【Mars3d 基础- 矢量数据】标绘完成事件
m0_53584457的博客
04-18 1272
mars3d的矢量数据绘制完成事件
ArcGIS Mobile 自定义MapGraphicLayer绘制图形
weixin_30376163的博客
04-10 119
从事过ArcEngine相关工作知道，在ArcEngine中绘制图形有两种存在方式，一种是以要素（feature）的形式，一种是以元素（element）的形式。添加两种不同形式的图形，绘制的方法是不一样的。其中feature需要通过在内存新建或者添加图层，运用编辑工具在图层中添加feature，而element是通过在graphicContainers中添加。grapicContaine...
三、Arcgis api js -- 图形管理 Layer
wo的博客
03-02 688
：graphic、graphiclayer、map、view、各种layer – feature – featurelayer 1、区别 1、GraphicsLayer与featurelayer区别 1）官方 GraphicsLayer包含一个或多个Graphic 与FeatureLayer和MapImageLayer不同，GraphicsLayer没有架构。 通常，在处理图形时，最好使用其源属性构造FeatureLayer， 因为FeatureLayer比GraphicsLayer.
ArcGIS图层简介 GraphicsLayer与FeatureLayer 介绍与区别
悦儿尚儿的博客
11-20 7436
ArcGIS图层简介 GraphicsLayer与FeatureLayer 介绍与区别
AGS-在地图的graphics layers绘图
09-06 2030
 地图管理了一个CompositeGraphicsLayer对象，他包含了graphics layers的集合。basic graphics layer：默认graphics layer，所有graphics layers都绘制在上面(由IMap.GetBasicGraphicsLayer直接访问)。active graphics layer：通过IGraphicsContainer接口访
ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁--GraphicsLayer
weixin_30852367的博客
07-06 163
我们与地图交互的过程时刻在进行着：一个拉框放大操作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是GraphicsLayer。 其实ADF开发中...
arcgis api for js4.x实现点击图层上的绘制的Graphics点，弹出点信息。
体验新模板
10-09 4188
arcgis api for js4.x 在Map地图中添加GraphicsLayer图层，在GraphicsLayer图层添加绘制graphics点，点击绘制的点，弹出信息框。 hitTest(screenPoint, options) 单击视图的屏幕坐标（或本机鼠标事件）。 用于指定hitTest中包含或排除的内容的选项。 返回与指定屏幕坐标相交的每个图层的最上面的要素。图层类型返回结果：GraphicsLayer、FeatureLayer、CSVLayer、GeoRSSLayer、KMLLayer和S
Graphic以及GraphicsLayer 笔记
qq_37550440的博客
04-07 904
Graphic 和 Feature Graphic 包含几何图形、符号、属性和信息模板（infoTemplate）。Graphic 显示在 GraphicsLayer 中。 浏览器控制台打印出的 Graphic Graphic 构造函数 ArcGIS API for JavaScript 并没有一个类叫做 Feature，但是可以看得出来，一个 Graphic 就像是一个 Feature。 GraphicsLayer 和 Map.graphics GraphicsLayer 是一个包
Canvas中绘制的图标绑定点击事件
07-25
要在Canvas中绘制的图标上绑定点击事件，你需要考虑以下几个步骤： 1. 获取鼠标点击的坐标。 2. 遍历绘制的图标，判断点击坐标是否在图标范围内。 3. 如果点击坐标在某个图标范围内，则触发相应的点击事件。 下面是一个简单的示例代码，演示了如何在Canvas中绘制的图标上绑定点击事件： ```javascript // 获取Canvas元素 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // 存储图标信息的数组 var icons = [ { x: 50, y: 50, width: 50, height: 50 }, // 第一个图标的位置和尺寸 { x: 100, y: 100, width: 50, height: 50 }, // 第二个图标的位置和尺寸 // ...添加更多的图标信息 ]; // 绑定点击事件处理函数 canvas.addEventListener('click', function(event) { var mouseX = event.clientX - canvas.offsetLeft; var mouseY = event.clientY - canvas.offsetTop; // 遍历图标数组，判断点击坐标是否在图标范围内 for (var i = 0; i < icons.length; i++) { var icon = icons[i]; if ( mouseX >= icon.x && mouseX <= icon.x + icon.width && mouseY >= icon.y && mouseY <= icon.y + icon.height ) { // 在此处触发相应的点击事件 console.log('点击了图标' + i); break; } } }); ``` 在上述代码中，首先定义了一个存储图标信息的数组`icons`，其中每个图标都包含了其位置和尺寸信息。然后，通过`addEventListener()`方法绑定了Canvas的点击事件处理函数。在点击事件处理函数中，获取鼠标点击的坐标，并遍历图标数组，判断点击坐标是否在某个图标范围内。如果是，则可以在相应位置触发你需要的点击事件。 请注意，上述示例代码假设Canvas元素没有发生缩放或其他变换。如果Canvas元素有缩放、平移或旋转等变换操作，你需要对点击坐标进行相应的转换以匹配变换后的图标位置。 希望这个示例能帮助到你在Canvas中绘制的图标上绑定点击事件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值