cesium-popup-ts

介绍

基于 cesium 开发的一个自定义弹窗类。传入 HTML 元素和坐标点 position 即可使用。弹窗位置跟随坐标点实时更新。可以自定义弹窗相对坐标点的位置、偏移量等，可以配置弹窗自适应，尽量让弹窗显示在 cesium 容器内。

安装教程

1. npm i cesium-popup-ts

使用说明

配置项 options 说明

选项	类型	默认值	描述	备注
dom	HTMLElement	无	弹窗的 DOM 元素，必须提供此元素来作为弹窗的内容。	必选项
viewer	Cesium.Viewer	无	Cesium 的 Viewer 实例，用于关联 Cesium 场景。	必选项
置。	必选项
isAdaptive	boolean	false	是否自适应弹窗大小。	可选项，设置为 true 时，弹窗自动调整大小以适应内容。
offsetLeft	number	0	弹窗相对于指定位置的水平偏移量，单位为像素。	可选项
offsetTop	number	0	弹窗相对于指定位置的垂直偏移量，单位为像素。	可选项
verticalOrigin	VerticalOrigin (TOP, CENTER, BOTTOM)	VerticalOrigin.TOP	弹窗相对于位置的垂直对齐方式。	可选项，可选值包括 VerticalOrigin.TOP, CENTER, BOTTOM。
horizontalOrigin	HorizontalOrigin (LEFT, CENTER, RIGHT)	HorizontalOrigin.LEFT	弹窗相对于位置的水平对齐方式。	可选项，可选值包括 HorizontalOrigin.LEFT, CENTER, RIGHT。

使用示例

• ES 模块

import { CesiumPopup } from "cesium-popup-ts";
const popup = new CesiumPopup({
  dom: document.getElementById("popup"),
  viewer: cesiumViewer,
  isAdaptive: true,
  offsetLeft: 10,
  offsetTop: 20,
  verticalOrigin: CesiumPopup.VerticalOrigin.BOTTOM,
  horizontalOrigin: CesiumPopup.HorizontalOrigin.RIGHT,
});
popup.bindTo(new Cesium.Cartesian3(12, 34, 56789));

• UMD 模块

<script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
<link
  href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css"
  rel="stylesheet"
/>
<script src="../dist/index.umd.cjs"></script>
<script type="module">
  const popup = new CesiumPopup({
    dom: document.getElementById("popup"),
    viewer: cesiumViewer,
    isAdaptive: true,
    offsetLeft: 10,
    offsetTop: 20,
    verticalOrigin: CesiumPopup.VerticalOrigin.BOTTOM,
    horizontalOrigin: CesiumPopup.HorizontalOrigin.RIGHT,
  });
  popup.bindTo(new Cesium.Cartesian3(12, 34, 56789));
</script>

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request