问题

expImage生成书签视角图片时:
1.如果地图中有threejs加载的模型,生成视角书签后,生成的图片中没有模型
效果图如下:
mars3d中bookmark视角书签,如何生成包含threejs加载模型的图片 - 图1
mars3d中bookmark视角书签,如何生成包含threejs加载模型的图片 - 图2

期望效果

地图上three加载模型时,生成视角书签时,视角图片中也有模型显示

解决方式
参考这个示例,将threejs对应的canves导出png图片后合并下。
http://mars3d.cn/editor.html?id=map/fun/expImage
mars3d中bookmark视角书签,如何生成包含threejs加载模型的图片 - 图3

  1. export function downLoadDiv() {
  2. const mapDom = document.getElementById("mars3dContainer")
  3. const filterNode = document.getElementsByClassName("cesium-viewer-cesiumWidgetContainer")
  4. function filter(node) {
  5. return node !== filterNode[0]
  6. }
  7. map.expImage({ download: false }).then((result) => {
  8. // eslint-disable-next-line no-undef
  9. domtoimage
  10. .toPng(mapDom, { filter: filter })
  11. .then(function (baseUrl) {
  12. mergeImage(result.image, baseUrl, result.width, result.height).then((base64) => {
  13. mars3d.Util.downloadBase64Image("场景出图_含DIV.png", base64) // 下载图片
  14. })
  15. })
  16. .catch(function (error) {
  17. console.error(error)
  18. })
  19. })
  20. }
  21. // 合并2张图片
  22. function mergeImage(base1, base2, width, height) {
  23. return new Promise((resolve, reject) => {
  24. const canvas = document.createElement("canvas")
  25. canvas.width = width
  26. canvas.height = height
  27. const ctx = canvas.getContext("2d")
  28. const image = new Image() // MAP图片
  29. image.crossOrigin = "Anonymous" // 支持跨域图片
  30. image.onload = () => {
  31. ctx.drawImage(image, 0, 0, width, height)
  32. const image2 = new Image() // div图片
  33. image2.crossOrigin = "Anonymous" // 支持跨域图片
  34. image2.onload = () => {
  35. ctx.drawImage(image2, 0, 0, width, height)
  36. // 合并后的图片
  37. const base64 = canvas.toDataURL("image/png")
  38. resolve(base64)
  39. }
  40. image2.src = base2
  41. }
  42. image.src = base1
  43. })
  44. }