问题
expImage生成书签视角图片时:
1.如果地图中有threejs加载的模型,生成视角书签后,生成的图片中没有模型
效果图如下:
期望效果
地图上three加载模型时,生成视角书签时,视角图片中也有模型显示
解决方式
参考这个示例,将threejs对应的canves导出png图片后合并下。
http://mars3d.cn/editor.html?id=map/fun/expImage
export function downLoadDiv() {
const mapDom = document.getElementById("mars3dContainer")
const filterNode = document.getElementsByClassName("cesium-viewer-cesiumWidgetContainer")
function filter(node) {
return node !== filterNode[0]
}
map.expImage({ download: false }).then((result) => {
// eslint-disable-next-line no-undef
domtoimage
.toPng(mapDom, { filter: filter })
.then(function (baseUrl) {
mergeImage(result.image, baseUrl, result.width, result.height).then((base64) => {
mars3d.Util.downloadBase64Image("场景出图_含DIV.png", base64) // 下载图片
})
})
.catch(function (error) {
console.error(error)
})
})
}
// 合并2张图片
function mergeImage(base1, base2, width, height) {
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas")
canvas.width = width
canvas.height = height
const ctx = canvas.getContext("2d")
const image = new Image() // MAP图片
image.crossOrigin = "Anonymous" // 支持跨域图片
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height)
const image2 = new Image() // div图片
image2.crossOrigin = "Anonymous" // 支持跨域图片
image2.onload = () => {
ctx.drawImage(image2, 0, 0, width, height)
// 合并后的图片
const base64 = canvas.toDataURL("image/png")
resolve(base64)
}
image2.src = base2
}
image.src = base1
})
}