Fei_Xian_Lin_Ye_Fang_Huo/public/widgets/print/widget.js

(function (window, mars3d) {
  //mm转为px
  var ratio = 0;
  var div = document.createElement("div");
  div.style.width = "1cm";
  div.id = "puc";
  document.body.appendChild(div);

  var w = getComputedStyle(div, null).width;
  ratio = w.substr(0, w.length - 2) / 10;
  div.parentNode.removeChild(div);

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

    //弹窗配置
    get view() {
      return { type: "append", url: "view.html" };
    }

    //初始化[仅执行1次]
    create() {
      this.$mapParentDiv = $("#centerDiv");
    }
    winCreateOK(opt, result) {
      var that = this;
      $("#btn_print_expimg").click(function () {
        that.expImg();
      });
      $("#btn_print_start").click(function () {
        that.printview();
      });
      $("#btn_print_type").change(function () {
        var val = $(this).val();
        that.changeSize(val);
      });
      $("#btn_print_close").click(function () {
        that.disableBase();
      });
    }
    //激活插件
    activate() {
      //隐藏div
      $(".no-print-view").hide();
      $(".mars3d-control").hide();
      $(".cesium-viewer-toolbar").hide();
      $(".cesium-viewer-fullscreenContainer").hide();

      $("body").css({
        "overflow-x": "auto",
        "overflow-y": "auto",
        background: "#cccccc",
      });
      this.$mapParentDiv.css({
        position: "absolute",
      });
      this.changeSize();
    }
    //释放插件
    disable() {
      //还原显示div
      $(".no-print-view").show();
      $(".mars3d-control").show();
      $(".cesium-viewer-toolbar").show();
      $(".cesium-viewer-fullscreenContainer").show();

      $("body").css({
        "overflow-x": "hidden",
        "overflow-y": "hidden",
        background: "#000",
      });
      this.$mapParentDiv.css({
        position: "",
        width: "100%",
        height: "100%",
        transform: "scale(1.0)",
      });
    }
    changeSize(type) {
      this._lasttype = type;

      var width;
      var height;
      var isZongxiang;
      switch (
        type //单位为：mm毫米
      ) {
        default:
        case "A4H":
          width = 297;
          height = 210;
          break;
        case "A4Z":
          width = 210;
          height = 297;
          isZongxiang = true;
          break;
        case "A3H":
          width = 420;
          height = 297;
          break;
        case "A3Z":
          width = 297;
          height = 420;
          isZongxiang = true;
          break;
      }

      //減去边框
      if (isZongxiang) {
        width -= 10;
        height -= 10;
      } else {
        width -= 10;
        height -= 15;
      }

      var clientWidth = document.body.clientWidth;
      var clientHeight = document.body.clientHeight;
      var divWidth = this.mm2px(width);
      var divHeight = this.mm2px(height);

      let scale = Math.min(clientWidth / divWidth, clientHeight / divHeight);
      let x = 0,
        y = 0;
      if (scale > 1) {
        scale = 1;
      } else {
        x = -(divWidth - clientWidth) / 2;
        y = -(divHeight - clientHeight) / 2;
      }

      this.$mapParentDiv.css({
        width: width + "mm",
        height: height + "mm",
        transform: "matrix(" + scale + ",0,0," + scale + "," + x + "," + y + ")",
      });
    }

    mm2px(mm) {
      return Math.round(mm * ratio);
    }

    expImg() {
      haoutil.loading.show();
      this.map.expImage();
      haoutil.loading.hide();
    }
    printview() {
      // window.print()

      this.map.expImage({
        download: false,
        callback: (base64, size) => {
          this.printImage(base64);
        },
      });
    }
    printImage(base64) {
      var iframe = document.createElement("IFRAME");
      var doc = null;
      iframe.setAttribute("style", "position:absolute;width:0px;height:0px;left:-500px;top:-500px;");
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      doc.write(`<div><img src="${base64}" style="margin:0" /></div>`);
      doc.close();

      iframe.focus();
      iframe.contentWindow.focus();
      setTimeout(() => {
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
      }, 500);
    }
  }

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

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