deeptwins-engine-3d 0.1.72 → 0.1.75

package/dist/esm/tileLayer/CustomRasterLayer.js

@@ -1,4 +1,3 @@
-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); }
 var _excluded = ["tilingScheme"];
 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; }
@@ -7,6 +6,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -17,6 +18,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _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); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -30,6 +32,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as turf from '@turf/turf';
 import * as Cesium from 'deeptwins-cesium';
 import proj4 from 'proj4';
+import CustomRasterClipWorkerClient from "./CustomRasterClipWorkerClient";
 import ImageryLayer from "./ImageryLayer";
 
 /**
@@ -81,18 +84,22 @@ import ImageryLayer from "./ImageryLayer";
  * - `clipFeatureCrs`：可选，clipFeature 的原始坐标系，默认跟随 dataCrs。
  * - `renderCrs`：可选，bounds、clipFeature 和瓦片范围转换后的目标坐标系，默认 `EPSG:4326`。
  * - `projectionDefs`：可选，自定义 proj4 坐标系定义。
- * - `clipFeature`：可选，GeoJSON Polygon/MultiPolygon/Feature/FeatureCollection。
+ * - `clipFeature`：可选，GeoJSON Polygon/MultiPolygon/Feature/FeatureCollection，`null` 等同未传。
  * - `autoFitBounds`：可选，创建后自动将相机定位到最终范围，需同时传入 `map`。
- * - `debug`：可选，`true` 使用 console.debug，函数则接收结构化调试事件。
+ * - `clipWithWorker`：可选，裁剪几何计算优先使用 Worker，默认 `true`。
+ * - `clipWorkerUrl`：可选，自定义裁剪 Worker 地址。
+ * - `debug`：可选，`true` 使用 console.log 输出调试信息，函数则接收结构化调试事件。
  */
 
 /** 通用范围格式：[minX, minY, maxX, maxY]。 */
 
 /** 调试事件类型，覆盖范围初始化、瓦片加载和裁剪决策。 */
 
+/** 瓦片 debug 状态。 */
+
 /** debug 回调收到的结构化事件。 */
 
-/** debug 配置：关闭、console.debug 输出，或自定义事件处理函数。 */
+/** debug 配置：关闭、console.log 输出，或自定义事件处理函数。 */
 
 /** 内置切片方案名称，或 Cesium 原生 TilingScheme 实例。 */
 
@@ -389,6 +396,14 @@ var transformGeoJson = function transformGeoJson(geoJson, sourceCrs, targetCrs)
   return clonedGeoJson;
 };
 
+/** 将 null、undefined 和非 GeoJSON 对象统一视为未传裁剪面。 */
+var normalizeClipFeature = function normalizeClipFeature(clipFeature) {
+  if (!clipFeature || _typeof(clipFeature) !== 'object' || Array.isArray(clipFeature)) {
+    return undefined;
+  }
+  return clipFeature;
+};
+
 /** 将 Geometry 包装为 Turf 可处理的 Feature。 */
 var createFeature = function createFeature(geometry) {
   var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -448,12 +463,55 @@ var getClipFeatureBounds = function getClipFeatureBounds(clipFeatures) {
   }
   return normalizeBounds(bbox);
 };
+var boundsIntersects = function boundsIntersects(left, right) {
+  return left[0] <= right[2] && left[2] >= right[0] && left[1] <= right[3] && left[3] >= right[1];
+};
+
+/** 为裁剪面预计算 bbox，供瓦片级粗过滤使用。 */
+var createClipFeatureEntries = function createClipFeatureEntries(clipFeatures) {
+  return clipFeatures.flatMap(function (feature) {
+    var bbox = normalizeBounds(turf.bbox(feature));
+    return bbox ? [{
+      feature: feature,
+      bbox: bbox
+    }] : [];
+  });
+};
+
+/** 高 minimumLevel 必须配合明确范围，避免 Cesium 初始化过多根瓦片。 */
+var validateRasterSchedulingRange = function validateRasterSchedulingRange(options) {
+  if ((options.minimumLevel || 0) > 0 && !options.hasRenderBounds && !options.hasSourceRectangle) {
+    throw new Error('CustomRasterLayer source.minimumLevel > 0 requires bounds, source.rectangle, or a valid clipFeature bounds.');
+  }
+};
 var getImageSize = function getImageSize(image) {
   return {
     width: image.width,
     height: image.height
   };
 };
