core/analysis/Split.js

  1. import { Cesium } from '../../../namespace'
  2. import { BaseLayer } from '../Layers'
  3. /**
  4.  * 卷帘分析类
  5.  * @class
  6.  */
  7. class Split {
  8.   /**
  9.    * 构造函数
  10.    * @param {Object} viewer 地图场景对象
  11.    */
  12.   constructor(viewer) {
  13.     this._viewer = viewer
  14.     this._enabled = false
  15.     this._splitLayer = BaseLayer.DefaultTdtVec
  16.     this._splitDirection = Cesium.SplitDirection.RIGHT
  17.     this._dom = undefined
  18.   }
  20.   /**
  21.    * 是否启用
  22.    * @type {Boolean}
  23.    */
  24.   get enabled() {
  25.     return this._enabled
  26.   }
  27.   set enabled(bool) {
  28.     if (bool === this._enabled) return
  29.     this._enabled = bool
  30.     bool ? this.init() : this.remove()
  31.   }
  33.   /**
  34.    * 卷帘图层方向，-1：左侧，1：右侧
  35.    * @type {Number}
  36.    */
  37.   get splitDirection() {
  38.     return this._splitDirection
  39.   }
  40.   set splitDirection(val) {
  41.     if (val === -1) {
  42.       this._splitLayer.splitDirection = Cesium.SplitDirection.LEFT
  43.       this._splitDirection = -1
  44.     }
  45.     if (val === 1) {
  46.       this._splitLayer.splitDirection = Cesium.SplitDirection.RIGHT
  47.       this._splitDirection = 1
  48.     }
  49.   }
  51.   /**
  52.    * 卷帘图层，ImageryLayer类型，参考Cesium
  53.    * @type {ImageryLayer}
  54.    */
  55.   get splitLayer() {
  56.     return this._splitLayer
  57.   }
  58.   set splitLayer(layer) {
  59.     this._viewer.imageryLayers.remove(this._splitLayer)
  60.     this._splitLayer = layer
  61.     this._splitLayer.splitDirection = this._splitDirection
  62.     this._viewer.imageryLayers.add(this._splitLayer)
  63.   }
  65.   init() {
  66.     if (this._splitLayer.isDestroyed()) {
  67.       this._splitLayer = BaseLayer.DefaultTdtVec
  68.     }
  69.     this._splitLayer.splitDirection = this._splitDirection
  70.     this._viewer.imageryLayers.add(this._splitLayer)
  71.     this._viewer.scene.splitPosition = 0.5
  72.     this.initDom()
  73.   }
  75.   initDom() {
  76.     this._dom = document.createElement('div')
  77.     this._dom.id = 'cus-layer-slider'
  78.     const innerHTML = `
  79.     <div class="slider-main">
  80.       <span id="optionOne" class="option left">方案一</span>
  81.       <span class="line"></span>
  82.       <span id="optionTwo" class="option right">方案二</span>
  83.     </div>
  84.     <div id="slider-button"></div>
  85.     `
  86.     this._dom.innerHTML = innerHTML
  87.     this._viewer.container.appendChild(this._dom)
  88.     // 给滑块添加鼠标进入事件监听器
  89.     const sliderButton = this._dom.querySelector('#slider-button')
  90.     sliderButton.addEventListener('mouseenter', this.mouseEnter.bind(this))
  91.     sliderButton.addEventListener('mouseleave', this.mouseleave.bind(this))
  93.     this._handler = new Cesium.ScreenSpaceEventHandler(sliderButton)
  95.     let moveActive = false
  96.     let left = '0'
  97.     const $this = this
  98.     function move(movement) {
  99.       if (!moveActive) return
  100.       const relativeOffset = movement.endPosition.x
  101.       const splitPosition =
  102.         ($this._dom.offsetLeft + relativeOffset) /
  103.         $this._dom.parentElement.offsetWidth
  104.       left = `${100.0 * splitPosition}%`
  105.       $this._dom.style.left = left
  106.       $this._viewer.scene.splitPosition = splitPosition
  107.     }
  109.     this._handler.setInputAction(function () {
  110.       moveActive = true
  111.     }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
  112.     this._handler.setInputAction(function () {
  113.       moveActive = true
  114.     }, Cesium.ScreenSpaceEventType.PINCH_START)
  116.     this._handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  117.     this._handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE)
  119.     this._handler.setInputAction(function () {
  120.       moveActive = false
  121.     }, Cesium.ScreenSpaceEventType.LEFT_UP)
  122.     this._handler.setInputAction(function () {
  123.       moveActive = false
  124.     }, Cesium.ScreenSpaceEventType.PINCH_END)
  125.   }
  126.   mouseEnter(event) {
  127.     this.active(true)
  128.   }
  129.   mouseleave(event) {
  130.     this.active(false)
  131.   }
  132.   active(bool) {
  133.     const line = this._dom.querySelector('.line')
  134.     bool ? line.classList.add('active') : line.classList.remove('active')
  135.     const sliderButton = this._dom.querySelector('#slider-button')
  136.     bool
  137.       ? sliderButton.classList.add('active')
  138.       : sliderButton.classList.remove('active')
  139.   }
  140.   /**
  141.    * 移除卷帘
  142.    */
  143.   remove() {
  144.     this._viewer.container.removeChild(this._dom)
  145.     this._dom = undefined
  146.     this._handler && this._handler.destroy()
  147.     this._handler = undefined
  148.     this._viewer.imageryLayers.remove(this._splitLayer)
  149.   }
  150. }
  152. export default Split