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

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

@@ -19,6 +19,9 @@ 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); }
@@ -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) {
@@ -321,6 +324,122 @@ var waitMapRender = function waitMapRender(mapInstance) {
     (_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\(([^)]+)\)$/);
@@ -501,22 +620,26 @@ 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);
@@ -528,13 +651,13 @@ function _default(props) {
   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',
@@ -568,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);
@@ -592,6 +718,24 @@ 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 的纸张框一起缩放掉。
@@ -658,11 +802,10 @@ function _default(props) {
   };
   var handleExportMapCreated = function handleExportMapCreated(exportMap) {
     exportMapRef.current = exportMap;
-    syncBusinessLayers(map, exportMap, boxLayerRef.current);
+    renderLayersSyncedRef.current = false;
   };
   var handlePreviewMapCreated = function handlePreviewMapCreated(previewMap) {
     previewMapRef.current = previewMap;
-    syncBusinessLayers(map, previewMap, boxLayerRef.current);
   };
 
   // 隐藏导出地图只在第一次真正需要时补同步业务图层，
@@ -688,7 +831,7 @@ function _default(props) {
   // 点击“执行分幅”时，直接读取外部主地图当前层级，
   // 也就是“外面地图是什么层级，进去就按什么层级算”。
   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
@@ -698,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;
@@ -730,6 +873,7 @@ 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;
@@ -856,6 +1000,7 @@ function _default(props) {
               } : null
             });
             setPreviewReady(false);
+            setPreviewLoadingText(TextEnum.syncingLayersText);
             _context4.n = 2;
             return waitNextFrame();
           case 2:
@@ -898,32 +1043,39 @@ function _default(props) {
             _context4.n = 7;
             return waitMapRender(exportMapRef.current);
           case 7:
-            if (!previewMapRef.current) {
-              _context4.n = 8;
-              break;
-            }
+            setPreviewLoadingText(TextEnum.waitingBusinessLayersText);
             _context4.n = 8;
-            return waitMapRender(previewMapRef.current);
+            return waitLayerSourcesSettled(exportMapRef.current);
           case 8:
             _context4.n = 9;
-            return waitNextFrame();
+            return waitMapRender(exportMapRef.current);
           case 9:
-            if (!(seq !== previewRenderSeqRef.current)) {
+            if (!previewMapRef.current) {
               _context4.n = 10;
               break;
             }
-            return _context4.a(2);
+            _context4.n = 10;
+            return waitMapRender(previewMapRef.current);
           case 10:
             _context4.n = 11;
-            return captureDomCanvas(exportStageRef.current, captureWidthPx, captureHeightPx);
+            return waitNextFrame();
           case 11:
-            sourceCanvas = _context4.v;
             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));
@@ -947,7 +1099,8 @@ function _default(props) {
             ctx.drawImage(previewMasterCanvas, 0, 0, previewCanvas.width, previewCanvas.height);
             setPreviewImage(previewCanvas.toDataURL('image/png'));
             setPreviewReady(true);
-          case 13:
+            setPreviewLoadingText(TextEnum.generatingPreviewText);
+          case 15:
             return _context4.a(2);
         }
       }, _callee4);
@@ -1095,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,
@@ -1121,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,
@@ -1139,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: '100%'
+    }
+  })), /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      width: 'calc(100% - 40px)'
+      whiteSpace: 'nowrap'
     }
-  })), /*#__PURE__*/_react["default"].createElement("span", null, "\uFF08mm\uFF09")), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+  }, "\uFF08mm\uFF09"))), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
     wrapperCol: {
       offset: 8,
       span: 16
@@ -1158,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,
@@ -1179,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", {
@@ -1198,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,
@@ -1209,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,
@@ -1237,7 +1439,11 @@ function _default(props) {
   }, /*#__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"),
-    tk: "1adbb6e47668cb33757cd799548bf1f4",
+    projection: inheritedMapProps.projection,
+    mapStyle: inheritedMapProps.mapStyle,
+    baseMapStyle: inheritedMapProps.baseMapStyle,
+    dark: inheritedMapProps.dark,
+    tk: inheritedMapProps.tk,
     hidePopupTable: true,
     createdMap: handlePreviewMapCreated
   })), /*#__PURE__*/_react["default"].createElement("div", {
@@ -1320,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,
@@ -1342,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))',
@@ -1376,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: {
@@ -1403,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
   }))));