cesium 场景出图

cesium 导出为图片

cesium 场景出图的代码很简单，但是有一个坑，导出的图片就是黑色背景其他任何元素都没有，一开始以为是编码有问题。viewer.render() //不加会出现导出是一张黑乎乎的图片，

<template>
	<div class="printout">
		<div class="title" @click="saveFile">场景出图</div>
	</div>
</template>

<script>
import { viewer } from '@/map/useFunc'

export default {
	setup() {
		const dataURLtoBlob = dataurl => {
			// dataurl   图片base64编码
			// filename  图片名
			debugger
			let arr = dataurl.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n)
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n)
			}
			return new Blob([u8arr], { type: mime })
		}
		const saveFile = () => {
			viewer.render() //不加会出现导出是一张黑乎乎的图片
			let canvas = viewer.scene.canvas
			let image = canvas
				.toDataURL('image/png')
				.replace('image/png', 'image/octet-stream')
			let link = document.createElement('a')
			let blob = dataURLtoBlob(image)
			let objurl = URL.createObjectURL(blob)
			link.download = 'scene.png'
			link.href = objurl
			link.click()
		}
		return {
			dataURLtoBlob,
			saveFile,
		}
	},
}
</script>

<style lang="scss" scoped>
.printout {
	position: absolute;
	width: 1rem;
	height: 0.46rem;
	left: 16%;
	margin-left: -3rem;
	background: rgba(10, 30, 55, 0.8);
	top: 57.5%;
	text-align: center;
	border-radius: 8px;
	.title {
		font-family: Alibaba PuHuiTi;
		font-style: normal;
		font-weight: normal;
		font-size: 16px;
		line-height: 46px;
	}
}
</style>

添加viewer.render()后可进行场景出图