JSAPI Three API Reference
    正在准备搜索索引...

    类 DOMOverlay

    DOM覆盖物基类，用于在地图上添加HTML元素。支持自定义位置、偏移和拖拽功能。

    // 创建一个基础DOM覆盖物
    const overlay = engine.add(new mapvthree.DOMOverlay({
        point: [116.404, 39.915, 0],
        dom: document.createElement('div'),
        offset: [0, 0],
        enableDragging: true
    }));

    // 创建一个HTML字符串的覆盖物
    const htmlOverlay = engine.add(new mapvthree.DOMOverlay({
        point: [116.404, 39.915, 0],
        dom: '<div class="custom-overlay">Hello World</div>'
    }));

    层级 (查看层级一览)

    索引

    构造函数

    constructor

    方法

    dispose

    访问器

    className dom enableDragging offset point stopPropagation visible

    构造函数

    • 创建DOM覆盖物

      参数

      • parameters: {
            className?: string;
            dom: string | HTMLElement;
            enableDragging?: boolean;
            offset?: number[];
            point?: number[];
            visible?: boolean;
        } = {}

        配置参数

        • 可选className?: string

          CSS类名

        • dom: string | HTMLElement

          DOM元素或HTML字符串

        • 可选enableDragging?: boolean

          是否可拖拽，默认值：false

        • 可选offset?: number[]

          像素偏移量, 默认值：[0, 0]

        • 可选point?: number[]

          位置坐标 [经度,纬度,高度]

        • 可选visible?: boolean

          是否可见，默认值：true

      返回 DOMOverlay

    方法

    • 内存释放

      返回 void

    访问器

    • get className(): string

      CSS类名

      返回 string

    • set className(className: string): void

      设置CSS类名

      参数

      • className: string

        CSS类名

      返回 void

      overlay.className = 'custom-overlay';
    • get dom(): HTMLElement

      获取DOM元素

      返回 HTMLElement

    • set dom(value: string | HTMLElement): void

      设置DOM元素

      参数

      • value: string | HTMLElement

        DOM元素或HTML字符串

      返回 void

      const dom = document.createElement('div');
      dom.className = 'custom-overlay';
      dom.innerHTML = 'Hello World';
      overlay.dom = dom;

      const domString = `
          <div class="dom-overlay-custom">
              <div class="overlay-body">
                  <div class="overlay-title">Hello World</div>
              </div>
           </div>
      `
      overlay.dom = domString
    • get enableDragging(): boolean

      是否启用拖拽，默认值：false

      返回 boolean

    • set enableDragging(value: boolean): void

      设置是否启用拖拽

      参数

      • value: boolean

        是否启用拖拽

      返回 void

      overlay.enableDragging = true;
    • get offset(): number[]

      像素偏移量 [x, y]，默认值：[0, 0]

      返回 number[]

    • set offset(value: number[]): void

      设置像素偏移量

      参数

      • value: number[]

        像素偏移量 [x, y]

      返回 void

      overlay.offset = [10, 10];
    • get point(): number[]

      坐标位置 [经度, 纬度, 高度]

      返回 number[]

    • set point(value: any): void

      设置坐标位置

      参数

      • value: any

        坐标位置 [经度, 纬度, 高度] 或 THREE.Vector2/Vector3 对象

      返回 void

      // 使用数组
      overlay.point = [116.404, 39.915, 0];

      // 使用 THREE.Vector2
      overlay.point = new THREE.Vector2(116.404, 39.915);

      // 使用 THREE.Vector3
      overlay.point = new THREE.Vector3(116.404, 39.915, 0);
    • get stopPropagation(): boolean

      是否阻止事件冒泡，默认值：false

      返回 boolean

    • set stopPropagation(value: boolean): void

      设置是否阻止事件冒泡

      参数

      • value: boolean

        是否阻止事件冒泡

      返回 void

      overlay.stopPropagation = true;
    • get visible(): boolean

      是否可见，默认值：true

      返回 boolean

    • set visible(value: boolean): void

      设置是否可见

      参数

      • value: boolean

        是否可见

      返回 void

      overlay.visible = false;

    显示设置

    成员可见性

    目录

    构造函数
    方法
    访问器