关于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元/天 解锁文章
榆木脑袋敲啊敲
关注
专栏目录
详解Canvas事件绑定
12-13
那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定...
【Mars3d 基础- 矢量数据】标绘完成事件
m0_53584457的博客
04-18 1326
mars3d的矢量数据绘制完成事件
FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示
weixin_30338481的博客
05-24 474
使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { ttb = new Draw(map); //ttb.on("draw-end", addGraphic); ...
arcgis api for js4.x实现点击GraphicsLayer上绘制的Graphic获取Graphic中的attributes中的信息
最新发布
wangchaohpu的博客
07-23 581
在Map地图中添加GraphicsLayer图层，在GraphicsLayer图层添加绘制graphics点，点击绘制的点，获取graphics点中的attributes中的信息。
ArcGIS Mobile 自定义MapGraphicLayer绘制图形
weixin_30376163的博客
04-10 125
从事过ArcEngine相关工作知道，在ArcEngine中绘制图形有两种存在方式，一种是以要素（feature）的形式，一种是以元素（element）的形式。添加两种不同形式的图形，绘制的方法是不一样的。其中feature需要通过在内存新建或者添加图层，运用编辑工具在图层中添加feature，而element是通过在graphicContainers中添加。grapicContaine...
图层知识点
weixin_42193179的博客
03-20 184
require(["esri/layers/GraphicsLayer"], function(GraphicsLayer) { // 创建图形层。 graphicsLayer = new GraphicsLayer(); rangeLineLayer = new GraphicsLayer({id:"rangeLine"}); // map2d.addLayer...
ArcGIS4.x GraphicsLayer查询
qq_43314764的博客
03-18 977
ArcGIS4.x GraphicsLayer查询 实现思路思路1：在GraphicLayer图层上直接点击获取数据；思路2：通过view的点击事件获取坐标，对属性数据进行对比；思路3：通过某种点击方式直接获取数据；实现效果主要代码demo完整实例 实现思路 思路1：在GraphicLayer图层上直接点击获取数据； 分析：查看GraphicLayer的api，发现了on方法（此时开心一下），后来查看没有click事件。截图为证： 此方法不同，只能放弃； 思路2：通过view的点击事件获取坐标，对属性数
html5中监听canvas内部元素点击事件的三种方法
12-14
在HTML5中，Canvas元素作为一个绘图表面，其内部绘制的图形不具备DOM元素的特性，因此无法直接绑定点击事件。为了实现对Canvas内部图形的交互，开发者需要采取一些技巧来模拟这种行为。本文将探讨三种方法来监听...
一个不错的HTML5 Canvas多层点击事件监听实例
09-28
多层点击事件监听则是指在Canvas上对不同层级的图形元素进行点击事件的监听，这种技术在开发具有多个可交互元素的游戏和应用时非常有用。 在上述实例中，通过HTML和JavaScript代码实现了一个基本的Canvas多层点击...
如何在Canvas上的图形/图像绑定事件监听的实现
11-19
### 如何在Canvas上的图形/图像绑定事件监听的实现 #### 概述 在HTML中，我们通常可以轻松地为各种元素（如按钮、输入框等）添加事件监听器来响应用户的交互行为。然而，当涉及到`<canvas>`元素时，情况变得复杂...
Arcgis for Js之Graphiclayer扩展详解
weixin_30838921的博客
11-17 246
在前两节，讲到了两种不同方式的聚类，一种是基于距离的，一种是基于区域范围的，两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的。在本节，就详细的讲讲esri/layers/GraphicsLayer方法的扩展。 首先，在讲解扩展之前，先看看API中esri/layers/GraphicsLayer的一些参数和方法等。 1、创建一个Graph...
Graphic以及GraphicsLayer 笔记
qq_37550440的博客
04-07 913
Graphic 和 Feature Graphic 包含几何图形、符号、属性和信息模板（infoTemplate）。Graphic 显示在 GraphicsLayer 中。 浏览器控制台打印出的 Graphic Graphic 构造函数 ArcGIS API for JavaScript 并没有一个类叫做 Feature，但是可以看得出来，一个 Graphic 就像是一个 Feature。 GraphicsLayer 和 Map.graphics GraphicsLayer 是一个包
三、Arcgis api js -- 图形管理 Layer
wo的博客
03-02 696
：graphic、graphiclayer、map、view、各种layer – feature – featurelayer 1、区别 1、GraphicsLayer与featurelayer区别 1）官方 GraphicsLayer包含一个或多个Graphic 与FeatureLayer和MapImageLayer不同，GraphicsLayer没有架构。 通常，在处理图形时，最好使用其源属性构造FeatureLayer， 因为FeatureLayer比GraphicsLayer.
Mars3D开发基础学习：矢量图层
木遥的专栏
12-30 2921
三维场景中，地形和栅格来组成了三维的基础，但更多的业务还是需要 点线面等矢量数据来充实, 这就是我们的矢量数据图层。
arcgis api for js4.x实现点击图层上的绘制的Graphics点，弹出点信息。
体验新模板
10-09 4241
arcgis api for js4.x 在Map地图中添加GraphicsLayer图层，在GraphicsLayer图层添加绘制graphics点，点击绘制的点，弹出信息框。 hitTest(screenPoint, options) 单击视图的屏幕坐标（或本机鼠标事件）。 用于指定hitTest中包含或排除的内容的选项。 返回与指定屏幕坐标相交的每个图层的最上面的要素。图层类型返回结果：GraphicsLayer、FeatureLayer、CSVLayer、GeoRSSLayer、KMLLayer和S
GraphicsLayer知识点
weixin_42193179的博客
03-11 1846
require(["esri/layers/GraphicsLayer"], function(GraphicsLayer) { /* code goes here */ }); 包含一个或多个图形特征的图层。 每个地图都包含默认的GraphicsLayer，可以使用map.graphics属性进行访问。 您可以创建自己的图形图层并将其添加到地图中。 图形层可以在图形层的组中重新排序。 但是，...
ArcGIS API for Silverlight开发入门（4）：用户与地理信息之间的桥梁--GraphicsLayer
weixin_30852367的博客
07-06 167
我们与地图交互的过程时刻在进行着：一个拉框放大操作，或者对地图内容的查询等。这些交互过程中的输入输出，通常都是反映在独立于地图数据一个“层”上。比如拉框放大，我们能看见鼠标所画的一个矩形；又比如对兴趣点的查询，结果通常是将符合条件的兴趣点的形状高亮显示在那个独立的“层”中，通过它既可以反映用户的输入，又可以展现地图的输出。这个“层”就是GraphicsLayer。 其实ADF开发中...
AGS-在地图的graphics layers绘图
09-06 2034
 地图管理了一个CompositeGraphicsLayer对象，他包含了graphics layers的集合。basic graphics layer：默认graphics layer，所有graphics layers都绘制在上面(由IMap.GetBasicGraphicsLayer直接访问)。active graphics layer：通过IGraphicsContainer接口访
浅谈ArcGIS移动开发中的基本变量：MapView、Map、Layers、GraphicsOverlay
Smart3S的博客
07-19 3667
一、MapView         MapView，可译为地图视图或地图窗口，顾名思义，是在Android布局中用来显示地图（ArcGISMap）的控件，允许用户与地图进行交互。它使用了MVC 架构，实现了 Map 和 MapView的分离，可使用Viewpoints控制可视范围，也通过 Touch事件和监听实现与内容的交互，如图层或图形的识别（identify），可参照：ArcGIS Runt...
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、付费专栏及课程。

余额充值