Lin_Ye_Fang_Huo/public/widgets/mapSplit/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) {
        let tilelayers = this.map.getTileLayers();

        this._alllayers = [];
        for (let i = 0; i < tilelayers.length; i++) {
          let layer = tilelayers[i];
          if (layer.noLayerManage || layer.parent || layer.options.mapSplit === false) {
            continue;
          }

          let options = layer.toJSON();
          options.noLayerManage = true;

          delete options.id;
          delete options.uuid;
          delete options.pid;
          delete options.show;

          let splitTileLayer = mars3d.LayerUtil.create(options, this.map.options.templateValues);
          splitTileLayer._oldLayer = layer;
          this._alllayers.push(splitTileLayer);
        }

        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.changeLeftLayer(' + i + ')">' + layer.name + "</a></li>";
        inhtmlSwipelayer += ' <li><a href="javascript:mapSwipeWidget.changeRightLayer(' + i + ')">' + layer.name + "</a></li>";
      }
      $("#ddl_basemap").html(inhtmlBaseLayer);
      $("#ddl_swipelayer").html(inhtmlSwipelayer);

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

      this._lastBasemap = this.map.basemap.options;
      this.map.basemap = null;
      this._lastShowArr = [];

      this.mapSplit = new mars3d.control.MapSplit({});
      this.map.addControl(this.mapSplit);

      this.changeLeftLayer(1);
      this.changeRightLayer(0);
    }
    //释放插件
    disable() {
      $(".toolBarRight").css({ top: "100px" });
      $("#slider").remove();

      this.mapSplit.leftLayer = null;
      this.mapSplit.rightLayer = null;

      for (let i = 0; i < this._lastShowArr.length; i++) {
        let layer = this._lastShowArr[i];
        layer.show = true;
      }
      this._lastShowArr = [];

      this.map.removeControl(this.mapSplit, true);
      this.mapSplit = null;

      this.map.basemap = this._lastBasemap;
      this._lastBasemap = null;
      this._alllayers = null;
    }

    //view界面控制
    changeLeftLayer(id) {
      if (this._last_swipeLayer_id == id) {
        toastr.warning("图层对比不能为同一图层！");
        return;
      }
      this._last_baselayer_id = id;

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

      let oldLayer = thisLayer._oldLayer;
      if (oldLayer.isAdded && oldLayer.show) {
        oldLayer.show = false;
        this._lastShowArr.push(oldLayer);
      }

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

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

      let oldLayer = thisLayer._oldLayer;
      if (oldLayer.isAdded && oldLayer.show) {
        oldLayer.show = false;
        this._lastShowArr.push(oldLayer);
      }

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

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

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