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

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

1、代码总体结构

/*<br>创建一个图形图层，鼠标停在该图层上的对象时，弹出气泡<br>*/<br>//创建图形图层<br>let gl = getLayer(datas)<br>//设置事件监听<br>setEvent(gl)<br>//将图形图层加入地图<br>map.add(gl)

2、创建图形图层（GraphicsLayer）

function getLayer(datas){<br>let gl = new GraphicsLayer({<br>  id: 'layer-test-1',<br>  opacity: 0.8<br>})<br>//在绘制该图层中绘制各种对象<br>for (let i in datas) {<br>  let s = datas[i]<br>  let g = new Graphic({<br>    symbol: {<br>        type: 'simple-marker',<br>        // style: 'square',<br>        size: ...,//根据不同情况，控制点的大小和颜色<br>        color: ...,<br>        outline: {<br>          color: [ 128, 128, 128, 0.5 ],<br>          width: '0.5px'<br>        }<br>      },<br>    geometry: {<br>      type: 'point',<br>      longitude: s.x,<br>      latitude: s.y<br>    },<br>    attributes: {//寓数据于图形属性<br>      code: s.code,<br>      name: s.name,<br>  ...<br>    }<br>  })<br>  gl.add(g)<br>}<br>return gl<br>}

3、添加事件

function setEvent (gl) {<br>  let view = map.view<br>  <br>  let mouseOn = view.on('pointer-move', function (event) {//在MapView中添加鼠标监控事件<br>    view.hitTest(event).then((res) => {<br>      if (res.results.length) {<br>        let results = res.results.filter((result) => { // 检查图形是否属于感兴趣的图层<br>          return result.graphic.layer.id === gl.id<br>        })<br>        if (results.length > 0) {<br>          let g = results[0].graphic<br>          let geo = g.geometry<br>          let point = new Point(geo.x, geo.y, view.spatialReference)<br>          view.popup.open({ location: point,<br>            title: '标题',<br>            content: '内容，html格式'<br>          })<br>        }<br>      } else {<br>        view.popup.close()<br>      }<br>    })<br>  })<br>  gl.on('layerview-destroy', function (event) {//当该图形图层关闭时移除该鼠标监控事件<br>    mouseOn.remove()<br>  })<br>}

MapView是全局性的，当我们创建一个图层，然后添加一个鼠标监听事件，很自然的，当该图层关闭时，应当移除该事件。注意view.on()会返回事件对象，利用它就可以实现移除。还有一个问题，假如MapView多次添加监听事件，比如不同的图层都添加一个，会相互影响吗？我估计是不会，系统应当做了处理。就好像jquery中，我们不停地通过$(function(){})来绑定window.onload事件，不管写多少个，都没有问题，都有效，不会冲突。

4、弹出气泡

代码就是监听事件里的，再摘录一次，方便讲解。

let g = results[0].graphic//悬停所处对象<br>let geo = g.geometry<br>//注意坐标系要与view保持一致！这个非常重要！否则可能会报错，说找不到.x之类<br>let point = new Point(geo.x, geo.y, view.spatialReference)<br>view.popup.open({ location: point,<br>    title: '标题',<br>    content: '内容，html格式'<br>})

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