cesium实现自定义div图层（实现复杂标注效果、地图弹出框）

webgis开发12138

已于 2025-05-23 10:44:50 修改

阅读量240

点赞数 3

分类专栏： cesium 文章标签： cesium 前端

于 2025-05-23 09:53:23 首次发布

本文链接：https://blog.csdn.net/u014015203/article/details/148156408

版权

cesium 专栏收录该内容

7 篇文章

订阅专栏

1、创建自定义div类文件（customDiv.js）

class CustomDiv {
  name = 'CustomDiv'
  viewer = null
  position = null
  constructor({ viewer, id, name, position, style }) {
    this.viewer = viewer
    this.name = name || 'default'
    this.id = id
    this.position = position
    this.style = style || ''
    this.init()
  }
  //初始化
  init() {
    // 不存在则重新创建元素
    let containDiv = this.createDivDom()
    // 绑定到container下
    this.viewer.cesiumWidget.container.appendChild(containDiv)
    // 监听事件-实现div随地图移动
    this.viewer.scene.postRender.addEventListener((scene) => {
      // 世界坐标转换为屏幕坐标
      let screen = scene.cartesianToCanvasCoordinates(this.position)
      // div变换css矩阵
      if (screen && screen.x && screen.y)
        containDiv.style.transform = `matrix(1, 0, 0, 1, ${screen.x}, ${screen.y})`
    })
  }
  //创建div元素
  createDivDom() {
    let containDiv = document.createElement('div')
    containDiv.classList.add('map-divGraphic')
    this.name.split(' ').forEach((item) => {
      containDiv.classList.add(item)
    })
    if (this.id) {
      containDiv.setAttribute('id', this.id)
    }
    containDiv.style.cssText =
      'position: absolute;left: 0px;top: 0px;transform-origin: left bottom 0px;'
    containDiv.innerHTML = this.style?.html || ''
    return containDiv
  }
  //更改div的坐标
  setPosition(position) {
    this.position = position
  }
}
export default CustomDiv

2、使用方法

参数说明：

viewer：cesium地球视图
id：唯一值
name：名称
position：坐标位置
style：html - html字符串代码

import CustomDiv from './customDiv.js'

const viewer = new Cesium.Viewer('viewerDiv')
const entity = {
  viewer: viewer ,
  id: '唯一id值'
  name: 'name值',
  position: Cesium.Cartesian3.fromDegrees(x,y,z),
  style: {
    html: '<div>测试文本</div>'
  }
}
new CustomDiv(entity)