vue+高德地图截图导出图片

Posted 2023-05-17

参考技术A 记得设置！！！

WebGLParams:

          preserveDrawingBuffer: true

        ,

<button @click="getIdCarema('container')">点击</button>

// 导出图片

    // base64转流

    dataURLtoBlob(dataurl)

      console.log(444)

      var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]

      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)

      while (n--)

        u8arr[n] = bstr.charCodeAt(n)

     

      return new Blob([u8arr], type: mime )

    ,

    downloadFile(url, name = 'What\'s the fuvk')

      console.log(555)

      var a = document.createElement('a')

      a.setAttribute('href', url)

      a.setAttribute('download', name)

      a.setAttribute('target', '_blank')

      const clickEvent = document.createEvent('MouseEvents')

      clickEvent.initEvent('click', true, true)

      a.dispatchEvent(clickEvent)

    ,

    downloadFileByBase64(base64, name)

      console.log(333)

      var myBlob = this.dataURLtoBlob(base64)

      var myUrl = URL.createObjectURL(myBlob)

      this.downloadFile(myUrl, name)

      // console.log(base64)

    ,

    getIdCarema(id)

      console.log(111)

      var element = document.getElementById(id)

      html2canvas(element,

        backgroundColor: 'transparent',

        logging: false

      ).then(canvas =>

        const context = canvas.getContext('2d')

        // 关闭抗锯齿形

        context.mozImageSmoothingEnabled = false

        context.webkitImageSmoothingEnabled = false

        context.msImageSmoothingEnabled = false

        context.imageSmoothingEnabled = false

        // canvas转化为图片

        this.canvas2Image(canvas, canvas.width, canvas.height, id, '图片')

      )

    ,

    canvas2Image(canvas, width, height, id, val)

      console.log(222, canvas, width, height, id, val) // <canvas width="2312" height="1360" style="width: 1156px; height: 680px;"></canvas> 2312 1360 "container" "图片"

      const retCanvas = document.createElement('canvas')

      const retCtx = retCanvas.getContext('2d')

      console.log('retCanvas', retCanvas)

      retCanvas.width = width

      retCanvas.height = height

      retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height)

      const img = document.createElement('img')

      img.src = retCanvas.toDataURL('image/png') // 可以根据需要更改格式

      // window.sessionStorage.setItem(id, retCanvas.toDataURL('image/png')) // ？

      this.downloadFileByBase64(retCanvas.toDataURL('image/png'), val)

   

vue使用高德地图和mars3d地图如何切换

参考技术A 在vue高德地图加入mars3d组件。
可以在mars3d官网的开发项目菜单进入，然后把它应用到高德地图之中，就可以进行切换了。希望我的回答可以帮助到你。
Mars3D基础项目，包含常用基础地图功能，可在该基础项目上快速开发搭建新项目。方便快速搭建三维地图产品，敏捷开发，可复用，支持各种配置，适合各种场景使用。