gis-common 5.1.31 → 5.1.32

package/dist/gis-common.es.js

@@ -547,129 +547,6 @@ const ObjectUtil = {
     }
   }
 };
-const ImageUtil = {
-  emptyImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
-  transparentImageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==",
-  createCircle(radius, options = {}) {
-    const lineWidth = options.lineWidth || 1;
-    const canvas = CanvasDrawer.createCanvas(2 * radius, 2 * radius);
-    const ctx = canvas.getContext("2d");
-    ctx.beginPath();
-    ctx.fillStyle = options.fillColor || "#f00";
-    ctx.strokeStyle = options.color || "#f00";
-    ctx.lineWidth = lineWidth;
-    ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
-    ctx.stroke();
-    ctx.fill();
-    return canvas.toDataURL("image/png");
-  },
-  createRectangle(width, height, options = {}) {
-    const lineWidth = options.lineWidth || 1;
-    const canvas = CanvasDrawer.createCanvas(width, height);
-    const ctx = canvas.getContext("2d");
-    ctx.fillStyle = options.fillColor || "#f00";
-    ctx.strokeStyle = options.color || "#f00";
-    ctx.lineWidth = lineWidth;
-    ctx.beginPath();
-    ctx.stroke();
-    ctx.fillRect(0, 0, width, height);
-    return canvas.toDataURL("image/png");
-  },
-  /**
-   *
-   * @param image image，类型可以是HTMLCanvasElement、ImageData、Image
-   * @returns
-   */
-  getBase64(image) {
-    let _canvas;
-    let canvas;
-    if (image instanceof HTMLCanvasElement) {
-      canvas = image;
-    } else {
-      if (_canvas === void 0) _canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
-      _canvas.width = image.width;
-      _canvas.height = image.height;
-      const ctx = _canvas.getContext("2d");
-      if (image instanceof ImageData) {
-        ctx.putImageData(image, 0, 0);
-      } else if (image instanceof Image) {
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-      }
-      canvas = _canvas;
-    }
-    if (canvas.width > 2048 || canvas.height > 2048) {
-      console.warn("ImageUtil.getDataURL: Image converted to jpg for performance reasons", image);
-      return canvas.toDataURL("image/jpeg", 0.6);
-    } else {
-      return canvas.toDataURL("image/png");
-    }
-  },
-  /**
-   * 将图片的URL转换为Base64编码
-   *
-   * @param url 图片的URL地址
-   * @param width 图片的宽度，默认为图片原始宽度
-   * @param height 图片的高度，默认为图片原始高度
-   * @returns 返回Promise对象，解析后得到包含Base64编码数据的对象
-   */
-  getBase64FromUrl(url) {
-    return new Promise((resolve, reject) => {
-      let image = new Image();
-      image.setAttribute("crossOrigin", "Anonymous");
-      image.src = url;
-      image.onload = () => {
-        let dataURL = this.getBase64(image);
-        resolve(dataURL);
-      };
-      image.onerror = reject;
-    });
-  },
-  /**
-   * 解析base64编码
-   *
-   * @param base64 base64编码字符串
-   * @returns 返回一个对象，包含type（类型）、ext（扩展名）和data（数据）字段，如果解析失败则返回null
-   */
-  parseBase64(base64) {
-    let re = new RegExp("data:(?<type>.*?);base64,(?<data>.*)");
-    let res = re.exec(base64);
-    if (res && res.groups) {
-      return {
-        type: res.groups.type,
-        ext: res.groups.type.split("/").slice(-1)[0],
-        data: res.groups.data
-      };
-    }
-    ExceptionUtil.throwException("parseBase64: Invalid base64 string");
-  },
-  /**
-   * 复制图片到剪贴板
-   *
-   * @param url 图片的URL地址
-   * @returns 无返回值
-   * @throws 如果解析base64数据失败，则抛出异常
-   */
-  async copyImage(url) {
-    try {
-      const base64Result = await this.getBase64FromUrl(url);
-      const parsedBase64 = this.parseBase64(base64Result);
-      if (!parsedBase64) {
-        throw new Error("Failed to parse base64 data.");
-      }
-      let type = parsedBase64.type;
-      let bytes = atob(parsedBase64.data);
-      let ab = new ArrayBuffer(bytes.length);
-      let ua = new Uint8Array(ab);
-      for (let i = 0; i < bytes.length; i++) {
-        ua[i] = bytes.charCodeAt(i);
-      }
-      let blob = new Blob([ab], { type });
-      await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
-    } catch (error) {
-      ExceptionUtil.throwException("Failed to copy image to clipboard:");
-    }
-  }
-};
 const AjaxUtil = {
   /**
    * Get JSON data by jsonp
@@ -862,28 +739,6 @@ const AjaxUtil = {
     options["responseType"] = "arraybuffer";
     return this.get(url, options, cb);
   },
-  getImage(img, url, options) {
-    return this.getArrayBuffer(url, options, (err, imgData) => {
-      if (err) {
-        if (img.onerror) {
-          img.onerror(err);
-        }
-      } else if (imgData) {
-        const URL2 = window.URL || window.webkitURL;
-        const onload = img.onload;
-        img.onload = () => {
-          if (onload) {
-            onload();
-          }
-          URL2.revokeObjectURL(img.src);
-        };
-        const blob = new Blob([new Uint8Array(imgData.data)], { type: imgData.contentType });
-        img.cacheControl = imgData.cacheControl;
-        img.expires = imgData.expires;
-        img.src = imgData.data.byteLength ? URL2.createObjectURL(blob) : ImageUtil.emptyImageUrl;
-      }
-    });
-  },
   /**
    * Fetch resource as a JSON Object.
    * @param {String} url          - json's url
@@ -2405,6 +2260,140 @@ __publicField(GeoUtil, "toRadian", Math.PI / 180);
 __publicField(GeoUtil, "R", 6371393);
 // 地球平均半径
 __publicField(GeoUtil, "R_EQU", 6378137);
+const ImageUtil = {
+  emptyImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+  transparentImageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==",
+  createCircle(radius, options = {}) {
+    const lineWidth = options.lineWidth || 1;
+    const canvas = CanvasDrawer.createCanvas(2 * radius, 2 * radius);
+    const ctx = canvas.getContext("2d");
+    ctx.beginPath();
+    ctx.fillStyle = options.fillColor || "#f00";
+    ctx.strokeStyle = options.color || "#f00";
+    ctx.lineWidth = lineWidth;
+    ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
+    ctx.stroke();
+    ctx.fill();
+    return canvas.toDataURL("image/png");
+  },
+  createRectangle(width, height, options = {}) {
+    const lineWidth = options.lineWidth || 1;
+    const canvas = CanvasDrawer.createCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = options.fillColor || "#f00";
+    ctx.strokeStyle = options.color || "#f00";
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.stroke();
+    ctx.fillRect(0, 0, width, height);
+    return canvas.toDataURL("image/png");
+  },
+  /**
+   *
+   * @param image image，类型可以是HTMLCanvasElement、ImageData、Image
+   * @returns
+   */
+  getBase64(image) {
+    let _canvas;
+    let canvas;
+    if (image instanceof HTMLCanvasElement) {
+      canvas = image;
+    } else {
+      if (_canvas === void 0) _canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+      _canvas.width = image.width;
+      _canvas.height = image.height;
+      const ctx = _canvas.getContext("2d");
+      if (image instanceof ImageData) {
+        ctx.putImageData(image, 0, 0);
+      } else if (image instanceof Image) {
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+      }
+      canvas = _canvas;
+    }
+    if (canvas.width > 2048 || canvas.height > 2048) {
+      console.warn("ImageUtil.getDataURL: Image converted to jpg for performance reasons", image);
+      return canvas.toDataURL("image/jpeg", 0.6);
+    } else {
+      return canvas.toDataURL("image/png");
+    }
+  },
+  /**
+   * 将图片的URL转换为Base64编码
+   *
+   * @param url 图片的URL地址
+   * @param width 图片的宽度，默认为图片原始宽度
+   * @param height 图片的高度，默认为图片原始高度
+   * @returns 返回Promise对象，解析后得到包含Base64编码数据的对象
+   */
+  getBase64FromUrl(url) {
+    return new Promise((resolve, reject) => {
+      let image = new Image();
+      image.setAttribute("crossOrigin", "Anonymous");
+      image.src = url;
+      image.onload = () => {
+        let dataURL = this.getBase64(image);
+        resolve(dataURL);
+      };
+      image.onerror = reject;
+    });
+  },
+  /**
+   * 解析base64编码
+   *
+   * @param base64 base64编码字符串
+   * @returns 返回一个对象，包含type（类型）、ext（扩展名）和data（数据）字段，如果解析失败则返回null
+   */
+  parseBase64(base64) {
+    let re = new RegExp("data:(?<type>.*?);base64,(?<data>.*)");
+    let res = re.exec(base64);
+    if (res && res.groups) {
+      return {
+        type: res.groups.type,
+        ext: res.groups.type.split("/").slice(-1)[0],
+        data: res.groups.data
+      };
+    }
+    ExceptionUtil.throwException("parseBase64: Invalid base64 string");
+  },
+  /**
+   * 复制图片到剪贴板
+   *
+   * @param url 图片的URL地址
+   * @returns 无返回值
+   * @throws 如果解析base64数据失败，则抛出异常
+   */
+  async copyImage(url) {
+    try {
+      const base64Result = await this.getBase64FromUrl(url);
+      const parsedBase64 = this.parseBase64(base64Result);
+      if (!parsedBase64) {
+        throw new Error("Failed to parse base64 data.");
+      }
+      let type = parsedBase64.type;
+      let bytes = atob(parsedBase64.data);
+      let ab = new ArrayBuffer(bytes.length);
+      let ua = new Uint8Array(ab);
+      for (let i = 0; i < bytes.length; i++) {
+        ua[i] = bytes.charCodeAt(i);
+      }
+      let blob = new Blob([ab], { type });
+      await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
+    } catch (error) {
+      ExceptionUtil.throwException("Failed to copy image to clipboard:");
+    }
+  },
+  readImage(url) {
+    return new Promise((resolve, reject) => {
+      let image = new Image();
+      image.setAttribute("crossOrigin", "Anonymous");
+      image.src = url;
+      image.onload = () => {
+        resolve(image);
+      };
+      image.onerror = reject;
+    });
+  }
+};
 const FileUtil = {
   /**
    * 将Base64编码的字符串转换为Blob对象
@@ -3365,13 +3354,13 @@ class Color {
 class CanvasDrawer {
   constructor(el) {
     __publicField(this, "ctx");
-    if (typeof el === "string") {
+    if (el && typeof el === "string") {
       el = document.querySelector("#" + el);
       if (!el) {
         throw new Error("Element not found");
       }
     }
-    if (el instanceof HTMLElement) {
+    if (el instanceof HTMLCanvasElement) {
       const canvas = el;
       if (canvas.getContext) {
         this.ctx = canvas.getContext("2d");
@@ -3379,7 +3368,15 @@ class CanvasDrawer {
         throw new Error("getContext is not available on this element");
       }
     } else {
-      throw new Error("Element is not an HTMLElement");
+      const canvas = document.createElement("canvas");
+      canvas.style.cssText = "position: absolute; display: block; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999;";
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      document.body.appendChild(canvas);
+      this.ctx = canvas.getContext("2d");
+      if (!this.ctx) {
+        throw new Error("getContext is not available on this element");
+      }
     }
   }
   /**
@@ -3426,17 +3423,16 @@ class CanvasDrawer {
       this.ctx.stroke();
     }
   }
-  drawImage({ x, y }, src) {
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      const width = img.width;
-      const height = img.height;
-      if (!this.ctx) {
-        throw new Error("Canvas context is null");
-      }
-      this.ctx.drawImage(img, x, y, -width / 2, -height / 2);
-    };
+  drawImage({ x, y }, image, angleDeg, color) {
+    const width = image.width;
+    const height = image.height;
+    this.ctx.translate(x, y);
+    if (angleDeg) {
+      const angleRad = angleDeg * Math.PI / 180;
+      this.ctx.rotate(angleRad);
+    }
+    this.ctx.drawImage(image, -width / 2, -height / 2, width, height);
+    this.ctx.restore();
   }
   drawText({ x, y }, text, options) {
     this.ctx.font = options.font || "10px sans-serif";
@@ -3448,11 +3444,9 @@ class CanvasDrawer {
     const canvas = document.createElement("canvas");
     if (width) {
       canvas.width = width;
-      canvas.style.width = width + "px";
     }
     if (height) {
       canvas.height = height;
-      canvas.style.height = height + "px";
     }
     return canvas;
   }