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 @   黑白棋学弟  阅读(466)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示