add tileset spliter

modules/widget/index.js

@@ -14,6 +14,7 @@ import Compass from './type/Compass'
 import DistanceLegend from './type/DistanceLegend'
 import ZoomController from './type/ZoomController'
 import LoadingMask from './type/LoadingMask'
+import TilesetSplit from './type/TilesetSplit'
 
 export default function createWidgets() {
   return {
@@ -27,6 +28,7 @@ export default function createWidgets() {
     compass: new Compass(),
     distanceLegend: new DistanceLegend(),
     zoomController: new ZoomController(),
-    loadingMask: new LoadingMask()
+    loadingMask: new LoadingMask(),
+    tilesetSplit: new TilesetSplit()
   }
 }

modules/widget/type/MapSplit.js

@@ -102,7 +102,7 @@ class MapSplit extends Widget {
       (this._wrapper.offsetLeft + relativeOffset) /
       this._wrapper.parentElement.offsetWidth
     this._wrapper.style.left = 100.0 * splitPosition + '%'
-    this._viewer.scene.imagerySplitPosition = splitPosition
+    this._viewer.scene.splitPosition = splitPosition
   }
 
   /**
@@ -119,7 +119,7 @@ class MapSplit extends Widget {
       this._baseLayer && this._viewer.imageryLayers.remove(this._baseLayer)
       this._baseLayer = this._viewer.imageryLayers.addImageryProvider(baseLayer)
       this._baseLayer.splitDirection = splitDirection || 0
-      this._viewer.scene.imagerySplitPosition =
+      this._viewer.scene.splitPosition =
         this._wrapper.offsetLeft / this._wrapper.parentElement.offsetWidth
     }
     return this

modules/widget/type/TilesetSplit.js

@@ -0,0 +1,133 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-04 15:38:40
+ */
+
+import { Cesium } from '@dc-modules/namespace'
+import State from '@dc-modules/state/State'
+import Icons from '@dc-modules/icons'
+import { DomUtil } from '@dc-modules/utils'
+import Widget from '../Widget'
+
+class TilesetSplit extends Widget {
+  constructor() {
+    super()
+    this._wrapper = DomUtil.create('div', 'dc-slider')
+    this._tileset = undefined
+    this._moveActive = false
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Widget.getWidgetType('tileset_split')
+  }
+
+  /**
+   *
+   * @private
+   */
+  _installHook() {
+    Object.defineProperty(this._viewer, 'tilsetSplit', {
+      value: this,
+      writable: false
+    })
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.scene.splitPosition = 0.5
+    this._wrapper.style.left = '50%'
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    if (this._tileset) {
+      this._viewer.scene.splitPosition =
+        this._tileset.splitDirection > 0 ? 1 : 0
+    } else {
+      this._viewer.scene.splitPosition = 0
+    }
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let splitter = DomUtil.parseDom(Icons.splitter, true, 'splitter')
+    this._wrapper.appendChild(splitter)
+    let handler = new Cesium.ScreenSpaceEventHandler(splitter)
+    let self = this
+    handler.setInputAction(() => {
+      self._moveActive = true
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
+    handler.setInputAction(() => {
+      self._moveActive = true
+    }, Cesium.ScreenSpaceEventType.PINCH_START)
+
+    handler.setInputAction(movement => {
+      self._moveHandler(movement)
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+    handler.setInputAction(movement => {
+      self._moveHandler(movement)
+    }, Cesium.ScreenSpaceEventType.PINCH_MOVE)
+
+    handler.setInputAction(() => {
+      self._moveActive = false
+    }, Cesium.ScreenSpaceEventType.LEFT_UP)
+    handler.setInputAction(() => {
+      self._moveActive = false
+    }, Cesium.ScreenSpaceEventType.PINCH_END)
+    this._ready = true
+  }
+
+  /**
+   *
+   * @param movement
+   * @private
+   */
+  _moveHandler(movement) {
+    if (!this._moveActive || !this._enable) {
+      return
+    }
+    let relativeOffset = movement.endPosition.x
+    let splitPosition =
+      (this._wrapper.offsetLeft + relativeOffset) /
+      this._wrapper.parentElement.offsetWidth
+    this._wrapper.style.left = 100.0 * splitPosition + '%'
+    this._viewer.scene.splitPosition = splitPosition
+  }
+
+  /**
+   *
+   * @param tileset
+   * @param splitDirection
+   * @return {TilesetSplit}
+   */
+  addTileset(tileset, splitDirection = 1) {
+    if (!this._viewer || !this._enable) {
+      return this
+    }
+    if (tileset) {
+      this._tileset && this._viewer.scene.primitives.remove(this._tileset)
+      this._tileset = this._viewer.scene.primitives.add(
+        tileset.delegate || tileset
+      )
+      this._tileset.splitDirection = splitDirection || 0
+      this._viewer.scene.splitPosition =
+        this._wrapper.offsetLeft / this._wrapper.parentElement.offsetWidth
+    }
+    return this
+  }
+}
+
+Widget.registerType('tileset_split')
+
+export default TilesetSplit