问题
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-undefdomtoimage.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 = widthcanvas.height = heightconst 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})}
