@mapgis/webclient-cesium-plugin 17.2.4 → 17.2.5

package/documention/KeyboardCameraController.html

@@ -0,0 +1,1313 @@
+<header id="page-title" class="page-title">
+    
+        <span class="page-title-main">类名</span>
+        <span class="page-title-sub">KeyboardCameraController</span>
+    
+</header>
+
+
+
+
+
+<section>
+
+<article>
+    <div class="container-overview">
+    
+        
+            <div class='vertical-section'>
+                <div class="members">
+                    <div class="member">
+                        
+
+
+    
+    <h4 class="name" id="KeyboardCameraController">
+        <a class="href-link" href="#KeyboardCameraController">#</a>
+        
+        <span class="code-name" id="KeyboardCameraController" style="font-size:30px">
+            
+                new KeyboardCameraController<span class="signature">(viewer, options)</span>
+            
+        </span>
+    </h4>
+    
+
+    
+    <div class="description">
+        <p>场景相机漫游工具，可以实现沉浸式的鼠标键盘漫游功能，具体操作方法如下：</p>
+<p>1. 相机平移操作，这类操作不会改变相机的朝向，只会改变相机的位置：</p>
+<ul>
+<li><code>W</code>：相机位置向前移动</li>
+<li><code>S</code>：相机位置向后移动</li>
+<li><code>A</code>：相机位置向左移动</li>
+<li><code>D</code>：相机位置向右移动</li>
+<li><code>Q</code>：相机位置升高</li>
+<li><code>E</code>：相机位置降低</li>
+</ul>
+<p>2. 相对于相机视点操作，其中<code>U</code>，<code>O</code>，<code>J</code>，<code>L</code>操作会改变相机的位置，也会改变相机的朝向，而<code>I</code>，<code>K</code>操作只会改变相机相较视点的距离（在执行<code>U</code>，<code>O</code>，<code>J</code>，<code>L</code>操作时请勿同时执行其他按键操作）：</p>
+<ul>
+<li><code>I</code>：相机视角靠近屏幕中心点</li>
+<li><code>K</code>：相机视角远离屏幕中心点</li>
+<li><code>J</code>：绕屏幕中心点向左旋转</li>
+<li><code>L</code>：绕屏幕中心点向右旋转</li>
+<li><code>U</code>：绕屏幕中心点向上旋转</li>
+<li><code>O</code>：绕屏幕中心点向下旋转</li>
+</ul>
+<p>3. 相机自身操作，这类操作不会改变相机的位置，只会改变相机的朝向（在全屏状态下可使用鼠标调整相机视角）：</p>
+<ul>
+<li><code>↑</code>：向上抬高视角</li>
+<li><code>↓</code>：向下降低视角</li>
+<li><code>←</code>：向左移动视角</li>
+<li><code>→</code>：向右移动视角</li>
+</ul>
+<p>4. 鼠标操作：</p>
+<ul>
+<li>开启鼠标操作功能后，页面将进入全屏模式，此时相机视角可通过鼠标移动进行操作</li>
+</ul>
+<p>5. 辅助操作：</p>
+<ul>
+<li><code>Shift</code>：加速相机平移操作，调整移动步长为原来的两倍</li>
+<li><code>R</code>：重置视角到初始视角，仅在参数<code>initView</code>定义时有效</li>
+</ul>
+    </div>
+    
+
+
+
+
+
+
+
+
+
+    <h4>参数</h4>
+    
+<div class="table-container">
+    <table class="params table">
+        <thead>
+        <tr>
+            
+            <th>名称</th>
+            
+
+            <th>类型</th>
+
+            
+            <th style="min-width: 100px;">默认值</th>
+            
+
+            <th class="last">描述</th>
+        </tr>
+        </thead>
+
+        <tbody>
+        
+
+            
+<tr class="deep-level-0">
+  
+      <td class="name"><code>viewer</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Object
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+      </td>
+  
+
+  <td class="description last"><p>三维地球场景的视图对象</p></td>
+</tr>
+
+
+
+        
+
+            
+<tr class="deep-level-0">
+  
+      <td class="name"><code>options</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Object
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+      </td>
+  
+
+  <td class="description last"><p>场景相机漫游工具的配置项</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>enableMouseLook</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          true
+      
+      </td>
+  
+
+  <td class="description last"><p>是否开启鼠标控制模式，开启后将进入全屏模式，此时相机视角可通过鼠标移动进行操作</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>enableDynamicMoveStep</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          true
+      
+      </td>
+  
+
+  <td class="description last"><p>是否开启动态移动步长，开启后将根据视角距离地面高度动态计算移动步长，<code>moveStep</code>参数将不再生效</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>enableCollisionDetection</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          false
+      
+      </td>
+  
+
+  <td class="description last"><p>是否开启碰撞检测</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>mouseSensitivity</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          10
+      
+      </td>
+  
+
+  <td class="description last"><p>鼠标灵敏度，该参数仅在鼠标控制模式下有效</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>moveStep</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          5
+      
+      </td>
+  
+
+  <td class="description last"><p>移动步长，单位为米</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>rotateStep</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+          1
+      
+      </td>
+  
+
+  <td class="description last"><p>旋转步长，单位为度</p></td>
+</tr>
+
+
+  
+    
+<tr class="deep-level-1">
+  
+      <td class="name"><code>initView</code></td>
+  
+
+  <td class="type">
+  
+      
+<span class="param-type">
+    
+             Object
+    
+</span>
+
+
+
+  
+  </td>
+
+  
+      <td class="default">
+      
+      </td>
+  
+
+  <td class="description last"><p>初始视角，参数与<code>Camera#setView</code>方法相同，开始漫游时视角将重置到该视角，若不设置则默认从当前视角开始漫游</p></td>
+</tr>
+
+
+  
+
+
+
+        
+        </tbody>
+    </table>
+</div>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h5>示例</h5>
+    
+    
+        <pre class="prettyprint"><code>// 初始化视图对象
  new Cesium.Cesium3DTileset({
    url: 'http://192.168.82.89:8200/3DData/ModelCache/3DTileset/1.0/dayantaresult/tileset.json'
  })
  enableMouseLook: false,
  enableDynamicMoveStep: false,
  moveStep: 0.2,
  initView: {
    destination: Cesium.Cartesian3.fromDegrees(108.9594, 34.2184, 8),
    orientation: {
      heading: 0,
      pitch: 0,
      roll: 0
    }
  }
