DivBoard Div 面板

演练场

引入

import { DivBoard } from "@m-tech/gis-core";

new DivBoard(position, container);

入参

参数	类型	必填	默认值	描述
position	Position	是	-	位置
container	HTMLElement | string	是	-	Dom 内容
options	Object	否	-	配置项
options.id	string | number	否	-	唯一标识
options.offset	[number, number]	否	-	偏移像素
options.transformOrigin	[string, string]	否	'center center'	变换中心点

属性

属性	类型	读/写	描述
show	boolean	读写	设置元素是否可见
position	Position	读写	设置位置
offset	[number, number]	读写	设置元素偏移，默认 [0, 0]，偏移单位：px 像素

方法

• setStyle(style)

设置样式。

divBoard.setStyle({
  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 6000), // 根据距离控制是否显示
  translucencyByDistance: new Cesium.NearFarScalar(2000, 1, 6000, 0), // 根据距离控制透明底
  scaleByDistance: new Cesium.NearFarScalar(1000, 1, 6000, 0), // 根据距离控制缩放比例
});

• on(OverlayEventType, Function)

监听事件。

示例

import {
  DivBoard,
  Position,
  DomUtil,
  OverlayEventType,
} from "@m-tech/gis-core";

// 新建图层
const layer = new DivBoard({
  id: "html-layer",
}).addToViewer(viewer);

// 创建dom元素
const dom = DomUtil.create("div");
dom.innerText = "hello world!";

// 创建 DivBoard 元素并添加到图层
const divBoard = new DivBoard(new Position(114.315782, 30.47449, 0), dom, {
  id: "testDiv",
}).addToLayer(layer);

// 调整位置
divBoard.position = new Position(114.47449, 30.315782, 0);

// 设置样式
divBoard.setStyle({
  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 6000), // 根据距离控制是否显示
  translucencyByDistance: new Cesium.NearFarScalar(2000, 1, 6000, 0), // 根据距离控制透明底
  scaleByDistance: new Cesium.NearFarScalar(1000, 1, 6000, 0), // 根据距离控制缩放比例
});

// 从layer读取
layer.getOverlayById("testDiv");

// 监听点击事件
divBoard.on(OverlayEventType.CLICK, (e) => {
  console.log(e);
});