插件开发示例
本示例展示如何基于 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 构件间双向定位