Skip to content

插件开发示例

本示例展示如何基于 Plugin 基类开发业务插件,并完成初始化、事件监听与资源释放。

完整示例代码

javascript
import * as GraphicsEngine from '../core/Viewer3D@v2.1.5.module.js';
import PluginPackage from '../plugins/PluginPackage@2.1.5.module.js';

class DemoHighlightPlugin extends PluginPackage.Plugin {
  constructor(viewer3D, options = {}) {
    super(viewer3D, {
      name: options.name || 'DemoHighlightPlugin',
      enabled: options.enabled ?? true
    });

    this._onSelected = this._onSelected.bind(this);
  }

  initPlugin() {
    // 启用拾取
    this.viewer3D.selection.enabled = true;
    this.addEvent(this.viewer3D.selection, 'selected', this._onSelected);
    console.log('[DemoHighlightPlugin] 初始化完成');
  }

  _onSelected(event) {
    const object = event?.object;
    if (!object) return;

    // 这里只做演示日志,业务中可接高亮、属性面板联动等
    console.log('[DemoHighlightPlugin] 选中对象:', object.name || object.uuid);
  }

  stopPlugin() {
    // 基类中会统一移除 addEvent 注册的事件
    console.log('[DemoHighlightPlugin] 停止');
  }

  dispose() {
    super.dispose();
    console.log('[DemoHighlightPlugin] 资源已释放');
  }
}

// ===== 使用示例 =====
const container = document.getElementById('app');
const config = new GraphicsEngine.Config('地质博物馆建筑', container);
config.setStaticPath('../public/models/');
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;

const viewer3D = GraphicsEngine.Viewer3D.Initializer(
  config,
  (progress) => console.log('加载进度', progress),
  (error) => console.error('加载错误', error)
);

const demoPlugin = new DemoHighlightPlugin(viewer3D, {
  name: 'DemoHighlightPlugin',
  enabled: true
});

// 注册到扩展管理器(按项目实际 API 调整)
viewer3D.extensionManager.addPlugin('demo-highlight', demoPlugin, true);

开发要点

1. 继承插件基类

javascript
class MyPlugin extends PluginPackage.Plugin {
  // ...
}

2. 生命周期组织

  • constructor:初始化配置与内部状态
  • initPlugin:注册事件、建立业务监听
  • stopPlugin:停用时的业务收尾
  • dispose:释放资源,避免内存泄漏

3. 事件管理建议

统一通过 addEvent 注册监听,便于在 dispose 时由基类统一清理。

场景扩展示例

  • Measure 插件联动:选中构件后自动进入测量模式
  • 与业务 UI 联动:选中对象后展示属性面板
  • 与图模映射联动:在 CAD 图纸与 3D 构件间双向定位

相关链接

逆维悦动 智建未来