自定义DOM标签
在场景中，我们可以创建自定义的DOM标签，用于在场景中展示一些自定义的DOM内容，以增强用户体验。
自定义DOM标签
在场景中，我们可以创建自定义的DOM标签，用于在场景中展示一些自定义的DOM内容，以增强用户体验。
自定义 DOM 标签是指开发者根据需求创建的 HTML 元素（如:
），并通过 CSS 和 JavaScript 对其进行样式化和功能绑定。
1. 功能说明
可以通过操作DOM来动态添加、修改或删除DOM标签。
2. 构造
new DynamicDom(properties)
代码示例如下：
const divLabel = new ubm.DynamicDom({
scene, // 必填:场景
// 位置点的方位
alignment: 'top-center',
//位置信息点
location: {
latitude: 39.91276366941874,
longitude: 116.39103281819857,
z: 0,
},
//在此位置的DOM
content,
//DOM大小
width: 50,
height: 50
})
传递给构造函数DynamicDom的所有属性列表properties可查看后续属性说明。
3. 属性
| 属性 | 类型 | 可选 | 说明 |
|---|---|---|---|
| scene | IScene | 必填 | 场景 |
| alignment | string | 必填 | 位置点方位 |
| location | IPoint | 必填 | 位置信息点 |
| content | string | HTMLElement | 必填 | 此位置的DOM |
| width | number | 必填 | 宽度 |
| height | number | 必填 | 高度 |
3.1 位置点方位
属性alignment表示，相对于所放在位置点location的具体方位，共有以下几个：
| 值 | 说明 |
|---|---|
| auto | 自动 |
| top-center | 顶部中间 |
| top-left | 顶部左侧 |
| top-right | 顶部右侧 |
| bottom-center | 底部中间 |
| bottom-left | 底部左侧 |
| bottom-right | 底部右侧 |
3.2 位置信息点
属性location表示DynamicDom在场景上的具体地理位置坐标。
其中类型IPoint的数据结构如下：
interface IPoint {
latitude: number
longitude: number
z: number
}
3.3 此位置的DOM
属性content表示自定义的dom。
如：创建一个动态坐标点，代码如下：
const content = document.createElement('div')
content.innerHTML = `<img src="https://cdn.hb6oss.xstore.ctyun.cn/assets/poi.gif" alt="" >`
4. 方法
| 方法 | 说明 |
|---|---|
| create() | 创建 |
| updatePosition() | 更新标签的位置 |
| destory() | 销毁 |
4.1 创建
create(options: properties): void
创建DOM标签，代码示例如下：
divLabel.create({
scene, // 必填:场景
// 位置点的方位
alignment: 'top-center',
//位置信息点
location: {
latitude: 39.91276366941874,
longitude: 116.39103281819857,
z: 0,
},
//在此位置的DOM
content,
//DOM大小
width: 50,
height: 50
})
4.2 更新标签的位置
updatePosition(location: IPoint): void
更新DOM标签的位置，代码示例如下：
divLabel.updatePosition({
latitude: 39.91876766941874,
longitude: 116.39103281819857,
z: 0,
})
4.3 销毁
destory(): void
销毁DOM标签，代码示例如下：
divLabel.destory()
BIMFlux AI
