@vtx/ol-map 2.0.0-beta.15 → 2.0.0-beta.17

package/lib/tools/Toolbox/MapSheetPrint/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _Modal = _interopRequireDefault(require("../../components/Modal"));
 var _jspdf = require("jspdf");
-var _snapdom = require("@zumer/snapdom");
+var _html2canvas = _interopRequireDefault(require("html2canvas"));
 var _interaction = require("ol/interaction");
 var _Vector = _interopRequireDefault(require("ol/layer/Vector"));
 var _Tile = _interopRequireDefault(require("ol/layer/Tile"));
@@ -19,14 +19,17 @@ var _Draw = require("ol/interaction/Draw");
 var _Draw2 = require("../../Utils/Draw");
 var _useProps2 = _interopRequireDefault(require("../../../use-props"));
 var _olMap = require("@vtx/ol-map");
+var _FeatureLayer = _interopRequireDefault(require("../../../feature-layer/FeatureLayer"));
+var _ImageLayer = _interopRequireDefault(require("../../../image-layer/ImageLayer"));
+var _lock = _interopRequireDefault(require("./assets/lock.png"));
 require("./index.less");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
@@ -41,7 +44,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import { snapdom } from '@zumer/snapdom';
 var pageSizeOptions = ['A4', 'A3', 'A2', 'A1', 'A0'];
 var pageSizeMap = {
   A4: {
@@ -286,7 +289,7 @@ var syncBusinessLayers = function syncBusinessLayers(sourceMap, targetMap, exclu
     if (layer.get('key') === '__TDT_TILE' || layer.get('key') === '__TDT_MARK') {
       return false;
     }
-    return layer instanceof _Vector["default"] || layer instanceof _Tile["default"] || layer instanceof _Image["default"];
+    return true;
   }).forEach(function (layer) {
     var clonedLayer = cloneLayer(layer);
     if (clonedLayer) {
@@ -322,34 +325,221 @@ var waitMapRender = function waitMapRender(mapInstance) {
   });
 };
 
-// 统一用 html2canvas 截取隐藏导出地图的 DOM，
-// 预览图和最终分幅图片都走这条截图链路。
-var captureDomCanvas = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(dom, width, height) {
-    var snapshot, canvas, ctx;
+// 业务图层经常是 WMS/WFS 异步请求，rendercomplete 加上固定 600ms 还不够稳。
+// 这里额外等待图层 source 进入一段“空闲期”后再截图，避免外面图层还在加载时就提前截空白图。
+var waitLayerSourcesSettled = function waitLayerSourcesSettled(mapInstance) {
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4000;
+  return new Promise(function (resolve) {
+    var _mapInstance$renderSy3;
+    if (!mapInstance) {
+      resolve();
+      return;
+    }
+    var disposers = [];
+    var pending = 0;
+    var done = false;
+    var idleTimer = null;
+    var finish = function finish() {
+      if (done) {
+        return;
+      }
+      done = true;
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+      }
+      disposers.forEach(function (dispose) {
+        return dispose();
+      });
+      resolve();
+    };
+    var scheduleFinish = function scheduleFinish(delay) {
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+      }
+      idleTimer = setTimeout(function () {
+        if (pending <= 0) {
+          finish();
+        }
+      }, delay);
+    };
+    var onStart = function onStart() {
+      pending += 1;
+      if (idleTimer) {
+        clearTimeout(idleTimer);
+        idleTimer = null;
+      }
+    };
+    var onEnd = function onEnd() {
+      pending = Math.max(0, pending - 1);
+      if (pending === 0) {
+        scheduleFinish(250);
+      }
+    };
+    var bind = function bind(target, type, handler) {
+      if (!(target !== null && target !== void 0 && target.on)) {
+        return;
+      }
+      target.on(type, handler);
+      disposers.push(function () {
+        var _target$un;
+        return (_target$un = target.un) === null || _target$un === void 0 ? void 0 : _target$un.call(target, type, handler);
+      });
+    };
+    mapInstance.getLayers().getArray().filter(function (layer) {
+      return layer.get('__sheetPrintClone');
+    }).forEach(function (layer) {
+      var _layer$getSource;
+      var source = (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
+      if (!source) {
+        return;
+      }
+      ['tileloadstart', 'imageloadstart', 'featuresloadstart', 'vectorloadstart'].forEach(function (type) {
+        return bind(source, type, onStart);
+      });
+      ['tileloadend', 'tileloaderror', 'imageloadend', 'imageloaderror', 'featuresloadend', 'featuresloaderror', 'vectorloadend', 'vectorloaderror'].forEach(function (type) {
+        return bind(source, type, onEnd);
+      });
+
+      // 业务 ImageLayer 第一次进入预览时，经常是 source 已经创建但首张 WMS 图还没真正画进地图。
+      // 这里额外盯一下当前 image state，等它从 idle/loading 走到可用状态后再继续截图。
+      if (layer instanceof _ImageLayer["default"] && typeof source.getImage === 'function') {
+        var _mapInstance$getView, _mapInstance$getSize, _view$calculateExtent, _view$getResolution, _view$getProjection, _image$getState;
+        var view = (_mapInstance$getView = mapInstance.getView) === null || _mapInstance$getView === void 0 ? void 0 : _mapInstance$getView.call(mapInstance);
+        var size = (_mapInstance$getSize = mapInstance.getSize) === null || _mapInstance$getSize === void 0 ? void 0 : _mapInstance$getSize.call(mapInstance);
+        var extent = view === null || view === void 0 || (_view$calculateExtent = view.calculateExtent) === null || _view$calculateExtent === void 0 ? void 0 : _view$calculateExtent.call(view, size);
+        var resolution = view === null || view === void 0 || (_view$getResolution = view.getResolution) === null || _view$getResolution === void 0 ? void 0 : _view$getResolution.call(view);
+        var projection = view === null || view === void 0 || (_view$getProjection = view.getProjection) === null || _view$getProjection === void 0 ? void 0 : _view$getProjection.call(view);
+        var image = extent && resolution && projection ? source.getImage(extent, resolution, 1, projection) : null;
+        var imageState = image === null || image === void 0 || (_image$getState = image.getState) === null || _image$getState === void 0 ? void 0 : _image$getState.call(image);
+        if (image && (imageState === 0 || imageState === 1)) {
+          var _image$on;
+          onStart();
+          var _handleImageChange = function handleImageChange() {
+            var _image$getState2, _image$un, _mapInstance$renderSy2;
+            var nextState = (_image$getState2 = image.getState) === null || _image$getState2 === void 0 ? void 0 : _image$getState2.call(image);
+            if (nextState === 0 || nextState === 1) {
+              return;
+            }
+            (_image$un = image.un) === null || _image$un === void 0 || _image$un.call(image, 'change', _handleImageChange);
+            onEnd();
+            (_mapInstance$renderSy2 = mapInstance.renderSync) === null || _mapInstance$renderSy2 === void 0 || _mapInstance$renderSy2.call(mapInstance);
+          };
+          (_image$on = image.on) === null || _image$on === void 0 || _image$on.call(image, 'change', _handleImageChange);
+          disposers.push(function () {
+            var _image$un2;
+            return (_image$un2 = image.un) === null || _image$un2 === void 0 ? void 0 : _image$un2.call(image, 'change', _handleImageChange);
+          });
+          if (imageState === 0 && image.load) {
+            image.load();
+          }
+        }
+      }
+    });
+    scheduleFinish(500);
+    setTimeout(finish, timeout);
+    (_mapInstance$renderSy3 = mapInstance.renderSync) === null || _mapInstance$renderSy3 === void 0 || _mapInstance$renderSy3.call(mapInstance);
+  });
+};
+var parseCanvasTransform = function parseCanvasTransform(canvas) {
+  var transformText = canvas.style.transform || window.getComputedStyle(canvas).transform || '';
+  var match = transformText.match(/^matrix\(([^)]+)\)$/);
+  if (!match) {
+    return [1, 0, 0, 1, 0, 0];
+  }
+  return match[1].split(',').map(function (item) {
+    return Number(item.trim());
+  }).filter(function (item) {
+    return Number.isFinite(item);
+  });
+};
+var snapdomPromise = null;
+var dynamicImport = function dynamicImport(specifier) {
+  return new Function('s', 'return import(s)')(specifier);
+};
+var getSnapdom = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
     return _regenerator().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
-          _context.n = 1;
-          return _snapdom.snapdom.toCanvas(dom, {
-            scale: 1,
-            backgroundColor: '#ffffff'
-          });
-        case 1:
-          snapshot = _context.v;
+          if (!snapdomPromise) {
+            snapdomPromise = dynamicImport('@zumer/snapdom').then(function (mod) {
+              return mod.snapdom;
+            });
+          }
+          return _context.a(2, snapdomPromise);
+      }
+    }, _callee);
+  }));
+  return function getSnapdom() {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+// 优先直接合成 OpenLayers 实际渲染出来的各层 canvas，
+// 避免 html2canvas 再截图 DOM 时把地图细节压糊。
+var captureDomCanvas = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(dom, width, height) {
+    var canvas, ctx, layerCanvases, snapdom, snapshot;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
           canvas = document.createElement('canvas');
           canvas.width = Math.max(1, Math.round(width));
           canvas.height = Math.max(1, Math.round(height));
           ctx = canvas.getContext('2d');
           ctx.fillStyle = '#fff';
           ctx.fillRect(0, 0, canvas.width, canvas.height);
+          layerCanvases = Array.from(dom.querySelectorAll('.ol-layer canvas, canvas.ol-layer, canvas')).filter(function (item) {
+            return item.width > 0 && item.height > 0;
+          });
+          if (!layerCanvases.length) {
+            _context2.n = 1;
+            break;
+          }
+          layerCanvases.forEach(function (layerCanvas) {
+            var parentStyle = window.getComputedStyle(layerCanvas.parentElement || layerCanvas);
+            var canvasStyle = window.getComputedStyle(layerCanvas);
+            var opacity = Number(parentStyle.opacity || canvasStyle.opacity || 1);
+            var transform = parseCanvasTransform(layerCanvas);
+            var backgroundColor = parentStyle.backgroundColor;
+            ctx.save();
+            ctx.globalAlpha = Number.isFinite(opacity) ? opacity : 1;
+            if (backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)' && backgroundColor !== 'transparent') {
+              ctx.fillStyle = backgroundColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            if (transform.length === 6) {
+              ctx.setTransform.apply(ctx, _toConsumableArray(transform));
+            } else {
+              ctx.setTransform(1, 0, 0, 1, 0, 0);
+            }
+            ctx.drawImage(layerCanvas, 0, 0);
+            ctx.restore();
+          });
+          return _context2.a(2, canvas);
+        case 1:
+          _context2.n = 2;
+          return getSnapdom();
+        case 2:
+          snapdom = _context2.v;
+          _context2.n = 3;
+          return snapdom.toCanvas(dom, {
+            scale: 1,
+            backgroundColor: '#ffffff'
+          });
+        case 3:
+          snapshot = _context2.v;
+          // const snapshot = await snapdom.toCanvas(dom, {
+          //     scale: 1,
+          //     backgroundColor: '#ffffff',
+          // });
           ctx.drawImage(snapshot, 0, 0, canvas.width, canvas.height);
-          return _context.a(2, canvas);
+          return _context2.a(2, canvas);
       }
-    }, _callee);
+    }, _callee2);
   }));
   return function captureDomCanvas(_x, _x2, _x3) {
-    return _ref2.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 var loadImage = function loadImage(src) {
@@ -362,11 +552,11 @@ var loadImage = function loadImage(src) {
     img.src = src;
   });
 };
