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() {
      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);

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

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

      //后置加的图层的处理
      var mapLayers = this.map.getLayers({
        filter: true,
      });
      for (let i = mapLayers.length - 1; i >= 0; i--) {
        let layer = mapLayers[i];
        if (layer.noLayerManage || layer.parent) {
          continue;
        }
        mapOptions2.layers.push(layer.toJSON());
      }
      console.log("分屏地图配置", mapOptions2);

      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() {
      $("#centerDiv").css({
        position: "absolute",
        height: "100%",
        width: "50%",
        top: 0,
        left: "auto",
        right: 0,
      });

      $("#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%",
        left: 0,
        right: "auto",
      });
    }
    _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);