1. 二次开发入口及调试方式

视频介绍

欢迎来到山海鲸可视化的二次开发系列教程。本文将围绕二次开发的入口、开发环境配置、基本操作方法及调试方式进行讲解，帮助您更好地理解和使用山海鲸的二次开发能力。

一、平台简介与开发背景

山海鲸可视化是一款零代码的数字孪生可视化平台。用户通过拖拽操作和简单配置，即可完成复杂的二维和三维项目构建与交互逻辑设置。然而，在面对业务逻辑复杂、组件高度关联的场景时，零代码方式可能已无法完全满足需求，此时便需要借助代码开发。

尽管山海鲸主打零代码，但其提供了高度自由、灵活的二次开发接口体系。开发者不仅可以调用丰富的 API，还能动态获取和修改几乎所有支持手动设置的属性，从而大大增强项目的灵活性和拓展性。

二、二次开发入口

1. 项目创建与组件添加
首先，新建一个空白的数字孪生项目，并命名为“二次开发示例项目”。完成创建后，即可进入一个空白的可视化画布。

注意：Web SaaS 版本与客户端版本在功能上存在细微差异，这里以客户端版本为例进行讲解。

在项目画布中添加任意组件，例如柱状图。选中该组件后，右侧将显示包括样式、交互、数据、代码等多个设置选项。

2. 调用代码示例
以“鼠标穿透”功能为例，点击该项右侧的“···”按钮，选择“调用代码示例”即可查看相关属性的设置和获取方法，甚至可以复制示例代码进行使用。部分属性也支持通过 `postMessage` 方式在 iframe 集成场景下传递。

3. 编写和管理代码
点击组件设置面板中的“代码”标签页，点击加号可为该组件挂载一个代码文件。支持挂载多个代码文件，通过“配置1”、“配置2”等切换查看。建议每个代码文件只包含一个类，若功能复杂可通过多个类进行拆分封装。

点击编辑按钮（客户端版本支持）即可打开代码编辑器，如 VS Code。首次使用时可设置默认打开的编辑器。代码文件以标准 JavaScript 编写，并支持调用山海鲸内置 API。

三、二次开发文档参考
在代码模板中，我们提供了标准类 `SampleExtension`，其中包含二次开发的基本属性和方法。开发者可通过按住 `Ctrl` 并点击注释中的链接，或在山海鲸官网 > 开发者文档中，进入完整的 API 参考页面。

开发者文档主要包括两个板块：
组件开发：详解组件级扩展方式与 API 使用。
系统集成：介绍与外部系统的集成开发方式。

四、调试方式说明
虽然当前版本不支持 IDE 中的断点调试功能，但可以使用标准的 `console.log` 进行输出查看。
点击右下角的“输出”按钮，即可在弹出窗口中查看输出内容，支持打印字符串、对象、JSON 等任意数据类型。

五、Web 版本使用说明
Web 版本不支持本地代码编辑器直接打开代码，但可以通过以下方式操作：

1. 打开项目并找到目标组件；
2. 点击代码文件，按下 `Ctrl` 并点击文件名，打开完整代码；
3. 将代码复制到本地进行修改；
4. 修改完成后，在平台中重新上传代码文件；
5. 系统将自动刷新代码文件并应用更改。

六、总结
本节内容主要介绍了山海鲸二次开发的使用入口、代码挂载与编辑方法，以及调试方式。通过这些功能，开发者可以将山海鲸从“零代码平台”拓展为“灵活扩展平台”，应对更多复杂场景的数字孪生开发需求。

在后续课程中，我们将深入讲解山海鲸二次开发的接口体系与最佳实践，敬请期待。