-var createPdfFromImages = function createPdfFromImages(_ref3) {
-  var images = _ref3.images,
-    pageWidthMm = _ref3.pageWidthMm,
-    pageHeightMm = _ref3.pageHeightMm,
-    title = _ref3.title;
+var createPdfFromImages = function createPdfFromImages(_ref4) {
+  var images = _ref4.images,
+    pageWidthMm = _ref4.pageWidthMm,
+    pageHeightMm = _ref4.pageHeightMm,
+    title = _ref4.title;
   if (!(images !== null && images !== void 0 && images.length)) {
     return;
   }
@@ -381,7 +571,7 @@ var createPdfFromImages = function createPdfFromImages(_ref3) {
     if (index > 0) {
       pdf.addPage([pageWidthMm, pageHeightMm], orientation);
     }
-    pdf.addImage(item.url, 'JPEG', 0, 0, pageWidthMm, pageHeightMm, undefined, 'FAST');
+    pdf.addImage(item.url, 'PNG', 0, 0, pageWidthMm, pageHeightMm, undefined, 'FAST');
   });
   pdf.save(decodeURIComponent("".concat(title || 'map-sheet-print', ".pdf")));
 };
@@ -430,37 +620,44 @@ function _default(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     previewReady = _useState16[0],
     setPreviewReady = _useState16[1];
-  var _useState17 = (0, _react.useState)(''),
+  var _useState17 = (0, _react.useState)(TextEnum.generatingPreviewText),
     _useState18 = _slicedToArray(_useState17, 2),
-    previewImage = _useState18[0],
-    setPreviewImage = _useState18[1];
-  var _useState19 = (0, _react.useState)([]),
+    previewLoadingText = _useState18[0],
+    setPreviewLoadingText = _useState18[1];
+  var _useState19 = (0, _react.useState)(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    sheetImages = _useState20[0],
-    setSheetImages = _useState20[1];
+    previewImage = _useState20[0],
+    setPreviewImage = _useState20[1];
   var _useState21 = (0, _react.useState)([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    selectedSheetIds = _useState22[0],
-    setSelectedSheetIds = _useState22[1];
-  var _useState23 = (0, _react.useState)(false),
+    sheetImages = _useState22[0],
+    setSheetImages = _useState22[1];
+  var _useState23 = (0, _react.useState)([]),
     _useState24 = _slicedToArray(_useState23, 2),
-    generating = _useState24[0],
-    setGenerating = _useState24[1];
+    selectedSheetIds = _useState24[0],
+    setSelectedSheetIds = _useState24[1];
+  var _useState25 = (0, _react.useState)(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    generating = _useState26[0],
+    setGenerating = _useState26[1];
   var drawTool = (0, _react.useRef)(null);
   var boxExtentRef = (0, _react.useRef)(null);
   var boxLayerRef = (0, _react.useRef)(null);
   var exportMapRef = (0, _react.useRef)(null);
+  var previewMapRef = (0, _react.useRef)(null);
   var exportStageRef = (0, _react.useRef)(null);
+  var previewMasterCanvasRef = (0, _react.useRef)(null);
+  var previewMasterFramePixelsRef = (0, _react.useRef)(null);
   var renderLayersSyncedRef = (0, _react.useRef)(false);
   var previewRenderSeqRef = (0, _react.useRef)(0);
   var previewRenderTimerRef = (0, _react.useRef)(null);
-  var _useState25 = (0, _react.useState)({
+  var _useState27 = (0, _react.useState)({
       width: 1,
       height: 1
     }),
-    _useState26 = _slicedToArray(_useState25, 2),
-    exportSize = _useState26[0],
-    setExportSize = _useState26[1];
+    _useState28 = _slicedToArray(_useState27, 2),
+    exportSize = _useState28[0],
+    setExportSize = _useState28[1];
   (0, _react.useEffect)(function () {
     form.setFieldsValue({
       range: '1',
@@ -494,6 +691,9 @@ function _default(props) {
       var extent = event.feature.getGeometry().getExtent();
       boxExtentRef.current = extent;
       map.showTip(TextEnum.leftClickToStart);
+      map.getView().fit(extent, {
+        duration: 500
+      });
     });
     map.addLayer(boxLayer);
     map.addInteraction(tool);
@@ -518,16 +718,33 @@ function _default(props) {
   var previewFrameExtent = (0, _react.useMemo)(function () {
     return buildPreviewFrameExtent(splitPlan, metrics === null || metrics === void 0 ? void 0 : metrics.extent);
   }, [splitPlan, metrics === null || metrics === void 0 ? void 0 : metrics.extent]);
+  var mapProjection = (0, _react.useMemo)(function () {
+    try {
+      var _map$getView, _map$getView$getProje, _map$getView$getProje2;
+      return (map === null || map === void 0 || (_map$getView = map.getView) === null || _map$getView === void 0 || (_map$getView = _map$getView.call(map)) === null || _map$getView === void 0 || (_map$getView$getProje = _map$getView.getProjection) === null || _map$getView$getProje === void 0 || (_map$getView$getProje = _map$getView$getProje.call(_map$getView)) === null || _map$getView$getProje === void 0 || (_map$getView$getProje2 = _map$getView$getProje.getCode) === null || _map$getView$getProje2 === void 0 ? void 0 : _map$getView$getProje2.call(_map$getView$getProje)) || 'EPSG:4326';
+    } catch (error) {
+      return 'EPSG:4326';
+    }
+  }, [map]);
+  var inheritedMapProps = (0, _react.useMemo)(function () {
+    var baseLayerParams = (map === null || map === void 0 ? void 0 : map.baseLayerParams) || {};
+    return {
+      projection: mapProjection,
+      mapStyle: baseLayerParams.mapStyle,
+      baseMapStyle: baseLayerParams.baseMapStyle,
+      dark: baseLayerParams.dark,
+      tk: (map === null || map === void 0 ? void 0 : map.tk) || baseLayerParams.tk || '1adbb6e47668cb33757cd799548bf1f4'
+    };
+  }, [map, mapProjection]);
 
-  // 预览按“整张纸面的真实尺寸”缩放，而不是按选区本身缩放。
-  // 这样手动框选较小时，不会被自动放大到几乎铺满预览区域。
+  // 预览里的“单张纸大小”应该只由纸张尺寸本身决定，
+  // 不应该因为修改总宽高而把 A4/A3 的纸张框一起缩放掉。
   var previewScale = (0, _react.useMemo)(function () {
-    var frameSizeMm = getPreviewFrameSizeMm(splitPlan);
-    if (!frameSizeMm) {
+    if (!(splitPlan !== null && splitPlan !== void 0 && splitPlan.paperWidthMm) || !(splitPlan !== null && splitPlan !== void 0 && splitPlan.paperHeightMm)) {
       return 1;
     }
-    var scaleX = frameSizeMm.width / PREVIEW_WIDTH;
-    var scaleY = frameSizeMm.height / PREVIEW_HEIGHT;
+    var scaleX = splitPlan.paperWidthMm / PREVIEW_WIDTH;
+    var scaleY = splitPlan.paperHeightMm / PREVIEW_HEIGHT;
     return Math.max(scaleX, scaleY, 0.0001);
   }, [splitPlan]);
   var selectedMapPixels = (0, _react.useMemo)(function () {
@@ -585,10 +802,10 @@ function _default(props) {
   };
   var handleExportMapCreated = function handleExportMapCreated(exportMap) {
     exportMapRef.current = exportMap;
-    exportMap.getInteractions().forEach(function (item) {
-      return item.setActive(false);
-    });
-    syncBusinessLayers(map, exportMap, boxLayerRef.current);
+    renderLayersSyncedRef.current = false;
+  };
+  var handlePreviewMapCreated = function handlePreviewMapCreated(previewMap) {
+    previewMapRef.current = previewMap;
   };
 
   // 隐藏导出地图只在第一次真正需要时补同步业务图层，
@@ -603,11 +820,18 @@ function _default(props) {
     }
     return true;
   };
+  var syncPreviewMapLayers = function syncPreviewMapLayers() {
+    if (!previewMapRef.current) {
+      return false;
+    }
+    syncBusinessLayers(map, previewMapRef.current, boxLayerRef.current);
+    return true;
+  };
 
   // 点击“执行分幅”时，直接读取外部主地图当前层级，
   // 也就是“外面地图是什么层级，进去就按什么层级算”。
   var handleSubmit = function handleSubmit(values) {
-    var _values$overlapMargin, _map$getView$getZoom, _map$getView;
+    var _values$overlapMargin, _map$getView$getZoom, _map$getView2;
     var pageSize = values.pageSize || form.getFieldValue('pageSize');
     var overlapMargin = Number((_values$overlapMargin = values.overlapMargin) !== null && _values$overlapMargin !== void 0 ? _values$overlapMargin : form.getFieldValue('overlapMargin')) || 0;
     // const overlapMargin = 10
@@ -617,7 +841,7 @@ function _default(props) {
     if (!isValidExtent(extent)) {
       return;
     }
-    var zoom = Math.round(((_map$getView$getZoom = (_map$getView = map.getView()).getZoom) === null || _map$getView$getZoom === void 0 ? void 0 : _map$getView$getZoom.call(_map$getView)) || 0);
+    var zoom = Math.round(((_map$getView$getZoom = (_map$getView2 = map.getView()).getZoom) === null || _map$getView$getZoom === void 0 ? void 0 : _map$getView$getZoom.call(_map$getView2)) || 0);
     var nextMetrics = calcMetricsFromZoom(extent, map.getView(), zoom);
     if (!nextMetrics) {
       return;
@@ -649,7 +873,10 @@ function _default(props) {
     setTotalWidthMm(Number(nextMetrics.widthMm.toFixed(3)));
     setTotalHeightMm(Number(nextMetrics.heightMm.toFixed(3)));
     setPreviewReady(false);
+    setPreviewLoadingText(TextEnum.generatingPreviewText);
     setPreviewImage('');
+    previewMasterCanvasRef.current = null;
+    previewMasterFramePixelsRef.current = null;
     renderLayersSyncedRef.current = false;
     setSheetImages([]);
     setSheetVisible(false);
@@ -672,28 +899,26 @@ function _default(props) {
     setTotalWidthMm(Number((nextHeight / metrics.ratio).toFixed(3)));
   };
   var renderSheetImage = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(sheet) {
-      var previewImg, frameSizeMm, frameTotalWidthMm, frameTotalHeightMm, sourceX, sourceY, sourceWidth, sourceHeight, pageWidthPx, pageHeightPx, pageCanvas, ctx;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(sheet) {
+      var previewMasterCanvas, previewMasterFramePixels, frameSizeMm, frameTotalWidthMm, frameTotalHeightMm, sourceX, sourceY, sourceWidth, sourceHeight, pageWidthPx, pageHeightPx, pageCanvas, ctx;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
-            if (!(!splitPlan || !previewFramePixels || !previewImage)) {
-              _context2.n = 1;
+            if (!(!splitPlan || !previewMasterCanvasRef.current || !previewMasterFramePixelsRef.current)) {
+              _context3.n = 1;
               break;
             }
-            return _context2.a(2, null);
+            return _context3.a(2, null);
           case 1:
-            _context2.n = 2;
-            return loadImage(previewImage);
-          case 2:
-            previewImg = _context2.v;
+            previewMasterCanvas = previewMasterCanvasRef.current;
+            previewMasterFramePixels = previewMasterFramePixelsRef.current;
             frameSizeMm = getPreviewFrameSizeMm(splitPlan);
             frameTotalWidthMm = frameSizeMm.width;
             frameTotalHeightMm = frameSizeMm.height;
-            sourceX = sheet.xMm / frameTotalWidthMm * previewFramePixels.width;
-            sourceY = sheet.yMm / frameTotalHeightMm * previewFramePixels.height;
-            sourceWidth = splitPlan.paperWidthMm / frameTotalWidthMm * previewFramePixels.width;
-            sourceHeight = splitPlan.paperHeightMm / frameTotalHeightMm * previewFramePixels.height;
+            sourceX = sheet.xMm / frameTotalWidthMm * previewMasterFramePixels.width;
+            sourceY = sheet.yMm / frameTotalHeightMm * previewMasterFramePixels.height;
+            sourceWidth = splitPlan.paperWidthMm / frameTotalWidthMm * previewMasterFramePixels.width;
+            sourceHeight = splitPlan.paperHeightMm / frameTotalHeightMm * previewMasterFramePixels.height;
             pageWidthPx = Math.max(1, Math.round(mmToPx(splitPlan.paperWidthMm, EXPORT_DPI)));
             pageHeightPx = Math.max(1, Math.round(mmToPx(splitPlan.paperHeightMm, EXPORT_DPI)));
             console.log('[MapSheetPrint] 生成单张图幅', {
@@ -714,17 +939,17 @@ function _default(props) {
             ctx = pageCanvas.getContext('2d');
             ctx.fillStyle = '#fff';
             ctx.fillRect(0, 0, pageWidthPx, pageHeightPx);
-            ctx.drawImage(previewImg, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, pageWidthPx, pageHeightPx);
-            return _context2.a(2, _objectSpread(_objectSpread({}, sheet), {}, {
-              url: pageCanvas.toDataURL('image/jpeg', 0.92),
+            ctx.drawImage(previewMasterCanvas, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, pageWidthPx, pageHeightPx);
+            return _context3.a(2, _objectSpread(_objectSpread({}, sheet), {}, {
+              url: pageCanvas.toDataURL('image/png'),
               pixelWidth: pageWidthPx,
               pixelHeight: pageHeightPx
             }));
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function renderSheetImage(_x4) {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 
@@ -732,17 +957,17 @@ function _default(props) {
   // 宽高变大时，不改 extent，而是先把隐藏地图按更大的像素尺寸重新渲染，
   // 相当于“放大地图层级”，再把同一个 extent 裁成预览图。
   var renderPreviewImage = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(seq) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(seq) {
       var _exportMapRef$current, _exportMapRef$current2;
-      var widthScale, heightScale, captureWidthPx, captureHeightPx, targetResolution, targetCenter, view, sourceCanvas, previewCanvas, ctx;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.n) {
+      var widthScale, heightScale, captureWidthPx, captureHeightPx, targetResolution, targetCenter, view, _previewMapRef$curren, _previewMapRef$curren2, previewView, sourceCanvas, previewCanvas, masterScaleX, masterScaleY, previewMasterCanvas, masterCtx, ctx;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
           case 0:
             if (!(!previewVisible || !(metrics !== null && metrics !== void 0 && metrics.extent) || !selectedMapPixels || !previewFramePixels || !exportMapRef.current || !exportStageRef.current)) {
-              _context3.n = 1;
+              _context4.n = 1;
               break;
             }
-            return _context3.a(2);
+            return _context4.a(2);
           case 1:
             widthScale = totalWidthMm / metrics.widthMm;
             heightScale = totalHeightMm / metrics.heightMm;
@@ -775,76 +1000,113 @@ function _default(props) {
               } : null
             });
             setPreviewReady(false);
-            _context3.n = 2;
+            setPreviewLoadingText(TextEnum.syncingLayersText);
+            _context4.n = 2;
             return waitNextFrame();
           case 2:
             if (!(seq !== previewRenderSeqRef.current)) {
-              _context3.n = 3;
+              _context4.n = 3;
               break;
             }
-            return _context3.a(2);
+            return _context4.a(2);
           case 3:
             if (ensureRenderMapLayers()) {
-              _context3.n = 4;
+              _context4.n = 4;
               break;
             }
-            return _context3.a(2);
+            return _context4.a(2);
           case 4:
+            syncPreviewMapLayers();
             setExportSize({
               width: captureWidthPx,
               height: captureHeightPx
             });
-            _context3.n = 5;
+            _context4.n = 5;
             return waitNextFrame();
           case 5:
             if (!(seq !== previewRenderSeqRef.current)) {
-              _context3.n = 6;
+              _context4.n = 6;
               break;
             }
-            return _context3.a(2);
+            return _context4.a(2);
           case 6:
             (_exportMapRef$current = (_exportMapRef$current2 = exportMapRef.current).updateSize) === null || _exportMapRef$current === void 0 || _exportMapRef$current.call(_exportMapRef$current2);
             view = exportMapRef.current.getView();
             view.setCenter(targetCenter);
             view.setResolution(targetResolution);
-            _context3.n = 7;
+            if (previewMapRef.current) {
+              (_previewMapRef$curren = (_previewMapRef$curren2 = previewMapRef.current).updateSize) === null || _previewMapRef$curren === void 0 || _previewMapRef$curren.call(_previewMapRef$curren2);
+              previewView = previewMapRef.current.getView();
+              previewView.setCenter(targetCenter);
+              previewView.setResolution(targetResolution);
+            }
+            _context4.n = 7;
             return waitMapRender(exportMapRef.current);
           case 7:
-            _context3.n = 8;
-            return waitNextFrame();
+            setPreviewLoadingText(TextEnum.waitingBusinessLayersText);
+            _context4.n = 8;
+            return waitLayerSourcesSettled(exportMapRef.current);
           case 8:
+            _context4.n = 9;
+            return waitMapRender(exportMapRef.current);
+          case 9:
+            if (!previewMapRef.current) {
+              _context4.n = 10;
+              break;
+            }
+            _context4.n = 10;
+            return waitMapRender(previewMapRef.current);
+          case 10:
+            _context4.n = 11;
+            return waitNextFrame();
+          case 11:
             if (!(seq !== previewRenderSeqRef.current)) {
-              _context3.n = 9;
+              _context4.n = 12;
               break;
             }
-            return _context3.a(2);
-          case 9:
-            _context3.n = 10;
+            return _context4.a(2);
+          case 12:
+            _context4.n = 13;
             return captureDomCanvas(exportStageRef.current, captureWidthPx, captureHeightPx);
-          case 10:
-            sourceCanvas = _context3.v;
+          case 13:
+            sourceCanvas = _context4.v;
             if (!(seq !== previewRenderSeqRef.current)) {
-              _context3.n = 11;
+              _context4.n = 14;
               break;
             }
-            return _context3.a(2);
-          case 11:
+            return _context4.a(2);
+          case 14:
             previewCanvas = document.createElement('canvas');
             previewCanvas.width = Math.max(1, Math.round(previewFramePixels.width));
             previewCanvas.height = Math.max(1, Math.round(previewFramePixels.height));
+            masterScaleX = captureWidthPx / Math.max(1, selectedMapPixels.width);
+            masterScaleY = captureHeightPx / Math.max(1, selectedMapPixels.height);
+            previewMasterCanvas = document.createElement('canvas');
+            previewMasterCanvas.width = Math.max(1, Math.round(previewFramePixels.width * masterScaleX));
+            previewMasterCanvas.height = Math.max(1, Math.round(previewFramePixels.height * masterScaleY));
+            masterCtx = previewMasterCanvas.getContext('2d');
+            masterCtx.fillStyle = '#fff';
+            masterCtx.fillRect(0, 0, previewMasterCanvas.width, previewMasterCanvas.height);
+            masterCtx.drawImage(sourceCanvas, 0, 0, captureWidthPx, captureHeightPx);
+            previewMasterCanvasRef.current = previewMasterCanvas;
+            previewMasterFramePixelsRef.current = {
+              width: previewMasterCanvas.width,
+              height: previewMasterCanvas.height
+            };
             ctx = previewCanvas.getContext('2d');
             ctx.fillStyle = '#fff';
             ctx.fillRect(0, 0, previewCanvas.width, previewCanvas.height);
-            ctx.drawImage(sourceCanvas, 0, 0, captureWidthPx, captureHeightPx, 0, 0, selectedMapPixels.width, selectedMapPixels.height);
-            setPreviewImage(previewCanvas.toDataURL('image/jpeg', 0.92));
+            ctx.drawImage(previewMasterCanvas, 0, 0, previewCanvas.width, previewCanvas.height);
+            setPreviewImage(previewCanvas.toDataURL('image/png'));
             setPreviewReady(true);
-          case 12:
-            return _context3.a(2);
+            setPreviewLoadingText(TextEnum.generatingPreviewText);
+          case 15:
+            return _context4.a(2);
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return function renderPreviewImage(_x5) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
@@ -893,51 +1155,51 @@ function _default(props) {
     });
   }, [splitPlan, totalWidthMm, totalHeightMm, pageSizeValue, overlapMarginValue]);
   var handleGenerateSheets = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       var _splitPlan$sheets;
       var images, _iterator, _step, sheet, image, _t;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.p = _context4.n) {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.p = _context5.n) {
           case 0:
             if (splitPlan !== null && splitPlan !== void 0 && (_splitPlan$sheets = splitPlan.sheets) !== null && _splitPlan$sheets !== void 0 && _splitPlan$sheets.length) {
-              _context4.n = 1;
+              _context5.n = 1;
               break;
             }
-            return _context4.a(2);
+            return _context5.a(2);
           case 1:
             setGenerating(true);
-            _context4.p = 2;
+            _context5.p = 2;
             images = [];
             _iterator = _createForOfIteratorHelper(splitPlan.sheets);
-            _context4.p = 3;
+            _context5.p = 3;
             _iterator.s();
           case 4:
             if ((_step = _iterator.n()).done) {
-              _context4.n = 7;
+              _context5.n = 7;
               break;
             }
             sheet = _step.value;
-            _context4.n = 5;
+            _context5.n = 5;
             return renderSheetImage(sheet);
           case 5:
-            image = _context4.v;
+            image = _context5.v;
             if (image) {
               images.push(image);
             }
           case 6:
-            _context4.n = 4;
+            _context5.n = 4;
             break;
           case 7:
-            _context4.n = 9;
+            _context5.n = 9;
             break;
           case 8:
-            _context4.p = 8;
-            _t = _context4.v;
+            _context5.p = 8;
+            _t = _context5.v;
             _iterator.e(_t);
           case 9:
-            _context4.p = 9;
+            _context5.p = 9;
             _iterator.f();
-            return _context4.f(9);
+            return _context5.f(9);
           case 10:
             setSheetImages(images);
             setSelectedSheetIds(images.map(function (item) {
@@ -946,16 +1208,16 @@ function _default(props) {
             setPreviewVisible(false);
             setSheetVisible(true);
           case 11:
-            _context4.p = 11;
+            _context5.p = 11;
             setGenerating(false);
-            return _context4.f(11);
+            return _context5.f(11);
           case 12:
-            return _context4.a(2);
+            return _context5.a(2);
         }
-      }, _callee4, null, [[3, 8, 9, 10], [2,, 11, 12]]);
+      }, _callee5, null, [[3, 8, 9, 10], [2,, 11, 12]]);
     }));
     return function handleGenerateSheets() {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var handleExportPdf = function handleExportPdf() {
@@ -986,16 +1248,16 @@ function _default(props) {
     },
     onFinish: handleSubmit
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
-    label: TextEnum.mapTitle,
+    label: TextEnum.mapPrintTitle,
     name: "title",
     rules: [{
       required: true,
-      message: TextEnum.pleaseInputTitle
+      message: TextEnum.pleaseInput
     }]
   }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
     placeholder: TextEnum.pleaseInput
   })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
-    label: TextEnum.downloadRange,
+    label: TextEnum.printRange,
     name: "range",
     rules: [{
       required: true,
@@ -1012,8 +1274,16 @@ function _default(props) {
       value: '2',
       label: TextEnum.manualBoxSelect
     }]
-  })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
-    label: "\u7EB8\u5F20\u5C3A\u5BF8",
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginLeft: 12,
+      marginBottom: 12,
+      color: '#333',
+      fontSize: 14,
+      fontWeight: 500
+    }
+  }, TextEnum.sheetPrintParams), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    label: TextEnum.pageSize,
     name: "pageSize",
     rules: [{
       required: true,
@@ -1030,18 +1300,43 @@ function _default(props) {
       };
     })
   })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
-    label: "\u91CD\u53E0\u8FB9\u8DDD"
+    label: TextEnum.overlapMargin,
+    required: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
     name: "overlapMargin",
-    noStyle: true
+    rules: [{
+      required: true,
+      message: TextEnum.pleaseInput
+    }, {
+      type: 'integer',
+      transform: function transform(value) {
+        return value === undefined || value === null || value === '' ? value : Number(value);
+      },
+      message: TextEnum.pleaseInputInteger
+    }],
+    style: {
+      flex: 1,
+      marginBottom: 0
+    }
   }, /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
     min: 0,
     precision: 0,
     changeOnBlur: false,
+    step: 1,
     style: {
-      width: 'calc(100% - 40px)'
+      width: '100%'
     }
-  })), /*#__PURE__*/_react["default"].createElement("span", null, "\uFF08mm\uFF09")), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, "\uFF08mm\uFF09"))), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
     wrapperCol: {
       offset: 8,
       span: 16
@@ -1049,14 +1344,14 @@ function _default(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     type: "primary",
     htmlType: "submit"
-  }, "\u6267\u884C\u5206\u5E45"))), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+  }, TextEnum.executeSheetPrint))), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
     open: previewVisible,
     title: TextEnum.preview,
     onCancel: function onCancel() {
       return setPreviewVisible(false);
     },
     onOk: handleGenerateSheets,
