标签：results 后弹 鼠标悬停 let 图层 gl geo 源码 view
在线直播系统源码，鼠标悬停后弹出气泡实现的相关代码
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格式'
})
以上就是 在线直播系统源码，鼠标悬停后弹出气泡实现的相关代码，更多内容欢迎关注之后的文章
标签：results,后弹,鼠标悬停,let,图层,gl,geo,源码,view 来源： https://www.cnblogs.com/yunbaomengnan/p/15544405.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。