+var DEBUG_STATUS_STYLES = {
+  loaded: {
+    label: '瓦片已加载',
+    consoleColor: '#16a34a'
+  },
+  kept: {
+    label: '瓦片已保留',
+    consoleColor: '#16a34a'
+  },
+  clipped: {
+    label: '瓦片已裁剪',
+    consoleColor: '#eab308'
+  },
+  filtered: {
+    label: '瓦片已过滤',
+    consoleColor: '#dc2626'
+  },
+  error: {
+    label: '瓦片处理异常',
+    consoleColor: '#b91c1c'
+  }
+};
 
 /**
  * 通用自定义栅格图层。
@@ -466,7 +524,7 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
   var _super = _createSuper(CustomRasterLayer);
   /** 创建通用栅格图层。 */
   function CustomRasterLayer(options) {
-    var _options$map;
+    var _options$clipWithWork, _options$clipWorkerUr, _options$map;
     var _this;
     _classCallCheck(this, CustomRasterLayer);
     if (!(options !== null && options !== void 0 && options.source)) {
@@ -476,15 +534,25 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
     var dataCrs = normalizeCrs(options.dataCrs || DEFAULT_CRS);
     var clipFeatureCrs = normalizeCrs(options.clipFeatureCrs || dataCrs);
     var renderCrs = normalizeCrs(options.renderCrs || DEFAULT_CRS);
-    var transformedClipFeature = transformGeoJson(options.clipFeature, clipFeatureCrs, renderCrs);
+    var normalizedClipFeature = normalizeClipFeature(options.clipFeature);
+    var transformedClipFeature = normalizedClipFeature ? transformGeoJson(normalizedClipFeature, clipFeatureCrs, renderCrs) : undefined;
     var clipFeatures = collectPolygonFeatures(transformedClipFeature);
+    var clipFeatureEntries = createClipFeatureEntries(clipFeatures);
+    var effectiveClipFeatures = clipFeatureEntries.map(function (entry) {
+      return entry.feature;
+    });
     var _options$source = options.source,
       sourceTilingSchemeOption = _options$source.tilingScheme,
       sourceOptionsRest = _objectWithoutProperties(_options$source, _excluded);
     var tileBounds = options.bounds ? transformBounds(options.bounds, dataCrs, renderCrs) : undefined;
-    var clipBounds = getClipFeatureBounds(clipFeatures);
+    var clipBounds = getClipFeatureBounds(effectiveClipFeatures);
     var renderBounds = clipBounds || tileBounds;
     var sourceRectangleBounds = sourceOptionsRest.rectangle ? rectangleToBounds(sourceOptionsRest.rectangle) : undefined;
+    validateRasterSchedulingRange({
+      minimumLevel: sourceOptionsRest.minimumLevel,
+      hasRenderBounds: !!renderBounds,
+      hasSourceRectangle: !!sourceOptionsRest.rectangle
+    });
     var fitBounds = clipBounds || tileBounds || sourceRectangleBounds;
     var tilingScheme = createRenderTilingScheme(createSourceTilingScheme(sourceTilingSchemeOption), renderCrs);
     var sourceOptions = _objectSpread(_objectSpread({}, sourceOptionsRest), {}, {
@@ -502,21 +570,32 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
     _defineProperty(_assertThisInitialized(_this), "source", void 0);
     _defineProperty(_assertThisInitialized(_this), "_debug", void 0);
     _defineProperty(_assertThisInitialized(_this), "_clipFeatures", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_clipFeatureEntries", void 0);
     _defineProperty(_assertThisInitialized(_this), "_fitBounds", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_clipWorkerUrl", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_clipWithWorker", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_clipWorkerClient", void 0);
     _defineProperty(_assertThisInitialized(_this), "_mapContext", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_destroyed", void 0);
     _this.id = options.id;
     _this.zIndex = options.zIndex;
     _this.source = imageProvider;
     _this._debug = options.debug;
-    _this._clipFeatures = clipFeatures;
+    _this._clipFeatures = effectiveClipFeatures;
+    _this._clipFeatureEntries = clipFeatureEntries;
     _this._fitBounds = fitBounds;
+    _this._clipWithWorker = (_options$clipWithWork = options.clipWithWorker) !== null && _options$clipWithWork !== void 0 ? _options$clipWithWork : true;
+    _this._clipWorkerUrl = (_options$clipWorkerUr = options.clipWorkerUrl) !== null && _options$clipWorkerUr !== void 0 ? _options$clipWorkerUr : '';
+    _this._clipWorkerClient = null;
     _this._mapContext = (_options$map = options.map) === null || _options$map === void 0 ? void 0 : _options$map._mapContext;
+    _this._destroyed = false;
     _this.logDebug({
       type: 'range',
       bounds: options.bounds,
       tileBounds: tileBounds,
       clipBounds: clipBounds,
       renderBounds: renderBounds,
+      clipFeature: transformedClipFeature,
       dataCrs: dataCrs,
       clipFeatureCrs: clipFeatureCrs,
       renderCrs: renderCrs
@@ -564,6 +643,15 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
       throw new Error('CustomRasterLayer fitToBounds requires a map camera.');
     }
 
+    /** 销毁图层并释放裁剪 Worker。 */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._destroyed = true;
+      this.destroyClipWorkerClient();
+      return _get(_getPrototypeOf(CustomRasterLayer.prototype), "destroy", this).call(this);
+    }
+
     /**
      * Cesium 内部纹理创建钩子。
      *
@@ -575,7 +663,6 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
   }, {
     key: "_createTexture",
     value: function _createTexture(context, imagery) {
-      var _this2 = this;
       var tileBbox = rectangleToBounds(imagery.rectangle);
       this.logDebug({
         type: 'tile-loaded',
@@ -585,91 +672,263 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
         bbox: tileBbox,
         imageSize: getImageSize(imagery.image)
       });
-      if (!this._clipFeatures.length) {
+      if (!this._clipFeatureEntries.length) {
         return this.createTexture(context, imagery);
       }
       try {
-        var tileFeature = turf.bboxPolygon(tileBbox);
-        var isWithin = this._clipFeatures.some(function (feature) {
-          return turf.booleanWithin(tileFeature, feature);
+        return this.createClippedTexture(context, imagery, tileBbox);
+      } catch (error) {
+        this.logDebug({
+          type: 'tile-error',
+          x: imagery.x,
+          y: imagery.y,
+          level: imagery.level,
+          bbox: tileBbox,
+          error: error
         });
-        if (isWithin) {
-          this.logDebug({
-            type: 'tile-kept',
-            x: imagery.x,
-            y: imagery.y,
-            level: imagery.level,
-            bbox: tileBbox,
-            reason: 'within-clip'
-          });
-          return this.createTexture(context, imagery);
+        return this.createTexture(context, imagery);
+      }
+    }
+
+    /** 调用 Cesium 原始纹理创建逻辑。 */
+  }, {
+    key: "createTexture",
+    value: function createTexture(context, imagery) {
+      return ImageryLayer.prototype._createTexture.call(this, context, imagery);
+    }
+
+    /** 根据裁剪面 bbox 粗过滤当前瓦片可能相交的面。 */
+  }, {
+    key: "getCandidateClipFeatureIndexes",
+    value: function getCandidateClipFeatureIndexes(tileBbox) {
+      var candidateIndexes = [];
+      this._clipFeatureEntries.forEach(function (entry, index) {
+        if (boundsIntersects(tileBbox, entry.bbox)) {
+          candidateIndexes.push(index);
+        }
+      });
+      return candidateIndexes;
+    }
+  }, {
+    key: "getClipFeatures",
+    value: function getClipFeatures(candidateIndexes) {
+      var _this2 = this;
+      var features = [];
+      candidateIndexes.forEach(function (index) {
+        var _this2$_clipFeatureEn;
+        var feature = (_this2$_clipFeatureEn = _this2._clipFeatureEntries[index]) === null || _this2$_clipFeatureEn === void 0 ? void 0 : _this2$_clipFeatureEn.feature;
+        if (feature) {
+          features.push(feature);
         }
-        var intersections = this.getClipIntersections(tileFeature);
-        if (!intersections.length) {
-          this.logDebug({
-            type: 'tile-discarded',
+      });
+      return features;
+    }
+
+    // 按需创建裁剪 Worker；初始化失败时自动回退主线程裁剪。
+  }, {
+    key: "getClipWorkerClient",
+    value: function getClipWorkerClient() {
+      if (!this._clipWithWorker || this._destroyed || !this._clipFeatureEntries.length) {
+        return null;
+      }
+      if (this._clipWorkerClient) {
+        return this._clipWorkerClient;
+      }
+      try {
+        this._clipWorkerClient = new CustomRasterClipWorkerClient({
+          features: this._clipFeatureEntries,
+          workerUrl: this._clipWorkerUrl || undefined
+        });
+        return this._clipWorkerClient;
+      } catch (error) {
+        this._clipWithWorker = false;
+        console.warn('栅格裁剪 Worker 初始化失败，已回退主线程裁剪', error);
+        return null;
+      }
+    }
+
+    // 销毁当前裁剪 Worker，避免销毁后仍有挂起任务占用资源。
+  }, {
+    key: "destroyClipWorkerClient",
+    value: function destroyClipWorkerClient() {
+      var _this$_clipWorkerClie;
+      (_this$_clipWorkerClie = this._clipWorkerClient) === null || _this$_clipWorkerClie === void 0 || _this$_clipWorkerClie.destroy();
+      this._clipWorkerClient = null;
+    }
+  }, {
+    key: "createClippedTexture",
+    value: function createClippedTexture(context, imagery, tileBbox) {
+      var _this3 = this;
+      var candidateIndexes = this.getCandidateClipFeatureIndexes(tileBbox);
+      if (!candidateIndexes.length) {
+        return this.applyClipResult(context, imagery, tileBbox, {
+          status: 'discarded',
+          reason: 'outside-clip'
+        });
+      }
+      var clipWorkerClient = this.getClipWorkerClient();
+      if (!clipWorkerClient) {
+        return this.applyClipResult(context, imagery, tileBbox, this.clipTileOnMainThread(tileBbox, candidateIndexes, imagery));
+      }
+      void clipWorkerClient.clip({
+        tileBbox: tileBbox,
+        candidateIndexes: candidateIndexes,
+        width: imagery.image.width,
+        height: imagery.image.height
+      }).then(function (result) {
+        if (_this3._destroyed) {
+          return;
+        }
+        _this3.applyClipResult(context, imagery, tileBbox, result);
+      }).catch(function (error) {
+        _this3.destroyClipWorkerClient();
+        _this3._clipWithWorker = false;
+        if (_this3._destroyed) {
+          return;
+        }
+        _this3.logDebug({
+          type: 'tile-error',
+          x: imagery.x,
+          y: imagery.y,
+          level: imagery.level,
+          bbox: tileBbox,
+          error: error
+        });
+        try {
+          _this3.applyClipResult(context, imagery, tileBbox, _this3.clipTileOnMainThread(tileBbox, candidateIndexes, imagery));
+        } catch (fallbackError) {
+          _this3.logDebug({
+            type: 'tile-error',
             x: imagery.x,
             y: imagery.y,
             level: imagery.level,
             bbox: tileBbox,
-            reason: 'outside-clip'
+            error: fallbackError
           });
-          imagery.image = this.createTileCanvas(imagery);
-          return this.createTexture(context, imagery);
+          _this3.createTexture(context, imagery);
         }
-        var canvas = this.createTileCanvas(imagery);
-        var canvasContext = canvas.getContext('2d');
-        if (!canvasContext) {
-          return this.createTexture(context, imagery);
-        }
-        canvasContext.drawImage(imagery.image, 0, 0, imagery.image.width, imagery.image.height);
-        this.clip(canvasContext, intersections.flatMap(function (intersection) {
-          return _this2.geometryToPathArray({
+      });
+      return undefined;
+    }
+
+    /** 主线程裁剪回退逻辑，保持与 Worker 返回结构一致。 */
+  }, {
+    key: "clipTileOnMainThread",
+    value: function clipTileOnMainThread(tileBbox, candidateIndexes, imagery) {
+      var _this4 = this;
+      var clipFeatures = this.getClipFeatures(candidateIndexes);
+      if (!clipFeatures.length) {
+        return {
+          status: 'discarded',
+          reason: 'outside-clip'
+        };
+      }
+      var tileFeature = turf.bboxPolygon(tileBbox);
+      var isWithin = clipFeatures.some(function (feature) {
+        return turf.booleanWithin(tileFeature, feature);
+      });
+      if (isWithin) {
+        return {
+          status: 'kept',
+          reason: 'within-clip'
+        };
+      }
+      var intersections = this.getClipIntersections(tileFeature, clipFeatures);
+      if (!intersections.length) {
+        return {
+          status: 'discarded',
+          reason: 'outside-clip'
+        };
+      }
+      return {
+        status: 'clipped',
+        reason: 'intersects-clip',
+        paths: intersections.flatMap(function (intersection) {
+          return _this4.geometryToPathArray({
             boundPolygon: intersection,
             bbox: tileBbox,
             width: imagery.image.width,
             height: imagery.image.height
           });
-        }));
+        })
+      };
+    }
+  }, {
+    key: "applyClipResult",
+    value: function applyClipResult(context, imagery, tileBbox, result) {
+      var _this5 = this;
+      if (result.status === 'kept') {
         this.logDebug({
-          type: 'tile-clipped',
+          type: 'tile-kept',
           x: imagery.x,
           y: imagery.y,
           level: imagery.level,
           bbox: tileBbox,
-          reason: 'intersects-clip'
+          reason: result.reason
         });
-        void createImageBitmap(canvas).then(function (image) {
-          imagery.image = image;
-          _this2.createTexture(context, imagery);
-        });
-        return undefined;
-      } catch (error) {
+        return this.createTexture(context, imagery);
+      }
+      if (result.status === 'discarded') {
         this.logDebug({
-          type: 'tile-error',
+          type: 'tile-discarded',
           x: imagery.x,
           y: imagery.y,
           level: imagery.level,
           bbox: tileBbox,
-          error: error
+          reason: result.reason
         });
+        imagery.image = this.createTileCanvas(imagery);
         return this.createTexture(context, imagery);
       }
+      var canvas = this.createTileCanvas(imagery);
+      var canvasContext = canvas.getContext('2d');
+      if (!canvasContext) {
+        return this.createTexture(context, imagery);
+      }
+      canvasContext.drawImage(imagery.image, 0, 0, imagery.image.width, imagery.image.height);
+      this.clip(canvasContext, result.paths);
+      this.logDebug({
+        type: 'tile-clipped',
+        x: imagery.x,
+        y: imagery.y,
+        level: imagery.level,
+        bbox: tileBbox,
+        reason: result.reason
+      });
+      if (typeof createImageBitmap !== 'function') {
+        imagery.image = canvas;
+        return this.createTexture(context, imagery);
+      }
+      void createImageBitmap(canvas).then(function (image) {
+        if (_this5._destroyed) {
+          return;
+        }
+        imagery.image = image;
+        _this5.createTexture(context, imagery);
+      }).catch(function (error) {
+        if (_this5._destroyed) {
+          return;
+        }
+        _this5.logDebug({
+          type: 'tile-error',
+          x: imagery.x,
+          y: imagery.y,
+          level: imagery.level,
+          bbox: tileBbox,
+          error: error
+        });
+        imagery.image = canvas;
+        _this5.createTexture(context, imagery);
+      });
+      return undefined;
     }
 
-    /** 调用 Cesium 原始纹理创建逻辑。 */
-  }, {
-    key: "createTexture",
-    value: function createTexture(context, imagery) {
-      return ImageryLayer.prototype._createTexture.call(this, context, imagery);
-    }
-
-    /** 获取当前瓦片与所有裁剪面的交集，用交集路径裁剪当前瓦片。 */
+    /** 获取当前瓦片与候选裁剪面的交集，用交集路径裁剪当前瓦片。 */
   }, {
     key: "getClipIntersections",
-    value: function getClipIntersections(tileFeature) {
+    value: function getClipIntersections(tileFeature, clipFeatures) {
       var intersections = [];
-      this._clipFeatures.forEach(function (feature) {
+      clipFeatures.forEach(function (feature) {
         if (!turf.booleanIntersects(tileFeature, feature)) {
           return;
         }
@@ -709,7 +968,7 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
   }, {
     key: "geometryToPathArray",
     value: function geometryToPathArray(options) {
-      var _this3 = this;
+      var _this6 = this;
       var featureType = options.boundPolygon.geometry.type;
       var pointArr = [];
       if (featureType === 'Polygon') {
@@ -722,7 +981,7 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
         });
       } else if (featureType === 'MultiPolygon') {
         options.boundPolygon.geometry.coordinates.forEach(function (polygon) {
-          _this3.pointToPixel({
+          _this6.pointToPixel({
             pointArr: pointArr,
             coors: polygon,
             bbox: options.bbox,
@@ -756,6 +1015,94 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
       context.fill();
       context.restore();
     }
+  }, {
+    key: "getTileKey",
+    value: function getTileKey(event) {
+      if (event.x === undefined || event.y === undefined || event.level === undefined) {
+        return undefined;
+      }
+      return "".concat(event.level, "/").concat(event.x, "/").concat(event.y);
+    }
+  }, {
+    key: "getDebugStatus",
+    value: function getDebugStatus(event) {
+      if (event.status) {
+        return event.status;
+      }
+      if (event.type === 'tile-loaded') {
+        return 'loaded';
+      }
+      if (event.type === 'tile-kept') {
+        return 'kept';
+      }
+      if (event.type === 'tile-clipped') {
+        return 'clipped';
+      }
+      if (event.type === 'tile-discarded') {
+        return 'filtered';
+      }
+      if (event.type === 'tile-error') {
+        return 'error';
+      }
+      return undefined;
+    }
+  }, {
+    key: "normalizeDebugEvent",
+    value: function normalizeDebugEvent(event) {
+      var status = this.getDebugStatus(event);
+      return _objectSpread(_objectSpread(_objectSpread({}, event), this.getTileKey(event) ? {
+        tileKey: this.getTileKey(event)
+      } : {}), status ? {
+        status: status,
+        loaded: true,
+        clipped: status === 'clipped',
+        filtered: status === 'filtered'
+      } : {});
+    }
+  }, {
+    key: "logBuiltInDebug",
+    value: function logBuiltInDebug(event) {
+      if (event.type === 'range') {
+        console.log('[CustomRasterLayer] 渲染范围/裁剪范围', {
+          renderBounds: event.renderBounds,
+          clipBounds: event.clipBounds,
+          clipFeature: event.clipFeature,
+          tileBounds: event.tileBounds,
+          bounds: event.bounds,
+          dataCrs: event.dataCrs,
+          clipFeatureCrs: event.clipFeatureCrs,
+          renderCrs: event.renderCrs
+        });
+        return;
+      }
+      if (!event.status) {
+        return;
+      }
+      if (event.type === 'tile-loaded' && this._clipFeatures.length) {
+        return;
+      }
+      var style = DEBUG_STATUS_STYLES[event.status];
+      var title = "[CustomRasterLayer] ".concat(style.label);
+      var consoleStyle = "color: ".concat(style.consoleColor, "; font-weight: bold;");
+      var tileInfo = "z=".concat(event.level, " x=").concat(event.x, " y=").concat(event.y);
+      if (event.type === 'tile-error') {
+        console.error("%c".concat(title, " ").concat(tileInfo), consoleStyle, event.error, event);
+        return;
+      }
+      console.log("%c".concat(title, " ").concat(tileInfo), consoleStyle, {
+        tileKey: event.tileKey,
+        z: event.level,
+        x: event.x,
+        y: event.y,
+        loaded: event.loaded,
+        clipped: event.clipped,
+        filtered: event.filtered,
+        status: event.status,
+        reason: event.reason,
+        bbox: event.bbox,
+        imageSize: event.imageSize
+      });
+    }
 
     /** 输出结构化 debug 事件。 */
   }, {
@@ -764,14 +1111,14 @@ var CustomRasterLayer = /*#__PURE__*/function (_ImageryLayer) {
       if (!this._debug) {
         return;
       }
-      var debugEvent = _objectSpread({
+      var debugEvent = this.normalizeDebugEvent(_objectSpread({
         layerId: this.id
-      }, event);
+      }, event));
       if (typeof this._debug === 'function') {
         this._debug(debugEvent);
         return;
       }
-      console.debug('[CustomRasterLayer]', debugEvent);
+      this.logBuiltInDebug(debugEvent);
     }
   }]);
   return CustomRasterLayer;