在线直播系统源码,鼠标悬停后弹出气泡
2021/11/12 14:39:45
本文主要是介绍在线直播系统源码,鼠标悬停后弹出气泡,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在线直播系统源码,鼠标悬停后弹出气泡实现的相关代码
1、代码总体结构
/* 创建一个图形图层,鼠标停在该图层上的对象时,弹出气泡 */ //创建图形图层 let gl = getLayer(datas) //设置事件监听 setEvent(gl) //将图形图层加入地图 map.add(gl)
2、创建图形图层(GraphicsLayer)
function getLayer(datas){ let gl = new GraphicsLayer({ id: 'layer-test-1', opacity: 0.8 }) //在绘制该图层中绘制各种对象 for (let i in datas) { let s = datas[i] let g = new Graphic({ symbol: { type: 'simple-marker', // style: 'square', size: ...,//根据不同情况,控制点的大小和颜色 color: ..., outline: { color: [ 128, 128, 128, 0.5 ], width: '0.5px' } }, geometry: { type: 'point', longitude: s.x, latitude: s.y }, attributes: {//寓数据于图形属性 code: s.code, name: s.name, ... } }) gl.add(g) } return gl }
3、添加事件
function setEvent (gl) { let view = map.view let mouseOn = view.on('pointer-move', function (event) {//在MapView中添加鼠标监控事件 view.hitTest(event).then((res) => { if (res.results.length) { let results = res.results.filter((result) => { // 检查图形是否属于感兴趣的图层 return result.graphic.layer.id === gl.id }) if (results.length > 0) { let g = results[0].graphic let geo = g.geometry let point = new Point(geo.x, geo.y, view.spatialReference) view.popup.open({ location: point, title: '标题', content: '内容,html格式' }) } } else { view.popup.close() } }) }) gl.on('layerview-destroy', function (event) {//当该图形图层关闭时移除该鼠标监控事件 mouseOn.remove() }) }
MapView是全局性的,当我们创建一个图层,然后添加一个鼠标监听事件,很自然的,当该图层关闭时,应当移除该事件。注意view.on()会返回事件对象,利用它就可以实现移除。还有一个问题,假如MapView多次添加监听事件,比如不同的图层都添加一个,会相互影响吗?我估计是不会,系统应当做了处理。就好像jquery中,我们不停地通过$(function(){})来绑定window.onload事件,不管写多少个,都没有问题,都有效,不会冲突。
4、弹出气泡
代码就是监听事件里的,再摘录一次,方便讲解。
let g = results[0].graphic//悬停所处对象 let geo = g.geometry //注意坐标系要与view保持一致!这个非常重要!否则可能会报错,说找不到.x之类 let point = new Point(geo.x, geo.y, view.spatialReference) view.popup.open({ location: point, title: '标题', content: '内容,html格式' })
以上就是 在线直播系统源码,鼠标悬停后弹出气泡实现的相关代码,更多内容欢迎关注之后的文章
这篇关于在线直播系统源码,鼠标悬停后弹出气泡的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?