Lin_Ye_Fang_Huo/public/widgets/mapSwipe/widget.js

;(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return ['view.css']
    }

    //弹窗配置
    get view() {
      return {
        type: 'append',
        url: 'view.html',
        parent: 'body',
      }
    }
    getTileLayers() {
      if (!this._alllayers) {
        this._alllayers = this.map.getTileLayers()
        console.log( this._alllayers)
      }
      return this._alllayers
    }
    //每个窗口创建完成后调用
    winCreateOK(html) {
      var that = this

      var inhtmlBaseLayer = ''
      var inhtmlSwipelayer = ''
      var arrLayers = this.getTileLayers()

      for (var i = 0; i < arrLayers.length; i++) {
        var layer = arrLayers[i]
        inhtmlBaseLayer += ' <li><a href="javascript:mapSwipeWidget.changeSelectBaseLayer(' + i + ',true)">' + layer.name + '</a></li>'
        inhtmlSwipelayer += ' <li><a href="javascript:mapSwipeWidget.changeSelectSwipeLayer(' + i + ',true)">' + layer.name + '</a></li>'
      }
      $('#ddl_basemap').html(inhtmlBaseLayer)
      $('#ddl_swipelayer').html(inhtmlSwipelayer)

      $('#btn_mapSwipe_close').click(function () {
        that.disableBase()
      })
    }
    //激活插件
    activate() {
      $('.toolBarRight').css({ top: '180px' })

      var scene = this.map.scene

      var slider = $("<div id='slider' class='cesium-map-contrast-slider'></div>")
      $('#mars3dContainer').append(slider)
      scene.imagerySplitPosition = slider[0].offsetLeft / slider[0].parentElement.offsetWidth

      var dragStartX = 0
      document.getElementById('slider').addEventListener('mousedown', mouseDown, false)
      window.addEventListener('mouseup', mouseUp, false)

      this._lastBasemap = this.map.basemap.options
      this.map.basemap = null

      this.changeSelectBaseLayer(1, true)
      this.changeSelectSwipeLayer(0, true)

      function mouseUp() {
        window.removeEventListener('mousemove', sliderMove, true)
      }

      function mouseDown(e) {
        var slider = document.getElementById('slider')
        dragStartX = e.clientX - slider.offsetLeft
        window.addEventListener('mousemove', sliderMove, true)
      }

      function sliderMove(e) {
        var slider = document.getElementById('slider')
        var splitPosition = (e.clientX - dragStartX) / slider.parentElement.offsetWidth
        slider.style.left = 100.0 * splitPosition + '%'

        scene.imagerySplitPosition = splitPosition
      }
    }
    //释放插件
    disable() {
      $('.toolBarRight').css({ top: '180px' })
      $('#slider').remove()

      this.removeLeftLayer()
      this.removeRightLayer()
      this._alllayers = null

      this.map.basemap = this._lastBasemap
      this._lastBasemap = null
    }
    removeLeftLayer() {
      if (this.leftLayer != null) {
        this.leftLayer.remove()
        this.leftLayer = null
      }
    }
    updateLeftLayer(layer) {
      this.removeLeftLayer()
      this.leftLayer = layer

      if (!layer.isAdded) {
        this.map.addLayer(layer)
      }

      if (layer.hasChildLayer) {
        for (var i = 0; i < layer.arrLayer.length; i++) {
          let imageryLayer = layer.arrLayer[i].layer
          imageryLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT
        }
      } else {
        let imageryLayer = layer.layer
        imageryLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT
      }
    }
    removeRightLayer() {
      if (this.rightLayer != null) {
        this.rightLayer.remove()
        this.rightLayer = null
      }
    }
    updateRightLayer(layer) {
      this.removeRightLayer()
      this.rightLayer = layer

      if (!layer.isAdded) {
        this.map.addLayer(layer)
      }

      if (layer.hasChildLayer) {
        for (var i = 0; i < layer.arrLayer.length; i++) {
          let imageryLayer = layer.arrLayer[i].layer
          imageryLayer.splitDirection = Cesium.ImagerySplitDirection.RIGHT
        }
      } else {
        let imageryLayer = layer.layer
        imageryLayer.splitDirection = Cesium.ImagerySplitDirection.RIGHT
      }
    }
    //view界面控制
    changeSelectBaseLayer(id, ischange) {
      if (this._last_swipeLayer_id == id) {
        toastr.warning('图层对比不能为同一图层！')
        return
      }
      this._last_baselayer_id = id

      var arrLayers = this.getTileLayers()
      var thisLayer = arrLayers[id]

      $('#btnSelectBaseMap').html('已选:' + thisLayer.name + '<span class="caret"></span>')
      if (ischange) {
        this.updateLeftLayer(thisLayer)
      }
    }
    changeSelectSwipeLayer(id, ischange) {
      if (this._last_baselayer_id == id) {
        toastr.warning('图层对比不能为同一图层！')
        return
      }
      this._last_swipeLayer_id = id

      var arrLayers = this.getTileLayers()
      var thisLayer = arrLayers[id]

      $('#btnSelectSwipelayer').html('已选:' + thisLayer.name + '<span class="caret"></span>')

      if (ischange) {
        this.updateRightLayer(thisLayer)
      }
    }
  }

  //注册到widget管理器中。
  window.mapSwipeWidget = mars3d.widget.bindClass(MyWidget)

  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d)