zyy-engine

图形引擎API


3D标签

<h1>3D标签 - Marker3D</h1> <p>图形引擎提供了下列类型,用于创建、管理和使用3D标签:</p> <ul> <li><code>BCore.Extension.Marker3DConfig</code> 标签配置参数</li> <li><code>BCore.Extension.Marker3D</code> 标签对象</li> <li><code>BCore.Extension.Marker3DManagerConfig</code> 标签管理器配置</li> <li><code>BCore.Extension.Marker3DManager</code> 标签管理器</li> </ul> <h2>类型介绍</h2> <h3>1.标签配置参数 - Marker3DConfig</h3> <pre><code class="language-javascript">new BCore.Extension.Marker3DConfig()</code></pre> <h4>成员变量</h4> <table> <thead> <tr> <th>成员变量</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>String</td> <td>标签名称,全局唯一</td> </tr> <tr> <td>color</td> <td>String</td> <td>文字颜色 <code>'#000000'</code></td> </tr> <tr> <td>fontSize</td> <td>number</td> <td>文字大小</td> </tr> <tr> <td>scale</td> <td>number</td> <td>标签缩放比例</td> </tr> <tr> <td>position</td> <td>{ x: 0, y: 0, z: 0 }</td> <td>世界坐标</td> </tr> <tr> <td>depthTest</td> <td>bool</td> <td>是否开启深度检测</td> </tr> <tr> <td>text</td> <td></td> <td>显示文字, 长度小于256</td> </tr> <tr> <td>icon</td> <td>HTMLImageElement</td> <td>显示图标, 长宽小于256</td> </tr> <tr> <td>placement</td> <td>可选值 (Left, Right, Up, Down)</td> <td>图标相对于文字的位置, 总长宽小于256</td> </tr> <tr> <td>sizeAttenuation</td> <td>bool</td> <td>视野衰减参数,默认为false(V2.9.7)</td> </tr> </tbody> </table> <h3>2.标签对象 - Marker3D</h3> <pre><code class="language-javascript">new BCore.Extension.Marker3D(config)</code></pre> <h4>参数</h4> <table> <thead> <tr> <th>参数名</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>config</td> <td>BCore.Extension.Marker3DConfig</td> <td>标签配置参数</td> </tr> </tbody> </table> <h4>返回值说明</h4> <table> <thead> <tr> <th>参数名</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>string</td> <td>标签名称</td> </tr> <tr> <td>position</td> <td>{ x, y, z }</td> <td>标签位置</td> </tr> </tbody> </table> <h3>3.标签管理器配置 - Marker3DManagerConfig</h3> <pre><code class="language-javascript">new BCore.Extension.Marker3DManagerConfig(viewer3D)</code></pre> <h4>成员变量</h4> <table> <thead> <tr> <th>成员变量</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>viewer3D</td> <td>BCore.Viewer.Viewer3D</td> <td>三维查看器实例</td> </tr> </tbody> </table> <h3>4.标签管理器 - Marker3DManager</h3> <pre><code class="language-javascript">new BCore.Extension.Marker3DManager(config)</code></pre> <h4>成员变量</h4> <table> <thead> <tr> <th>成员变量</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>config</td> <td>BCore.Extension.Marker3DManagerConfig</td> <td>配置参数</td> </tr> </tbody> </table> <h3>方法</h3> <ul> <li><code>addMarker3D(name, marker: Marker3D)</code>: 添加标签</li> <li><code>getMarker3D(name)</code>: 获取标签</li> <li><code>removeMarker3D(name)</code>: 移除标签</li> <li><code>clearAllMarker3D()</code>: 清除所有标签</li> <li><code>setCustomColorByNames(color: string, names: string[])</code>: 设置自定义颜色 - v3.2.0</li> <li><code>getCustomColorByName(name: string)</code>: 获取自定义颜色 - v3.2.0- <code>clearCustomColorByNames(names: string[])</code>: 清除自颜色 - v3.2.0</li> <li><code>clearAllCustomColor()</code>: 清除所有自定义颜色 - v3.2.0</li> <li><code>setCustomOpacityByNames(opacity: number, names: string[])</code>: 设置自定义透明度 - v3.2.0</li> <li><code>getCustomOpacityByName(name: string)</code>: 获取自定义透明度 - v3.2.0</li> <li><code>clearCustomOpacityByNames(names: string[])</code>: 清除自定义透明度 - v3.2.0</li> <li><code>clearAllCustomOpacity()</code>: 清除所有自定义透明度 - v3.2.0</li> <li><code>onClick(callback)</code>: 单击事件 - v3.2.0</li> <li><code>onDbClick(callback)</code>: 双击事件 - v3.2.0</li> </ul> <hr /> <h2>示例代码</h2> <h3>添加3D标签</h3> <pre><code class="language-javascript">var marker3dConfig = new BCore.Extension.Marker3DConfig(); marker3dConfig.icon = img; // img为HTMLImageElement var marker3d = new BCore.Extension.Marker3D(marker3dConfig); var marker3DManagerConfig = new BCore.Extension.Marker3DManagerConfig(mViewer3D); var marker3DManager = new BCore.Extension.Marker3DManager(marker3DManagerConfig); marker3DManager.addMarker3D('name', marker3d);</code></pre> <h3>获取标签</h3> <pre><code class="language-javascript">marker3DManager.getMarker3D('name');</code></pre> <h3>移除3D标签</h3> <pre><code class="language-javascript">marker3DManager.removeMarker3D('name');</code></pre> <h3>移除所有3D标签</h3> <pre><code class="language-javascript">marker3DManager.clearAllMarker3D();</code></pre> <h3>设置三维标签点击事件回调</h3> <pre><code class="language-javascript">marker3DManager.onClick((event) =&amp;gt; { console.log('marker点击事件触发'); });</code></pre> <h3>设置三维标签双击事件回调</h3> <pre><code class="language-javascript">marker3DManager.onDbClick((event) =&amp;gt; { console.log('marker双击事件触发'); });</code></pre> <p>以上内容涵盖了 <code>Marker3D</code> 及其相关功能的基本使用方法,请根据具体需求调整参数和回调函数。</p>

页面列表

ITEM_HTML