@mapgis/webclient-leaflet-plugin/documention/tutorial-2.2M3D钻孔剖切.html

开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；

<header id="page-title" class="page-title">
    
        <span class="page-title-main">类名</span>
        <span class="page-title-sub">2.2M3D钻孔剖切</span>
    
</header>
<section>

<header>
    
</header>

<article>
    <h1>M3D</h1>
<blockquote>
<p>M3D的加载代码相对比较简单，如下所示</p>
</blockquote>
<pre class="prettyprint source lang-javascript"><code>m3dlayer = webGlobe.append(&quot;http://192.168.10.186:6163/igs/rest/g3d/福田钻孔&quot;, {});
</code></pre>
<h2>地下模式</h2>
<p>地下模式的核心是<code>关闭天空盒</code>以及改变透明度以及调整光线角度，同时针对特定模型进行<code>沉降操作</code>已达到对应的地下效果。</p>
<pre class="prettyprint source lang-javascript"><code>webGlobe.viewer.imageryLayers.removeAll();
webGlobe.viewer.scene.skyAtmosphere.show = false;
webGlobe.viewer.scene.globe.enableTransparent = true;
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001);
</code></pre>
<h2>加载完毕后的回调</h2>
<pre class="prettyprint source lang-javascript"><code>m3dlayer = webGlobe.append(&quot;http://192.168.10.186:6163/igs/rest/g3d/福田钻孔&quot;, {
    loaded: function(layer) {
        // 加载完毕后执行业务逻辑
    },
});
</code></pre>
<h2>图层的属性</h2>
<p>M3D的图层属性保持Cesium的3DTIle一致
<a onclick="getTypeHTML(event)" link="https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile">Cesium3DTileset</a></p>
<pre class="prettyprint source lang-javascript"><code>{
  url: { type: String, required: true },
  show: { typs: Boolean, default: true },

  /**
   * @type Cesium.Matrix4
   * @default Matrix4.IDENTITY
   */
  /* modelMatrix: { typs: Object, default: undefined }, */
  /**
   * @type Cesium.ShadowMode
   * @default ShadowMode.ENABLED
   */
  /* shadows: { type: Object, default: undefined }, */

  maximumScreenSpaceError: { type: Number, default: 16 },
  maximumMemoryUsage: { type: Number, default: 512 },

  cullWithChildrenBounds: { typs: Boolean, default: true },
  cullRequestsWhileMoving: { typs: Boolean, default: true },
  cullRequestsWhileMovingMultiplier: { type: Number, default: 60.0 },

  preloadWhenHidden: { typs: Boolean, default: false },
  preloadFlightDestinations: { typs: Boolean, default: true },
  preferLeaves: { typs: Boolean, default: false },

  dynamicScreenSpaceError: { typs: Boolean, default: false },
  dynamicScreenSpaceErrorDensity: { type: Number, default: 0.00278 },
  dynamicScreenSpaceErrorFactor: { type: Number, default: 4.0 },
  dynamicScreenSpaceErrorHeightFalloff: { type: Number, default: 0.25 },

  progressiveResolutionHeightFraction: { type: Number, default: 0.3 },

  foveatedScreenSpaceError: { typs: Boolean, default: true },
  foveatedConeSize: { type: Number, default: 0.1 },
  foveatedMinimumScreenSpaceErrorRelaxation: { type: Number, default: 0.0 },
  /**
   * @type Cesium3DTileset~foveatedInterpolationCallback
   * @default Cesium.Math.lerp
   */
  /* foveatedInterpolationCallback: { type: Function, default: undefined }, */
  foveatedTimeDelay: { type: Number, default: 0.2 },

  skipLevelOfDetail: { typs: Boolean, default: false },
  baseScreenSpaceError: { type: Number, default: 1024 },
  skipScreenSpaceErrorFactor: { type: Number, default: 16 },
  skipLevels: { type: Number, default: 1 },

  immediatelyLoadDesiredLevelOfDetail: { typs: Boolean, default: false },
  loadSiblings: { typs: Boolean, default: false },

  /**
   * @type Cesium.ClippingPlaneCollection
   */
  /* clippingPlanes: { typs: Object, default: undefined }, */
  /**
   * @type Cesium.ClassificationType
   */
  /* classificationType: { typs: Object, default: undefined }, */
  /**
   * @type Cesium.Ellipsoid
   * @default Ellipsoid.WGS84
   */
  /* ellipsoid: { typs: Object, default: undefined }, */

  /* pointCloudShading: { typs: Object, default: undefined }, */
  /**
   * @type Cartesian2
   * @default new Cartesian2(1.0, 1.0)
   */
  /* imageBasedLightingFactor: { typs: Object, default: undefined }, */
  /**
   * @type Cartesian3
   */
  /* lightColor: { typs: Object, default: undefined }, */
  luminanceAtZenith: { type: Number, default: 0.2 },
  /**
   * @type Array.&lt;Cartesian3>
   */
  /* sphericalHarmonicCoefficients: { type: Array, default: undefined }, */
  specularEnvironmentMaps: { type: String, default: &quot;&quot; },

  debugHeatmapTilePropertyName: { type: String, default: &quot;&quot; },
  debugFreezeFrame: { typs: Boolean, default: false },
  debugColorizeTiles: { typs: Boolean, default: false },
  debugWireframe: { typs: Boolean, default: false },
  debugShowBoundingVolume: { typs: Boolean, default: false },
  debugShowContentBoundingVolume: { typs: Boolean, default: false },
  debugShowViewerRequestVolume: { typs: Boolean, default: false },
  debugShowGeometricError: { typs: Boolean, default: false },
  debugShowRenderingStatistics: { typs: Boolean, default: false },
  debugShowMemoryUsage: { typs: Boolean, default: false },
  debugShowUrl: { typs: Boolean, default: false }
}
</code></pre>
<h2>动态剖切原理</h2>
<p>将要切割的图层按照某一个切割面，进行切割，设置一个定时器不同的收缩切割面的距离，已达到动态切割的效果！</p>
<ol>
<li>
<p>创建某个轴的切割面，本例是Y轴：</p>
<pre class="prettyprint source lang-javascript"><code>var g_planeDiziti = new Cesium.ClippingPlane(
     new Cesium.Cartesian3(0.0, 1.0, 0.0),
     -200.0
   );
</code></pre>
</li>
<li>
<p>获取地质体的图层并绑定切割面</p>
<pre class="prettyprint source lang-javascript"><code>assiselayer[0].clippingPlanes = new Cesium.ClippingPlaneCollection({
       modelMatrix: assiselayer[0].modelMatrix,
       planes: [g_planeDiziti],
       enabled: true,
     });
</code></pre>
</li>
<li>
<p>如果存在地形图层，则针对相机进行全局的地形图层的切割处理</p>
<pre class="prettyprint source lang-javascript"><code>var g_planeTerTile = new Cesium.ClippingPlane(
     new Cesium.Cartesian3(0.0, 1.0, 0.0),
     -200.0
   );
webGlobe.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection(
     {
     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
         transformCenter
     ),
     planes: [g_planeTerTile],
     enabled: true,
     }
 );
</code></pre>
</li>
<li>
<p>设置起始的切面距离，这里的距离根据业务，采取三角测量可以测出对应的距离</p>
<pre class="prettyprint source lang-javascript"><code>var curDis = 10;
// 定时器回调函数  --- 动态的改变切割面的距离
function cutLayer(index) {
   let distance = -1 * index * 20;
   g_planeTerTile.distance = distance;
   g_planeDiziti.distance = distance;
 }
</code></pre>
</li>
</ol>
</article>

</section>