@nsc-earth-2/tooltip
TypeScript icon, indicating that this package has built-in type declarations

1.2.4 • Public • Published

@nsc-earth-2/tooltip

@nsc-earth-2/tooltip 是一个基于 Cesium 对象实现的 tooltip 组件,支持自定义内容。包含两个类:TooltipMouseTooltip

MouseTooltip 会创建一个跟随鼠标移动的 tooltip.

安装

npm install @nsc-earth-2/tooltip

使用

Tooltip

用法示例:

import { Cartesian2, Viewer } from "cesium";
import { Tooltip } from "@nsc-earth-2/tooltip";

const viewer = new Viewer("cesiumContainer");
const tooltip = new Tooltip(viewer, {
  offset: [10, -10],
  content: "Hello, World!",
});

tooltip.content = "Philadelphia";

// 显示(添加content后默认显示)
tooltip.show();
// 隐藏
tooltip.hide();

// 销毁 Tooltip
tooltip.destroy();

Options

Tooltip 类接受以下 options:

名称 类型 默认值 描述
offset Tuple [x, y] [0, 0] Tooltip 相对于鼠标或实体的位置偏移量
content stringElement '' Tooltip 的内容,可以是文本或 HTML 元素

方法

showAt(windowPosition: Cartesian2, content: string | Element): Tooltip

显示 Tooltip。接受两个参数:

  • windowPositionCartesian2 类型,tooltip 在屏幕上的位置
  • contentstringElement 类型,tooltip 的内容

返回值为 Tooltip 实例。

hide(): Tooltip

隐藏 Tooltip。

返回值为 Tooltip 实例。

MouseTooltip

用法示例:

import { Viewer } from "cesium";
import { MouseTooltip } from "@nsc-earth-2/tooltip";

const viewer = new Viewer("cesiumContainer");
const mouseTooltip = new MouseTooltip(viewer, {
  offset: [10, -10],
});

mouseTooltip.content = "Philadelphia";

// 显示(添加content后默认显示)
mouseTooltip.show();
// 隐藏
mouseTooltip.hide();

// 销毁 MouseTooltip
mouseTooltip.destroy();

Options

MouseTooltip 类继承自 Tooltip,接受相同的 options。

方法

show(): void

显示 MouseTooltip。

hide(): void

隐藏 MouseTooltip。

destroy(): void

销毁 MouseTooltip。

Readme

Keywords

Package Sidebar

Install

npm i @nsc-earth-2/tooltip

Weekly Downloads

3

Version

1.2.4

License

MIT

Unpacked Size

7.59 kB

Total Files

4

Last publish

Collaborators

  • zy_ajiu
  • wodehaochide
  • michelle1009