mapbox导出图片并下载

    // 下载地图图片
    downLoad() {
      let base64 = this.getMyMap().getCanvas().toDataURL('image/png')
      let date = new Date();

      let aLink = document.createElement("a"); // 创建一个a标签
      let blob = this.base64ToBlob(base64);
      let event = document.createEvent("HTMLEvents");
      event.initEvent("click", true, true);
      aLink.download = date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uint8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; i++) {
          uint8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uint8Array], {type: contentType});
    },

文中this.getMyMap()是对应的地图对象,调用toDataURL的方法,获取到了base64格式的图片信息,在通过后面的方法  可以直接在浏览器  下载下来。

posted @ 2023-02-23 13:41  黑白棋学弟  阅读(416)  评论(0编辑  收藏  举报