-    okText: "\u786E\u5B9A",
+    okText: TextEnum.ok,
     cancelText: TextEnum.cancel,
     width: map.getViewport().clientWidth - 80,
     centered: true,
@@ -1070,18 +1365,23 @@ function _default(props) {
       alignItems: 'center',
       marginBottom: 12
     }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "\u5BBD"), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, TextEnum.widthText), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
     min: 0.001,
     precision: 3,
     value: totalWidthMm,
     onChange: handleWidthChange
-  }), /*#__PURE__*/_react["default"].createElement("span", null, "mm"), /*#__PURE__*/_react["default"].createElement("span", {
+  }), /*#__PURE__*/_react["default"].createElement("span", null, "mm"), /*#__PURE__*/_react["default"].createElement("img", {
+    src: _lock["default"],
+    alt: TextEnum.fixedRatioText,
     style: {
-      color: '#999'
+      width: 16,
+      height: 16,
+      objectFit: 'contain'
     }
-  }, "\u56FA\u5B9A\u6BD4\u4F8B"), /*#__PURE__*/_react["default"].createElement("span", null, "\u9AD8"), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
-    min: 0.001,
-    precision: 3,
+  }), /*#__PURE__*/_react["default"].createElement("span", null, TextEnum.heightText), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    precision: 0,
+    step: 1,
+    min: 0,
     value: totalHeightMm,
     onChange: handleHeightChange
   }), /*#__PURE__*/_react["default"].createElement("span", null, "mm"), splitPlan && /*#__PURE__*/_react["default"].createElement("span", {
@@ -1089,7 +1389,7 @@ function _default(props) {
       marginLeft: 'auto',
       color: '#666'
     }
-  }, splitPlan.cols, " \u5217 x ", splitPlan.rows, " \u884C\uFF0C\u5171 ", splitPlan.totalSheets, " \u5E45")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, splitPlan.cols, " ", TextEnum.colText, " x ", splitPlan.rows, " ", TextEnum.rowText, "\uFF0C", TextEnum.totalText, " ", splitPlan.totalSheets, " ", TextEnum.sheetText)), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: 'relative',
       height: PREVIEW_HEIGHT,