+    
+
+
+
+                    </div>
+                </div>
+            </div>
+        
+    
+    </div>
+    
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <div class='vertical-section'>
+            <h3 id='member'>成员变量</h3>
+            <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量概述</h4>
+            <div class="table-container">
+                <table class="params table">
+                    <thead>
+                    <tr>
+                        <th>名称</th>
+                        <th>类型</th>
+                        <th>描述</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#enableDynamicMoveStep">enableDynamicMoveStep</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置当前是否开启动态移动步长</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#enableMouseLook">enableMouseLook</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置当前是否开启鼠标操作功能，当该参数为true时，开启漫游后页面将进入全屏模式，由于浏览器安全策略
+的限制，此时<code>start()</code>方法必需由一个用户手势触发（如主动点击按钮），而不能由程序被动触发</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#initView">initView</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Object
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置初始视角</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#mouseSensitivity">mouseSensitivity</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置鼠标灵敏度</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#moveStep">moveStep</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置移动步长</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#rotateStep">rotateStep</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>获取或设置旋转角度</p></code></td>
+                            </tr>
+                        
+                    </tbody>
+                </table>
+            </div>
+            <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量详情</h4>
+            <div class="members">
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="enableDynamicMoveStep">
+    <a class="href-link" href="#enableDynamicMoveStep">#</a>
+    
+    <span class="code-name">
+        enableDynamicMoveStep
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置当前是否开启动态移动步长</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Boolean
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="enableMouseLook">
+    <a class="href-link" href="#enableMouseLook">#</a>
+    
+    <span class="code-name">
+        enableMouseLook
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置当前是否开启鼠标操作功能，当该参数为true时，开启漫游后页面将进入全屏模式，由于浏览器安全策略
+的限制，此时<code>start()</code>方法必需由一个用户手势触发（如主动点击按钮），而不能由程序被动触发</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Object
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="initView">
+    <a class="href-link" href="#initView">#</a>
+    
+    <span class="code-name">
+        initView
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置初始视角</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="mouseSensitivity">
+    <a class="href-link" href="#mouseSensitivity">#</a>
+    
+    <span class="code-name">
+        mouseSensitivity
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置鼠标灵敏度</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="moveStep">
+    <a class="href-link" href="#moveStep">#</a>
+    
+    <span class="code-name">
+        moveStep
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置移动步长</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+    <span class="method-parameter is-pulled-right">
+        <label>类型:</label>
+        
+<span class="param-type">
+    
+             Number
+    
+</span>
+
+
+
+    </span>
+
+<h4 class="name" id="rotateStep">
+    <a class="href-link" href="#rotateStep">#</a>
+    
+    <span class="code-name">
+        rotateStep
+    </span>
+    
+</h4>
+
+
+
+
+<div class="description">
+    <p>获取或设置旋转角度</p>
+</div>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+</div>
+            
+            </div>
+        </div>
+    
+
+    
+        <div class='vertical-section'>
+            <h3 id='function'>方法</h3>
+            <h4 style="margin-top: 20px;margin-bottom: 20px;">方法概述</h4>
+            <div class="members">
+            <div class="table-container">
+                <table class="params table">
+                    <thead>
+                    <tr>
+                        <th>名称</th>
+                        <th>返回值类型</th>
+                        <th>描述</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#start">start</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>开始场景相机漫游</p></code></td>
+                            </tr>
+                        
+                            <tr class="deep-level-0">
+                                <td class="name"><code><a href="#stop">stop</a></code></td>
+                                <td class="name">
+                                    <code>
+                                        
+                                    </code>
+                                </td>
+                                <td class="name"><code><p>停止场景相机漫游，若在全屏状态下，则无需调用该方法停止场景相机漫游，只需要按下<code>ESC</code>或<code>F11</code></p></code></td>
+                            </tr>
+                        
+                    </tbody>
+                </table>
+            </div>
+            <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
+            
+                <div class="member">
+
+
+    
+    <h4 class="name" id="start">
+        <a class="href-link" href="#start">#</a>
+        
+        <span class="code-name" id="start" style="font-size:30px">
+            
+                start<span class="signature">()</span>
+            
+        </span>
+    </h4>
+    
+
+    
+    <div class="description">
+        <p>开始场景相机漫游</p>
+    </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</div>
+            
+                <div class="member">
+
+
+    
+    <h4 class="name" id="stop">
+        <a class="href-link" href="#stop">#</a>
+        
+        <span class="code-name" id="stop" style="font-size:30px">
+            
+                stop<span class="signature">()</span>
+            
+        </span>
+    </h4>
+    
+
+    
+    <div class="description">
+        <p>停止场景相机漫游，若在全屏状态下，则无需调用该方法停止场景相机漫游，只需要按下<code>ESC</code>或<code>F11</code></p>
+    </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</div>
+            
+            </div>
+        </div>
+    
+
+    
+
+    
+</article>
+
+</section>