@vtx/ol-map 2.0.0-beta.2 → 2.0.0-beta.20

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

@@ -0,0 +1,1640 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _Modal = _interopRequireDefault(require("../../components/Modal"));
+var _jspdf = require("jspdf");
+var _html2canvas = _interopRequireDefault(require("html2canvas"));
+var _interaction = require("ol/interaction");
+var _Vector = _interopRequireDefault(require("ol/layer/Vector"));
+var _Tile = _interopRequireDefault(require("ol/layer/Tile"));
+var _Image = _interopRequireDefault(require("ol/layer/Image"));
+var _Vector2 = _interopRequireDefault(require("ol/source/Vector"));
+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 _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) { if (r) i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n;else { var o = function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); }; 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); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; } // import { snapdom } from '@zumer/snapdom';
+var pageSizeOptions = ['A4', 'A3', 'A2', 'A1', 'A0'];
+var pageSizeMap = {
+  A4: {
+    width: 210,
+    height: 297
+  },
+  A3: {
+    width: 297,
+    height: 420
+  },
+  A2: {
+    width: 420,
+    height: 594
+  },
+  A1: {
+    width: 594,
+    height: 841
+  },
+  A0: {
+    width: 841,
+    height: 1189
+  }
+};
+var DIMENSION_DPI = 96;
+var EXPORT_DPI = 144;
+var PREVIEW_HEIGHT = 610;
+var PREVIEW_WIDTH = 980;
+var pxToMm = function pxToMm(px) {
+  var dpi = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DIMENSION_DPI;
+  return px * 25.4 / dpi;
+};
+var mmToPx = function mmToPx(mm) {
+  var dpi = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : EXPORT_DPI;
+  return mm * dpi / 25.4;
+};
+var isValidExtent = function isValidExtent(extent) {
+  return Array.isArray(extent) && extent.length === 4 && extent.every(function (item) {
+    return Number.isFinite(item);
+  }) && extent[2] > extent[0] && extent[3] > extent[1];
+};
+
+// 按指定层级把地理范围换算成屏幕像素和毫米尺寸。
+// 这里算出来的宽高是后面分幅、预览和导出的统一基础数据。
+var calcMetricsFromZoom = function calcMetricsFromZoom(extent, view, zoom) {
+  if (!isValidExtent(extent)) {
+    return null;
+  }
+  var resolution = view.getResolutionForZoom(zoom) || view.getResolution();
+  var geoWidth = extent[2] - extent[0];
+  var geoHeight = extent[3] - extent[1];
+  var pixelWidth = geoWidth / resolution;
+  var pixelHeight = geoHeight / resolution;
+  var widthMm = pxToMm(pixelWidth, DIMENSION_DPI);
+  var heightMm = pxToMm(pixelHeight, DIMENSION_DPI);
+  return {
+    extent: extent,
+    zoom: zoom,
+    resolution: resolution,
+    geoWidth: geoWidth,
+    geoHeight: geoHeight,
+    pixelWidth: pixelWidth,
+    pixelHeight: pixelHeight,
+    widthMm: widthMm,
+    heightMm: heightMm,
+    ratio: heightMm / widthMm
+  };
+};
+
+// 根据总宽高、纸张尺寸和重叠边距，计算需要切成多少张纸，
+// 以及每一张纸在整幅图中的毫米位置。
+var calcSplitPlan = function calcSplitPlan(_ref) {
+  var totalWidthMm = _ref.totalWidthMm,
+    totalHeightMm = _ref.totalHeightMm,
+    pageSize = _ref.pageSize,
+    _ref$overlapMargin = _ref.overlapMargin,
+    overlapMargin = _ref$overlapMargin === void 0 ? 0 : _ref$overlapMargin;
+  var paper = pageSizeMap[pageSize];
+  if (!paper || !totalWidthMm || !totalHeightMm) {
+    return null;
+  }
+  var safeOverlap = Math.max(0, Number(overlapMargin) || 0);
+  var stepX = Math.max(1, paper.width - safeOverlap);
+  var stepY = Math.max(1, paper.height - safeOverlap);
+  var cols = Math.max(1, Math.ceil(totalWidthMm / stepX));
+  var rows = Math.max(1, Math.ceil(totalHeightMm / stepY));
+  var sheets = [];
+  for (var row = 0; row < rows; row++) {
+    for (var col = 0; col < cols; col++) {
+      var xMm = col * stepX;
+      var yMm = row * stepY;
+      var widthMm = Math.min(paper.width, totalWidthMm - xMm);
+      var heightMm = Math.min(paper.height, totalHeightMm - yMm);
+      sheets.push({
+        id: "".concat(row + 1, "-").concat(col + 1),
+        index: row * cols + col + 1,
+        row: row + 1,
+        col: col + 1,
+        xMm: xMm,
+        yMm: yMm,
+        widthMm: widthMm,
+        heightMm: heightMm,
+        isPartial: widthMm < paper.width || heightMm < paper.height
+      });
+    }
+  }
+  return {
+    paperWidthMm: paper.width,
+    paperHeightMm: paper.height,
+    overlapMargin: safeOverlap,
+    totalWidthMm: totalWidthMm,
+    totalHeightMm: totalHeightMm,
+    stepX: stepX,
+    stepY: stepY,
+    cols: cols,
+    rows: rows,
+    totalSheets: sheets.length,
+    sheets: sheets
+  };
+};
+
+// 把某一张分幅纸在整幅图中的毫米位置，映射回真实地图 extent。
+var buildSheetExtent = function buildSheetExtent(sheet, plan, totalExtent) {
+  var _totalExtent = _slicedToArray(totalExtent, 4),
+    minX = _totalExtent[0],
+    minY = _totalExtent[1],
+    maxX = _totalExtent[2],
+    maxY = _totalExtent[3];
+  var xScale = (maxX - minX) / plan.totalWidthMm;
+  var yScale = (maxY - minY) / plan.totalHeightMm;
+  var left = minX + sheet.xMm * xScale;
+  var right = left + sheet.widthMm * xScale;
+  var top = maxY - sheet.yMm * yScale;
+  var bottom = top - sheet.heightMm * yScale;
+  return [left, bottom, right, top];
+};
+
+// 预览区显示的是“完整纸张网格”的外框，不是仅仅显示用户选中的蓝框范围。
+// 这样最后一张纸即使没铺满，虚线纸张尺寸也仍然是完整的。
+var buildPreviewFrameExtent = function buildPreviewFrameExtent(plan, totalExtent) {
+  if (!plan || !isValidExtent(totalExtent)) {
+    return null;
+  }
+  var _totalExtent2 = _slicedToArray(totalExtent, 4),
+    minX = _totalExtent2[0],
+    minY = _totalExtent2[1],
+    maxX = _totalExtent2[2],
+    maxY = _totalExtent2[3];
+  var xScale = (maxX - minX) / plan.totalWidthMm;
+  var yScale = (maxY - minY) / plan.totalHeightMm;
+  var frameWidthMm = plan.paperWidthMm + Math.max(0, plan.cols - 1) * plan.stepX;
+  var frameHeightMm = plan.paperHeightMm + Math.max(0, plan.rows - 1) * plan.stepY;
+  return [minX, maxY - frameHeightMm * yScale, minX + frameWidthMm * xScale, maxY];
+};
+var getPreviewFrameSizeMm = function getPreviewFrameSizeMm(plan) {
+  if (!plan) {
+    return null;
+  }
+  return {
+    width: plan.paperWidthMm + Math.max(0, plan.cols - 1) * plan.stepX,
+    height: plan.paperHeightMm + Math.max(0, plan.rows - 1) * plan.stepY
+  };
+};
+var getExtentCenter = function getExtentCenter(extent) {
+  return [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
+};
+
+// 预览/导出地图会复用原地图的图层源。
+// 矢量图层这里做一份克隆，避免直接操作原图层上的 feature。
+var cloneVectorSource = function cloneVectorSource(source) {
+  if (!(source !== null && source !== void 0 && source.getFeatures)) {
+    return source;
+  }
+  return new _Vector2["default"]({
+    features: source.getFeatures().map(function (feature) {
+      return feature.clone();
+    })
+  });
+};
+
+// 这里只同步常见业务图层到隐藏导出地图中，
+// 不把框选图层、高亮层和底图标注层混进去，避免预览污染。
+var cloneLayer = function cloneLayer(layer) {
+  var _layer$getOpacity, _layer$getVisible, _layer$getZIndex, _layer$getExtent;
+  var common = {
+    opacity: (_layer$getOpacity = layer.getOpacity) === null || _layer$getOpacity === void 0 ? void 0 : _layer$getOpacity.call(layer),
+    visible: (_layer$getVisible = layer.getVisible) === null || _layer$getVisible === void 0 ? void 0 : _layer$getVisible.call(layer),
+    zIndex: (_layer$getZIndex = layer.getZIndex) === null || _layer$getZIndex === void 0 ? void 0 : _layer$getZIndex.call(layer),
+    extent: (_layer$getExtent = layer.getExtent) === null || _layer$getExtent === void 0 ? void 0 : _layer$getExtent.call(layer)
+  };
+  if (layer instanceof _Vector["default"]) {
+    var clonedLayer = new _Vector["default"](_objectSpread(_objectSpread({}, common), {}, {
+      source: cloneVectorSource(layer.getSource()),
+      style: layer.getStyle()
+    }));
+    clonedLayer.set('__sheetPrintClone', true);
+    return clonedLayer;
+  }
+  if (layer instanceof _Tile["default"]) {
+    var _clonedLayer = new _Tile["default"](_objectSpread(_objectSpread({}, common), {}, {
+      source: layer.getSource()
+    }));
+    _clonedLayer.set('__sheetPrintClone', true);
+    return _clonedLayer;
+  }
+  if (layer instanceof _Image["default"]) {
+    var _clonedLayer2 = new _Image["default"](_objectSpread(_objectSpread({}, common), {}, {
+      source: layer.getSource()
+    }));
+    _clonedLayer2.set('__sheetPrintClone', true);
+    return _clonedLayer2;
+  }
+  return null;
+};
+var clearClonedLayers = function clearClonedLayers(mapInstance) {
+  if (!mapInstance) {
+    return;
+  }
+  mapInstance.getLayers().getArray().filter(function (layer) {
+    return layer.get('__sheetPrintClone');
+  }).forEach(function (layer) {
+    return mapInstance.removeLayer(layer);
+  });
+};
+
+// 隐藏导出地图和主地图不是同一个实例，所以需要把当前可见业务图层同步过去。
+var syncBusinessLayers = function syncBusinessLayers(sourceMap, targetMap, excludeLayer) {
+  if (!sourceMap || !targetMap) {
+    return;
+  }
+  clearClonedLayers(targetMap);
+  sourceMap.getLayers().getArray().filter(function (layer) {
+    var _layer$getVisible2;
+    if (layer === excludeLayer) {
+      return false;
+    }
+    if (!(layer !== null && layer !== void 0 && (_layer$getVisible2 = layer.getVisible) !== null && _layer$getVisible2 !== void 0 && _layer$getVisible2.call(layer))) {
+      return false;
+    }
+    if (layer.get('key') === 'Highlight') {
+      return false;
+    }
+    if (layer.get('key') === '__TDT_TILE' || layer.get('key') === '__TDT_MARK') {
+      return false;
+    }
+    return true;
+  }).forEach(function (layer) {
+    var clonedLayer = cloneLayer(layer);
+    if (clonedLayer) {
+      targetMap.addLayer(clonedLayer);
+    }
+  });
+};
+var waitNextFrame = function waitNextFrame() {
+  return new Promise(function (resolve) {
+    requestAnimationFrame(function () {
+      requestAnimationFrame(resolve);
+    });
+  });
+};
+var waitMapRender = function waitMapRender(mapInstance) {
+  return new Promise(function (resolve) {
+    var _mapInstance$renderSy;
+    if (!mapInstance) {
+      resolve();
+      return;
+    }
+    var done = false;
+    var finish = function finish() {
+      if (done) {
+        return;
+      }
+      done = true;
+      resolve();
+    };
+    mapInstance.once('rendercomplete', finish);
+    setTimeout(finish, 600);
+    (_mapInstance$renderSy = mapInstance.renderSync) === null || _mapInstance$renderSy === void 0 || _mapInstance$renderSy.call(mapInstance);
+  });
+};
+
+// 业务图层经常是 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:
+          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 _context2.a(2, canvas);
+      }
+    }, _callee2);
+  }));
+  return function captureDomCanvas(_x, _x2, _x3) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var loadImage = function loadImage(src) {
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+    img.onload = function () {
+      return resolve(img);
+    };
+    img.onerror = reject;
+    img.src = src;
+  });
+};
+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;
+  }
+  var orientation = pageWidthMm > pageHeightMm ? 'landscape' : 'portrait';
+  var pdf = new _jspdf.jsPDF({
+    orientation: orientation,
+    unit: 'mm',
+    format: [pageWidthMm, pageHeightMm],
+    compress: true
+  });
+  images.forEach(function (item, index) {
+    if (index > 0) {
+      pdf.addPage([pageWidthMm, pageHeightMm], orientation);
+    }
+    pdf.addImage(item.url, 'PNG', 0, 0, pageWidthMm, pageHeightMm, undefined, 'FAST');
+  });
+  pdf.save(decodeURIComponent("".concat(title || 'map-sheet-print', ".pdf")));
+};
+function _default(props) {
+  var _splitPlan$sheets2;
+  var _onClose = props.onClose;
+  var _useProps = (0, _useProps2["default"])(),
+    map = _useProps.map,
+    TextEnum = _useProps.TextEnum;
+  var _Form$useForm = _antd.Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    previewVisible = _useState2[0],
+    setPreviewVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sheetVisible = _useState4[0],
+    setSheetVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    formVal = _useState6[0],
+    setFormVal = _useState6[1];
+  var _useState7 = (0, _react.useState)('A4'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    pageSizeValue = _useState8[0],
+    setPageSizeValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    overlapMarginValue = _useState0[0],
+    setOverlapMarginValue = _useState0[1];
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    metrics = _useState10[0],
+    setMetrics = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    totalWidthMm = _useState12[0],
+    setTotalWidthMm = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    totalHeightMm = _useState14[0],
+    setTotalHeightMm = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    previewReady = _useState16[0],
+    setPreviewReady = _useState16[1];
+  var _useState17 = (0, _react.useState)(TextEnum.generatingPreviewText),
+    _useState18 = _slicedToArray(_useState17, 2),
+    previewLoadingText = _useState18[0],
+    setPreviewLoadingText = _useState18[1];
+  var _useState19 = (0, _react.useState)(''),
+    _useState20 = _slicedToArray(_useState19, 2),
+    previewImage = _useState20[0],
+    setPreviewImage = _useState20[1];
+  var _useState21 = (0, _react.useState)([]),
+    _useState22 = _slicedToArray(_useState21, 2),
+    sheetImages = _useState22[0],
+    setSheetImages = _useState22[1];
+  var _useState23 = (0, _react.useState)([]),
+    _useState24 = _slicedToArray(_useState23, 2),
+    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 cleanupInternalMaps = function cleanupInternalMaps() {
+    if (previewRenderTimerRef.current) {
+      clearTimeout(previewRenderTimerRef.current);
+      previewRenderTimerRef.current = null;
+    }
+    clearClonedLayers(exportMapRef.current);
+    clearClonedLayers(previewMapRef.current);
+    renderLayersSyncedRef.current = false;
+  };
+  var renderLayersSyncedRef = (0, _react.useRef)(false);
+  var previewRenderSeqRef = (0, _react.useRef)(0);
+  var previewRenderTimerRef = (0, _react.useRef)(null);
+  var _useState27 = (0, _react.useState)({
+      width: 1,
+      height: 1
+    }),
+    _useState28 = _slicedToArray(_useState27, 2),
+    exportSize = _useState28[0],
+    setExportSize = _useState28[1];
+  (0, _react.useEffect)(function () {
+    form.setFieldsValue({
+      range: '1',
+      pageSize: 'A4',
+      overlapMargin: 0
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    var boxSource = new _Vector2["default"]();
+    var boxLayer = new _Vector["default"]({
+      source: boxSource,
+      style: (0, _Draw2.drawStyle)(),
+      zIndex: 9999
+    });
+    var tool = new _interaction.Draw({
+      source: boxSource,
+      type: 'Circle',
+      style: function style(feature) {
+        return (0, _Draw2.drawStyle)(feature);
+      },
+      geometryFunction: (0, _Draw.createBox)()
+    });
+    boxLayerRef.current = boxLayer;
+    drawTool.current = tool;
+    tool.setActive(false);
+    tool.on('drawstart', function () {
+      boxSource.clear();
+      map.showTip(TextEnum.clickAgainToEnd);
+    });
+    tool.on('drawend', function (event) {
+      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);
+    return function () {
+      if (previewRenderTimerRef.current) {
+        clearTimeout(previewRenderTimerRef.current);
+      }
+      boxSource.clear();
+      map.removeLayer(boxLayer);
+      map.removeInteraction(tool);
+      map.hideTip();
+    };
+  }, []);
+  var splitPlan = (0, _react.useMemo)(function () {
+    return calcSplitPlan({
+      totalWidthMm: totalWidthMm,
+      totalHeightMm: totalHeightMm,
+      pageSize: pageSizeValue,
+      overlapMargin: overlapMarginValue
+    });
+  }, [totalWidthMm, totalHeightMm, pageSizeValue, overlapMarginValue]);
+  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 () {
+    if (!(splitPlan !== null && splitPlan !== void 0 && splitPlan.paperWidthMm) || !(splitPlan !== null && splitPlan !== void 0 && splitPlan.paperHeightMm)) {
+      return 1;
+    }
+    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 () {
+    if (!totalWidthMm || !totalHeightMm || !previewScale) {
+      return null;
+    }
+    return {
+      width: Math.max(1, totalWidthMm / previewScale),
+      height: Math.max(1, totalHeightMm / previewScale)
+    };
+  }, [totalWidthMm, totalHeightMm, previewScale]);
+  var previewFramePixels = (0, _react.useMemo)(function () {
+    var frameSizeMm = getPreviewFrameSizeMm(splitPlan);
+    if (!frameSizeMm || !previewScale) {
+      return null;
+    }
+    return {
+      width: Math.max(1, frameSizeMm.width / previewScale),
+      height: Math.max(1, frameSizeMm.height / previewScale)
+    };
+  }, [splitPlan, previewScale]);
+  var selectedRangeCoverage = (0, _react.useMemo)(function () {
+    var frameSizeMm = getPreviewFrameSizeMm(splitPlan);
+    if (!frameSizeMm || !totalWidthMm || !totalHeightMm) {
+      return null;
+    }
+    return {
+      widthPercent: totalWidthMm / frameSizeMm.width * 100,
+      heightPercent: totalHeightMm / frameSizeMm.height * 100
+    };
+  }, [splitPlan, totalWidthMm, totalHeightMm]);
+  (0, _react.useEffect)(function () {
+    if (splitPlan) {
+      setSelectedSheetIds(splitPlan.sheets.map(function (item) {
+        return item.id;
+      }));
+    }
+  }, [splitPlan]);
+  var handleRangeChange = function handleRangeChange(value) {
+    var _drawTool$current;
+    if (value === '1') {
+      var _boxLayerRef$current;
+      map.hideTip();
+      (_boxLayerRef$current = boxLayerRef.current) === null || _boxLayerRef$current === void 0 || (_boxLayerRef$current = _boxLayerRef$current.getSource()) === null || _boxLayerRef$current === void 0 || _boxLayerRef$current.clear();
+      boxExtentRef.current = null;
+    } else {
+      map.showTip(TextEnum.leftClickToStart);
+    }
+    (_drawTool$current = drawTool.current) === null || _drawTool$current === void 0 || _drawTool$current.setActive(value === '2');
+  };
+  var handlePageSizeChange = function handlePageSizeChange(value) {
+    var nextPageSize = value || 'A4';
+    setPageSizeValue(nextPageSize);
+    form.setFieldValue('pageSize', nextPageSize);
+  };
+  var handleExportMapCreated = function handleExportMapCreated(exportMap) {
+    exportMapRef.current = exportMap;
+    renderLayersSyncedRef.current = false;
+  };
+  var handlePreviewMapCreated = function handlePreviewMapCreated(previewMap) {
+    previewMapRef.current = previewMap;
+  };
+
+  // 隐藏导出地图只在第一次真正需要时补同步业务图层，
+  // 后面同一轮预览/导出尽量复用，避免频繁清空重建。
+  var ensureRenderMapLayers = function ensureRenderMapLayers() {
+    if (!exportMapRef.current) {
+      return false;
+    }
+    if (!renderLayersSyncedRef.current) {
+      syncBusinessLayers(map, exportMapRef.current, boxLayerRef.current);
+      renderLayersSyncedRef.current = true;
+    }
+    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$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
+
+    console.log('overlapMargin', values.overlapMargin, form.getFieldValue('overlapMargin'), overlapMargin);
+    var extent = values.range === '1' ? map.getView().calculateExtent(map.getSize()) : boxExtentRef.current;
+    if (!isValidExtent(extent)) {
+      return;
+    }
+    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;
+    }
+    console.log('[MapSheetPrint] 执行分幅参数', {
+      rangeMode: values.range,
+      extent: extent,
+      zoom: zoom,
+      pageSize: pageSize,
+      overlapMargin: overlapMargin,
+      metrics: {
+        geoWidth: nextMetrics.geoWidth,
+        geoHeight: nextMetrics.geoHeight,
+        pixelWidth: nextMetrics.pixelWidth,
+        pixelHeight: nextMetrics.pixelHeight,
+        widthMm: nextMetrics.widthMm,
+        heightMm: nextMetrics.heightMm,
+        ratio: nextMetrics.ratio
+      }
+    });
+    setFormVal(_objectSpread(_objectSpread({}, values), {}, {
+      pageSize: pageSize,
+      overlapMargin: overlapMargin,
+      printZoom: zoom
+    }));
+    setPageSizeValue(pageSize);
+    setOverlapMarginValue(overlapMargin);
+    setMetrics(nextMetrics);
+    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);
+    setPreviewVisible(true);
+  };
+  var handleWidthChange = function handleWidthChange(value) {
+    if (!metrics || !value) {
+      return;
+    }
+    var nextWidth = Number(value);
+    setTotalWidthMm(nextWidth);
+    setTotalHeightMm(Number((nextWidth * metrics.ratio).toFixed(3)));
+  };
+  var handleHeightChange = function handleHeightChange(value) {
+    if (!metrics || !value) {
+      return;
+    }
+    var nextHeight = Number(value);
+    setTotalHeightMm(nextHeight);
+    setTotalWidthMm(Number((nextHeight / metrics.ratio).toFixed(3)));
+  };
+  var renderSheetImage = /*#__PURE__*/function () {
+    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 || !previewMasterCanvasRef.current || !previewMasterFramePixelsRef.current)) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2, null);
+          case 1:
+            previewMasterCanvas = previewMasterCanvasRef.current;
+            previewMasterFramePixels = previewMasterFramePixelsRef.current;
+            frameSizeMm = getPreviewFrameSizeMm(splitPlan);
+            frameTotalWidthMm = frameSizeMm.width;
+            frameTotalHeightMm = frameSizeMm.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] 生成单张图幅', {
+              sheetId: sheet.id,
+              sheetIndex: sheet.index,
+              sheetWidthMm: sheet.widthMm,
+              sheetHeightMm: sheet.heightMm,
+              sourceX: sourceX,
+              sourceY: sourceY,
+              sourceWidth: sourceWidth,
+              sourceHeight: sourceHeight,
+              pageWidthPx: pageWidthPx,
+              pageHeightPx: pageHeightPx
+            });
+            pageCanvas = document.createElement('canvas');
+            pageCanvas.width = pageWidthPx;
+            pageCanvas.height = pageHeightPx;
+            ctx = pageCanvas.getContext('2d');
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, pageWidthPx, pageHeightPx);
+            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
+            }));
+        }
+      }, _callee3);
+    }));
+    return function renderSheetImage(_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  // 预览始终裁同一个原始 extent。
+  // 宽高变大时，不改 extent，而是先把隐藏地图按更大的像素尺寸重新渲染，
+  // 相当于“放大地图层级”，再把同一个 extent 裁成预览图。
+  var renderPreviewImage = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(seq) {
+      var _exportMapRef$current, _exportMapRef$current2;
+      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)) {
+              _context4.n = 1;
+              break;
+            }
+            return _context4.a(2);
+          case 1:
+            widthScale = totalWidthMm / metrics.widthMm;
+            heightScale = totalHeightMm / metrics.heightMm;
+            captureWidthPx = Math.max(1, Math.round(metrics.pixelWidth * widthScale));
+            captureHeightPx = Math.max(1, Math.round(metrics.pixelHeight * heightScale));
+            targetResolution = Math.max(metrics.geoWidth / captureWidthPx, metrics.geoHeight / captureHeightPx);
+            targetCenter = getExtentCenter(metrics.extent);
+            console.log('[MapSheetPrint] 生成预览裁图', {
+              seq: seq,
+              extent: metrics.extent,
+              zoom: metrics.zoom,
+              totalWidthMm: totalWidthMm,
+              totalHeightMm: totalHeightMm,
+              previewScale: previewScale,
+              previewFrameExtent: previewFrameExtent,
+              previewFramePixels: previewFramePixels,
+              selectedMapPixels: selectedMapPixels,
+              captureWidthPx: captureWidthPx,
+              captureHeightPx: captureHeightPx,
+              targetResolution: targetResolution,
+              targetCenter: targetCenter,
+              splitPlan: splitPlan ? {
+                cols: splitPlan.cols,
+                rows: splitPlan.rows,
+                totalSheets: splitPlan.totalSheets,
+                paperWidthMm: splitPlan.paperWidthMm,
+                paperHeightMm: splitPlan.paperHeightMm,
+                stepX: splitPlan.stepX,
+                stepY: splitPlan.stepY
+              } : null
+            });
+            setPreviewReady(false);
+            setPreviewLoadingText(TextEnum.syncingLayersText);
+            _context4.n = 2;
+            return waitNextFrame();
+          case 2:
+            if (!(seq !== previewRenderSeqRef.current)) {
+              _context4.n = 3;
+              break;
+            }
+            return _context4.a(2);
+          case 3:
+            if (ensureRenderMapLayers()) {
+              _context4.n = 4;
+              break;
+            }
+            return _context4.a(2);
+          case 4:
+            syncPreviewMapLayers();
+            setExportSize({
+              width: captureWidthPx,
+              height: captureHeightPx
+            });
+            _context4.n = 5;
+            return waitNextFrame();
+          case 5:
+            if (!(seq !== previewRenderSeqRef.current)) {
+              _context4.n = 6;
+              break;
+            }
+            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);
+            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:
+            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)) {
+              _context4.n = 12;
+              break;
+            }
+            return _context4.a(2);
+          case 12:
+            _context4.n = 13;
+            return captureDomCanvas(exportStageRef.current, captureWidthPx, captureHeightPx);
+          case 13:
+            sourceCanvas = _context4.v;
+            if (!(seq !== previewRenderSeqRef.current)) {
+              _context4.n = 14;
+              break;
+            }
+            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(previewMasterCanvas, 0, 0, previewCanvas.width, previewCanvas.height);
+            setPreviewImage(previewCanvas.toDataURL('image/png'));
+            setPreviewReady(true);
+            setPreviewLoadingText(TextEnum.generatingPreviewText);
+          case 15:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    return function renderPreviewImage(_x5) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    if (previewRenderTimerRef.current) {
+      clearTimeout(previewRenderTimerRef.current);
+    }
+    if (!previewVisible) {
+      return;
+    }
+    var seq = previewRenderSeqRef.current + 1;
+    previewRenderSeqRef.current = seq;
+    previewRenderTimerRef.current = setTimeout(function () {
+      renderPreviewImage(seq);
+    }, 120);
+    return function () {
+      if (previewRenderTimerRef.current) {
+        clearTimeout(previewRenderTimerRef.current);
+      }
+    };
+  }, [previewVisible, metrics === null || metrics === void 0 ? void 0 : metrics.extent, previewFrameExtent, previewFramePixels, selectedMapPixels, totalWidthMm, totalHeightMm]);
+  (0, _react.useEffect)(function () {
+    if (!previewVisible && !sheetVisible) {
+      cleanupInternalMaps();
+    }
+  }, [previewVisible, sheetVisible]);
+  (0, _react.useEffect)(function () {
+    if (!splitPlan) {
+      return;
+    }
+    console.log('[MapSheetPrint] 分幅计算结果', {
+      totalWidthMm: totalWidthMm,
+      totalHeightMm: totalHeightMm,
+      pageSize: pageSizeValue,
+      overlapMargin: overlapMarginValue,
+      cols: splitPlan.cols,
+      rows: splitPlan.rows,
+      totalSheets: splitPlan.totalSheets,
+      paperWidthMm: splitPlan.paperWidthMm,
+      paperHeightMm: splitPlan.paperHeightMm,
+      sheets: splitPlan.sheets.map(function (item) {
+        return {
+          id: item.id,
+          index: item.index,
+          xMm: item.xMm,
+          yMm: item.yMm,
+          widthMm: item.widthMm,
+          heightMm: item.heightMm,
+          isPartial: item.isPartial
+        };
+      })
+    });
+  }, [splitPlan, totalWidthMm, totalHeightMm, pageSizeValue, overlapMarginValue]);
+  var handleGenerateSheets = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      var _splitPlan$sheets;
+      var images, _iterator, _step, sheet, image, _t;
+      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) {
+              _context5.n = 1;
+              break;
+            }
+            return _context5.a(2);
+          case 1:
+            setGenerating(true);
+            _context5.p = 2;
+            images = [];
+            _iterator = _createForOfIteratorHelper(splitPlan.sheets);
+            _context5.p = 3;
+            _iterator.s();
+          case 4:
+            if ((_step = _iterator.n()).done) {
+              _context5.n = 7;
+              break;
+            }
+            sheet = _step.value;
+            _context5.n = 5;
+            return renderSheetImage(sheet);
+          case 5:
+            image = _context5.v;
+            if (image) {
+              images.push(image);
+            }
+          case 6:
+            _context5.n = 4;
+            break;
+          case 7:
+            _context5.n = 9;
+            break;
+          case 8:
+            _context5.p = 8;
+            _t = _context5.v;
+            _iterator.e(_t);
+          case 9:
+            _context5.p = 9;
+            _iterator.f();
+            return _context5.f(9);
+          case 10:
+            setSheetImages(images);
+            setSelectedSheetIds(images.map(function (item) {
+              return item.id;
+            }));
+            setPreviewVisible(false);
+            setSheetVisible(true);
+          case 11:
+            _context5.p = 11;
+            setGenerating(false);
+            return _context5.f(11);
+          case 12:
+            return _context5.a(2);
+        }
+      }, _callee5, null, [[3, 8, 9, 10], [2,, 11, 12]]);
+    }));
+    return function handleGenerateSheets() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var handleExportPdf = function handleExportPdf() {
+    var selectedImages = sheetImages.filter(function (item) {
+      return selectedSheetIds.includes(item.id);
+    });
+    if (!selectedImages.length || !splitPlan) {
+      return;
+    }
+    createPdfFromImages({
+      images: selectedImages,
+      pageWidthMm: splitPlan.paperWidthMm,
+      pageHeightMm: splitPlan.paperHeightMm,
+      title: formVal.title
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    title: TextEnum.toolMapSheetPrint,
+    onClose: function onClose() {
+      cleanupInternalMaps();
+      _onClose === null || _onClose === void 0 || _onClose();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
+    form: form,
+    name: "mapSheetPrint",
+    labelCol: {
+      span: 8
+    },
+    wrapperCol: {
+      span: 16
+    },
+    onFinish: handleSubmit
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    label: TextEnum.mapPrintTitle,
+    name: "title",
+    rules: [{
+      required: true,
+      message: TextEnum.pleaseInput
+    }]
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+    placeholder: TextEnum.pleaseInput
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    label: TextEnum.printRange,
+    name: "range",
+    rules: [{
+      required: true,
+      message: TextEnum.pleaseSelect
+    }]
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    placeholder: TextEnum.pleaseSelect,
+    allowClear: true,
+    onChange: handleRangeChange,
+    options: [{
+      value: '1',
+      label: TextEnum.currentView
+    }, {
+      value: '2',
+      label: TextEnum.manualBoxSelect
+    }]
+  })), /*#__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,
+      message: TextEnum.pleaseSelect
+    }]
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    placeholder: TextEnum.pleaseSelect,
+    allowClear: true,
+    onChange: handlePageSizeChange,
+    options: pageSizeOptions.map(function (item) {
+      return {
+        value: item,
+        label: item
+      };
+    })
+  })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    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",
+    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,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    min: 0,
+    precision: 0,
+    changeOnBlur: false,
+    step: 1,
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      whiteSpace: 'nowrap',
+      flexShrink: 0
+    }
+  }, "\uFF08mm\uFF09"))), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    wrapperCol: {
+      offset: 8,
+      span: 16
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, TextEnum.executeSheetPrint))), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+    open: previewVisible,
+    title: TextEnum.preview,
+    onCancel: function onCancel() {
+      return setPreviewVisible(false);
+    },
+    onOk: handleGenerateSheets,
+    okText: TextEnum.ok,
+    cancelText: TextEnum.cancel,
+    width: map.getViewport().clientWidth - 80,
+    centered: true,
+    wrapClassName: "ol-mapprint-modal",
+    confirmLoading: generating,
+    destroyOnHidden: false
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 12,
+      alignItems: 'center',
+      marginBottom: 12
+    }
+  }, /*#__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("img", {
+    src: _lock["default"],
+    alt: TextEnum.fixedRatioText,
+    style: {
+      width: 16,
+      height: 16,
+      objectFit: 'contain'
+    }
+  }), /*#__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", {
+    style: {
+      marginLeft: 'auto',
+      color: '#666'
+    }
+  }, 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,
+      overflow: 'auto',
+      background: '#f5f5f5',
+      border: '1px solid #e5e5e5'
+    }
+  }, !previewReady && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      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
+    }
+  }, previewLoadingText)), metrics && previewFramePixels && splitPlan && selectedMapPixels && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'relative',
+      width: previewFramePixels.width,
+      height: previewFramePixels.height,
+      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,
+      zIndex: 1,
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: previewImage,
+    alt: "sheet-preview",
+    style: {
+      width: '100%',
+      height: '100%',
+      display: previewImage ? 'block' : 'none',
+      pointerEvents: 'none',
+      opacity: 1
+    }
+  })), selectedRangeCoverage && selectedRangeCoverage.widthPercent < 100 && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      width: "".concat(100 - selectedRangeCoverage.widthPercent, "%"),
+      height: "".concat(selectedRangeCoverage.heightPercent, "%"),
+      background: 'rgba(255,255,255,0.96)',
+      pointerEvents: 'none',
+      zIndex: 2
+    }
+  }), selectedRangeCoverage && selectedRangeCoverage.heightPercent < 100 && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      width: '100%',
+      height: "".concat(100 - selectedRangeCoverage.heightPercent, "%"),
+      background: 'rgba(255,255,255,0.96)',
+      pointerEvents: 'none',
+      zIndex: 2
+    }
+  }), selectedRangeCoverage && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: "".concat(selectedRangeCoverage.widthPercent, "%"),
+      height: "".concat(selectedRangeCoverage.heightPercent, "%"),
+      border: '2px solid rgba(24, 144, 255, 0.9)',
+      boxSizing: 'border-box',
+      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", {
+      key: sheet.id,
+      style: {
+        position: 'absolute',
+        left: "".concat(sheet.xMm / getPreviewFrameSizeMm(splitPlan).width * 100, "%"),
+        top: "".concat(sheet.yMm / getPreviewFrameSizeMm(splitPlan).height * 100, "%"),
+        width: "".concat(splitPlan.paperWidthMm / getPreviewFrameSizeMm(splitPlan).width * 100, "%"),
+        height: "".concat(splitPlan.paperHeightMm / getPreviewFrameSizeMm(splitPlan).height * 100, "%"),
+        border: '2px dashed #333',
+        boxSizing: 'border-box',
+        pointerEvents: 'none',
+        zIndex: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 4,
+        left: 4,
+        background: 'rgba(255,255,255,0.92)',
+        padding: '0 4px',
+        fontSize: 12
+      }
+    }, sheet.index));
+  })))), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+    open: sheetVisible,
+    title: TextEnum.sheetResultText,
+    onCancel: function onCancel() {
+      return setSheetVisible(false);
+    },
+    onOk: handleExportPdf,
+    okText: TextEnum.printText,
+    cancelText: TextEnum.cancel,
+    width: map.getViewport().clientWidth - 80,
+    centered: true,
+    wrapClassName: "ol-mapprint-modal"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: 12
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+    indeterminate: selectedSheetIds.length > 0 && selectedSheetIds.length < sheetImages.length,
+    checked: sheetImages.length > 0 && selectedSheetIds.length === sheetImages.length,
+    onChange: function onChange(e) {
+      return setSelectedSheetIds(e.target.checked ? sheetImages.map(function (item) {
+        return item.id;
+      }) : []);
+    }
+  }, TextEnum.selectAllText)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+      gap: 16,
+      maxHeight: '70vh',
+      overflow: 'auto'
+    }
+  }, sheetImages.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("label", {
+      key: item.id,
+      style: {
+        display: 'block',
+        border: '1px solid #ddd',
+        borderRadius: 6,
+        padding: 12,
+        background: '#fff'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: 8,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+      checked: selectedSheetIds.includes(item.id),
+      onChange: function onChange(e) {
+        setSelectedSheetIds(function (current) {
+          return e.target.checked ? [].concat(_toConsumableArray(current), [item.id]) : current.filter(function (id) {
+            return id !== item.id;
+          });
+        });
+      }
+    }), /*#__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: {
+        width: '100%',
+        display: 'block',
+        border: '1px solid #eee'
+      }
+    }));
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '-100000px',
+      top: 0,
+      width: exportSize.width,
+      height: exportSize.height,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: exportStageRef,
+    style: {
+      width: exportSize.width,
+      height: exportSize.height
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_olMap.Map, {
+    width: "".concat(exportSize.width, "px"),
+    height: "".concat(exportSize.height, "px"),
+    projection: inheritedMapProps.projection,
+    mapStyle: inheritedMapProps.mapStyle,
+    baseMapStyle: inheritedMapProps.baseMapStyle,
+    dark: inheritedMapProps.dark,
+    tk: inheritedMapProps.tk,
+    hidePopupTable: true,
+    createdMap: handleExportMapCreated
+  }))));
+}
+//# sourceMappingURL=index.js.map