@@ -1100,14 +1400,25 @@ function _default(props) {
   }, !previewReady && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: 'absolute',
-      inset: 0,
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
       display: 'flex',
+      flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      zIndex: 2,
-      background: 'rgba(255,255,255,0.72)'
+      zIndex: 10,
+      background: 'rgba(255,255,255,0.82)',
+      gap: 12,
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, null), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      color: '#666',
+      fontSize: 13
     }
-  }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, null)), metrics && previewFramePixels && splitPlan && selectedMapPixels && /*#__PURE__*/_react["default"].createElement("div", {
+  }, previewLoadingText)), metrics && previewFramePixels && splitPlan && selectedMapPixels && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: 'relative',
       width: previewFramePixels.width,
@@ -1115,12 +1426,35 @@ function _default(props) {
       transformOrigin: 'top left'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: selectedMapPixels.width,
+      height: selectedMapPixels.height,
+      overflow: 'hidden',
+      zIndex: 0,
+      display: 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_olMap.Map, {
+    width: "".concat(Math.max(1, Math.round(selectedMapPixels.width)), "px"),
+    height: "".concat(Math.max(1, Math.round(selectedMapPixels.height)), "px"),
+    projection: inheritedMapProps.projection,
+    mapStyle: inheritedMapProps.mapStyle,
+    baseMapStyle: inheritedMapProps.baseMapStyle,
+    dark: inheritedMapProps.dark,
+    tk: inheritedMapProps.tk,
+    hidePopupTable: true,
+    createdMap: handlePreviewMapCreated
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: 'absolute',
       left: 0,
       top: 0,
       width: previewFramePixels.width,
-      height: previewFramePixels.height
+      height: previewFramePixels.height,
+      zIndex: 1,
+      pointerEvents: 'none'
     }
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: previewImage,
@@ -1128,7 +1462,9 @@ function _default(props) {
     style: {
       width: '100%',
       height: '100%',
-      display: previewImage ? 'block' : 'none'
+      display: previewImage ? 'block' : 'none',
+      pointerEvents: 'none',
+      opacity: 1
     }
   })), selectedRangeCoverage && selectedRangeCoverage.widthPercent < 100 && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -1138,7 +1474,8 @@ function _default(props) {
       width: "".concat(100 - selectedRangeCoverage.widthPercent, "%"),
       height: "".concat(selectedRangeCoverage.heightPercent, "%"),
       background: 'rgba(255,255,255,0.96)',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      zIndex: 2
     }
   }), selectedRangeCoverage && selectedRangeCoverage.heightPercent < 100 && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -1148,7 +1485,8 @@ function _default(props) {
       width: '100%',
       height: "".concat(100 - selectedRangeCoverage.heightPercent, "%"),
       background: 'rgba(255,255,255,0.96)',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      zIndex: 2
     }
   }), selectedRangeCoverage && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -1159,7 +1497,8 @@ function _default(props) {
       height: "".concat(selectedRangeCoverage.heightPercent, "%"),
       border: '2px solid rgba(24, 144, 255, 0.9)',
       boxSizing: 'border-box',
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      zIndex: 3
     }
   }), splitPlan === null || splitPlan === void 0 || (_splitPlan$sheets2 = splitPlan.sheets) === null || _splitPlan$sheets2 === void 0 ? void 0 : _splitPlan$sheets2.map(function (sheet) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -1172,7 +1511,8 @@ function _default(props) {
         height: "".concat(splitPlan.paperHeightMm / getPreviewFrameSizeMm(splitPlan).height * 100, "%"),
         border: '2px dashed #333',
         boxSizing: 'border-box',
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        zIndex: 4
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -1186,12 +1526,12 @@ function _default(props) {
     }, sheet.index));
   })))), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
     open: sheetVisible,
