Java教程

在线直播系统源码,鼠标悬停后弹出气泡

本文主要是介绍在线直播系统源码,鼠标悬停后弹出气泡,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在线直播系统源码,鼠标悬停后弹出气泡实现的相关代码

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格式'
})

以上就是 在线直播系统源码,鼠标悬停后弹出气泡实现的相关代码,更多内容欢迎关注之后的文章

 

这篇关于在线直播系统源码,鼠标悬停后弹出气泡的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!