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) =&gt; {
console.log('marker点击事件触发');
});</code></pre>
<h3>设置三维标签双击事件回调</h3>
<pre><code class="language-javascript">marker3DManager.onDbClick((event) =&gt; {
console.log('marker双击事件触发');
});</code></pre>
<p>以上内容涵盖了 <code>Marker3D</code> 及其相关功能的基本使用方法,请根据具体需求调整参数和回调函数。</p>