Lin_Ye_Fang_Huo/public/widgets/mapCompare/widget.js

;(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置
    get view() {
      return {
        type: 'window',
        url: 'view.html',
        windowOptions: {
          width: 250,
          height: 500,
        },
      }
    }
    create() {
      this.typeFP = false //true:垂直，false水平

      var inhtml = `
      <div id="centerDivEx" style="position:absolute;left:0px;top:0px;border:1px solid #ccc;bottom: 0px;width:50%;overflow: hidden;">
          <div id="cesiumContainerEx" style="height:100%;width:100%;overflow: hidden;"></div>
      </div>`

      $('body').append(inhtml)
      $('#centerDiv').css({
        position: 'absolute',
        width: '50%',
        height: '100%',
        top: 0,
        right: 0,
      })

      var mapOptions2 = this.map.getOptions()
      //用于双屏同图层，不同配置展示
      for (var i = 0, len = mapOptions2.layers.length; i < len; i++) {
        var item = mapOptions2.layers[i]
        if (item.compare) {
          //存在compare属性时
          for (var key in item.compare) {
            item[key] = item.compare[key]
          }
        }
      }

      //绑定的控件
      mapOptions2.control = {
        baseLayerPicker: true, //basemaps底图切换按钮
        defaultContextMenu: true, //右键菜单
      }

      this.mapEx = new mars3d.Map('cesiumContainerEx', mapOptions2)
      this.mapEx.basemap = '天地图电子'

      this.map.on(mars3d.EventType.morphComplete, (event) => {
        //切换场景前事件
        if (this.map.scene.mode === Cesium.SceneMode.SCENE2D) {
          this.mapEx.scene.screenSpaceCameraController.enableTilt = false
        } else {
          this.mapEx.scene.screenSpaceCameraController.enableTilt = true
        }
      })
    }
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      $('#btn_mapCompare_close').click(() => {
        this.disableBase()
      })
    }
    //激活插件
    activate() {
      if (this.typeFP) {
        $('#centerDiv').css({
          position: 'absolute',
          height: '50%',
          width: '100%',
        })
      } else {
        $('#centerDiv').css({
          position: 'absolute',
          height: '100%',
          width: '50%',
        })
      }

      $('#centerDivEx').show()

      this.map.on(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this)
      this.map.camera.percentageChanged = 0.01

      this.mapEx.on(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this)
      this.mapEx.camera.percentageChanged = 0.01

      this._map_extentChangeHandler()
    }

    //释放插件
    disable() {
      this.map.off(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this)
      this.mapEx.off(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this)

      $('#centerDivEx').hide()
      $('#centerDiv').css({
        position: '',
        height: '100%',
        width: '100%',
      })
    }
    _map_extentChangeHandler(e) {
      if (!this.isActivate) {
        return
      }
      // console.log('map主地图 视角变化了')
      this.mapEx.off(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this)

      this.updateView(this.map, this.mapEx)
      this.mapEx.on(mars3d.EventType.cameraChanged, this._mapEx_extentChangeHandler, this)
    }
    _mapEx_extentChangeHandler(e) {
      if (!this.isActivate) {
        return
      }
      // console.log('mapEx对比地图 视角变化了')
      this.map.off(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this)

      this.updateView(this.mapEx, this.map)
      this.map.on(mars3d.EventType.cameraChanged, this._map_extentChangeHandler, this)
    }
    //“变化屏”mapChange变化，将“被更新屏”mapUpdate同步更新
    updateView(mapChange, mapUpdate) {
      var cameraView = mapChange.getCameraView()
      mapUpdate.setCameraView(cameraView, { duration: 0 })
    }

    //图层树相关
    getLayers() {
      return this.mapEx.getLayers({
        basemaps: true, //是否取config.json中的basempas
        layers: true, //是否取config.json中的layers
      })
    }

    //更新图层:显示隐藏状态
    updateLayerShow(layer, show) {
      layer.show = show

      if (show) {
        if (!layer.isAdded) {
          this.mapEx.addLayer(layer)
        }
      } else {
        // if (layer.isAdded) {
        //   this.mapEx.removeLayer(layer)
        // }
      }
    }
  }

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

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