您现在的位置是:网站首页>CesiumCesium

Cesium当前地图截屏(截图)功能实现

左鹏08-17 14:09:10Cesium316人已围观

简介一、在实现截屏代码之前,需要在地球初始化options里面配置以下代码 需要在options里加上contextOptions.webgl.preserveDrawingBuffer = true;否则下载的图片会空白一片 var viewer = new Cesium.Viewer("cesiumViewer", { imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: "https://web

一、在实现截屏代码之前,需要在地球初始化options里面配置以下代码

需要在options里加上contextOptions.webgl.preserveDrawingBuffer = true;否则下载的图片会空白一片

var viewer = new Cesium.Viewer("cesiumViewer", {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
	  url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
	  minimumLevel: 3,
	  maximumLevel: 18
	}),
  baseLayerPicker: false,
  //问号图标,导航帮助按钮,显示默认的地图控制帮助
  navigationHelpButton: false,
  animation: false, //动画器件,显示当前时间,允许跳转特定时间
  timeline: false, //时间轴
  //全屏图标,全屏按钮
  fullscreenButton: false,
  //阴影
  shadows: true,
  //展示数据版权属性
  CreditsDisplay: false,
  //terrainExaggeration: 3.0, //地形夸大
  shouldAnimate: true,
  contextOptions: {
	webgl: {
		alpha: true,
		depth: true,
		stencil: true,
		antialias: true,
		premultipliedAlpha: true,
		preserveDrawingBuffer: true,//通过canvas.toDataURL()实现截图需要将该项设置为true
		failIfMajorPerformanceCaveat: true
	}
  }
});

二、下载代码实现

function screenshot(){
	var canvas = viewer.scene.canvas;
	var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

	var link = document.createElement("a");
	var blob = dataURLtoBlob(image);
	var objurl = URL.createObjectURL(blob);
	link.download = "截图.png";
	link.href = objurl;
	link.click();

	function  dataURLtoBlob(dataurl) {
		var 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});
	}
}

文章评论

    请先说点什么
    热门评论
    0人参与,0条评论
    正在载入评论列表...

    站点信息

    • 建站时间:2018-09-18
    • 网站程序:Spring Boot
    • 主题模板:《今夕何夕》
    • 文章统计:104条
    • 微信公众号:扫描二维码,关注我们
    登陆您的账户