線上直播系統原始碼，滑鼠懸停後彈出氣泡

線上直播系統原始碼，滑鼠懸停後彈出氣泡實現的相關程式碼

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

以上就是 線上直播系統原始碼，滑鼠懸停後彈出氣泡實現的相關程式碼，更多內容歡迎關注之後的文章