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

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

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