创建dom，添加点击事件

最新推荐文章于 2024-10-08 17:48:41 发布

GIS瞧葩菜

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量249

点赞数 2

分类专栏： web 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/this__valve/article/details/141940176

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 let htmlmodel = `
      <div  onclick='chickModelCom(${JSON.stringify(model)})'  style='cursor:pointer;pointer-events:auto;z-index: 99;font-size: 10px;color: #fff; display: inline-block; text-align: center;'>
      <div style='width:124px;height:30px;line-height: 30px; background-image: url(${back});background-repeat: no-repeat;background-size: 100% 100%; '>
      ${model.name} -:${model.speed}m/s
      </div>
      <div style='width: 20px; padding-top:20px; margin-left:49px; margin-top:12px; background-image: url(${modelPoint});background-repeat: no-repeat;'>
      </div>
      </div>
      `

点击事件

 window['chickModelCom'] = (valueParam) => {
    chickModelCom(valueParam)
  }
  const chickModelCom = (valueParam) => {
    console.log('valueParam', valueParam)
    ChickModelData = valueParam
    showGate.value = true
  }

window['chickModelCom'] 是一个将函数赋给全局 window 对象的方式。这样可以让 chickModelCom 函数在全局范围内被调用。这个全局函数可以在浏览器的任何地方访问和执行，用于在不同的脚本或模块之间共享功能。

 addHtml(lngLatHeight, html, offset) {
    let htmlOverlay = document.createElement('div')
    htmlOverlay.style.zIndex = 9999
    htmlOverlay.style.position = 'absolute'
    htmlOverlay.style.display = 'none'
    htmlOverlay.style.pointerEvents = 'none'

    htmlOverlay.innerHTML = html
    document.getElementById(this.cesiumID).appendChild(htmlOverlay)

    var scratch = new Cesium.Cartesian2()
    let the = this
    this.viewer.scene.preRender.addEventListener(function () {
      var position = Cesium.Cartesian3.fromDegrees(lngLatHeight[0], lngLatHeight[1], lngLatHeight[2])
      var canvasPosition = the.viewer.scene.cartesianToCanvasCoordinates(position, scratch)
      if (Cesium.defined(canvasPosition)) {
        let top = htmlOverlay.offsetHeight + offset.top
        let left = htmlOverlay.offsetWidth / 2 + offset.left
        htmlOverlay.style.top = canvasPosition.y - top + 'px'
        htmlOverlay.style.left = canvasPosition.x - left + 'px'
      } else {
      }
      if (htmlOverlay.style.display == 'none') {
        window.setTimeout(() => {
          htmlOverlay.style.display = 'block'
        }, 50)
      }
    })
    return htmlOverlay
  },