-    title: "\u56FE\u5E45\u7ED3\u679C",
+    title: TextEnum.sheetResultText,
     onCancel: function onCancel() {
       return setSheetVisible(false);
     },
     onOk: handleExportPdf,
-    okText: "\u6253\u5370",
+    okText: TextEnum.printText,
     cancelText: TextEnum.cancel,
     width: map.getViewport().clientWidth - 80,
     centered: true,
@@ -1208,7 +1548,7 @@ function _default(props) {
         return item.id;
       }) : []);
     }
-  }, "\u5168\u9009")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, TextEnum.selectAllText)), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       display: 'grid',
       gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
@@ -1242,7 +1582,7 @@ function _default(props) {
           });
         });
       }
-    }), /*#__PURE__*/_react["default"].createElement("span", null, "\u7B2C ", item.index, " \u5E45 (", item.row, "-", item.col, ")")), /*#__PURE__*/_react["default"].createElement("img", {
+    }), /*#__PURE__*/_react["default"].createElement("span", null, TextEnum.sheetIndexPrefix, " ", item.index, " ", TextEnum.sheetText, " (", item.row, "-", item.col, ")")), /*#__PURE__*/_react["default"].createElement("img", {
       src: item.url,
       alt: "sheet-".concat(item.index),
       style: {
@@ -1269,7 +1609,11 @@ function _default(props) {
   }, /*#__PURE__*/_react["default"].createElement(_olMap.Map, {
     width: "".concat(exportSize.width, "px"),
     height: "".concat(exportSize.height, "px"),
-    tk: "1adbb6e47668cb33757cd799548bf1f4",
+    projection: inheritedMapProps.projection,
+    mapStyle: inheritedMapProps.mapStyle,
+    baseMapStyle: inheritedMapProps.baseMapStyle,
+    dark: inheritedMapProps.dark,
+    tk: inheritedMapProps.tk,
     hidePopupTable: true,
     createdMap: handleExportMapCreated
   }))));