# cesium-popup-ts

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

Latest version **1.0.5** (published 2024-09-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install cesium-popup-ts
pnpm add cesium-popup-ts
yarn add cesium-popup-ts
bun add cesium-popup-ts
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2024-09-25 |
| First published | 2024-09-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | li-zhong-hua |
| Maintainers | li-zhong-hua |
| Keywords | cesium, popup, cesium-popup, typescript, web-gis |

## Links

- npm: https://www.npmjs.com/package/cesium-popup-ts
- Repository: https://gitee.com/joshua-li/cesium-popup
- npm.io page: https://npm.io/package/cesium-popup-ts

## Dependencies (1)

- [cesium](https://npm.io/package/cesium.md) 1.95

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2024-09-25
- 1.0.4 — 2024-09-25
- 1.0.3 — 2024-09-20
- 1.0.2 — 2024-09-20
- 1.0.1 — 2024-09-14
- 1.0.0 — 2024-09-14

## README

<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: 李中华
 * @Date: 2024-09-14 16:03:11
 * @LastEditTime: 2024-09-25 16:48:23
-->
# 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 模块

```ts
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 模块

```html
<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

---
_Source: https://npm.io/package/cesium-popup-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._