Class Popup2D

2d的html的信息弹出窗

Hierarchy

  • CSS2DObject
    • Popup2D

Constructors

Properties

_anchor: Anchor
_classList: Set<string>
_closeButton: HTMLElement
_container: HTMLElement
_content: HTMLElement
_pos?: [number, number]
_tip: HTMLElement
app: App
isPopup2D: boolean = true
options: PopupOptions
signal: {
    close: Signal;
    elementSizeReady: Signal;
    open: Signal;
} = ...

Type declaration

Methods

  • Returns void

  • Returns void

  • Parameters

    • offset: any

    Returns Anchor

  • Returns void

  • 将CSS类名添加到弹出容器元素中。

    Parameters

    • className: string

      Non-empty string with CSS class name to add to popup container.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    const popup = new vjvjmap3d.Popup();
    popup.addClassName('some-class');
  • 增加弹出信息框.

    Parameters

    • app: App | Object3D<Object3DEventMap> | Entity

      add the popup to.

    • Optional curApp: App

    Returns Popup2D

  • 获取信息弹出框元素.

    Returns HTMLElement

    Returns container element.

    Example

    // Change the `Popup` element's font size
    const popup = new vjvjmap3d.Popup()
    .setLngLat([-96, 37.8])
    .setHTML("<p>Hello World!</p>")
    .addTo(app);
    const popupElem = popup.getElement();
    popupElem.style.fontSize = "25px";
  • 获取信息弹出框最大宽度.

    Returns string

    The maximum width of the popup.

    Example

    const maxWidth = popup.getMaxWidth();
    
  • 获取位置.

    Returns Vector3

  • Returns void

  • 弹出信息框是否打开.

    Returns boolean

    true 打开, false 关闭

    Example

    const isPopupOpen = popup.isOpen();
    
  • Returns boolean

  • 移除弹出信息框.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    const popup = new vjvjmap3d.Popup().addTo(app);
    popup.remove();
  • 从弹出式容器元素中删除一个CSS类。

    Parameters

    • className: string

      Non-empty string with CSS class name to remove from popup container.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    const popup = new vjvjmap3d.Popup({className: 'some classes'});
    popup.removeClassName('some');
  • 设置颜色

    Parameters

    • Optional bkColor: string

      背景色

    • Optional closeBtnColor: string

      关闭按钮颜色

    Returns void

  • 将弹出窗口的内容设置为作为DOM节点提供的元素.

    Parameters

    • htmlNode: Node

      A DOM node to be used as content for the popup.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    // create an element with the popup content
    const div = window.document.createElement('div');
    div.innerHTML = 'Hello, world!';
    popup.setDOMContent(div)
  • 设置信息弹出框html内容.

    Parameters

    • html: string

      A string representing HTML content for the popup.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    popup.setHTML("<h1>Hello World!</h1>")
    
  • 设置信息弹出框最大宽度. CSS 属性 max-width.

    Parameters

    • maxWidth: string

      A string representing the value for the maximum width.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    popup.setMaxWidth('50');
    
  • 设置信息弹出框偏移量

    Parameters

    • Optional offset: PopopOffset

      Sets the popup's offset. The Object is of the following structure

    Returns Popup2D

    this.

    Example

    popup.setOffset(10);
    
  • Parameters

    • opacity: string | number

    Returns void

  • 设置位置.

    Parameters

    • pos: number | [number, number, number] | Vector3
    • Optional y: number
    • Optional z: number

    Returns Popup2D

  • 设置信息弹出框信息内容.

    This function creates a Text node in the DOM, so it cannot insert raw HTML. Use this method for security against XSS if the popup content is user-provided.

    Parameters

    • text: string

      Textual content for the popup.

    Returns Popup2D

    Returns itself to allow for method chaining.

    Example

    popup.setText('Hello, world!')
    
  • Returns void

  • 在弹出容器上添加或删除给定的CSS类,具体取决于容器当前是否具有该类。

    Parameters

    • className: string

      Non-empty string with CSS class name to add/remove.

    Returns boolean

    If the class was removed return false. If the class was added, then return true.

    Example

    const popup = new vjvjmap3d.Popup();
    popup.toggleClassName('highlighted');
  • Parameters

    • Optional cursor: [number, number]

    Returns void

  • Returns void

  • Parameters

    Returns {
        bottom: number[];
        bottom-left: number[];
        bottom-right: number[];
        center: number[];
        left: number[];
        right: number[];
        top: number[];
        top-left: number[];
        top-right: number[];
    }

    • bottom: number[]
    • bottom-left: number[]
    • bottom-right: number[]
    • center: number[]
    • left: number[]
    • right: number[]
    • top: number[]
    • top-left: number[]
    • top-right: number[]