SuperMap iClient3D for WebGL教程-使用Canvas制作Billboard

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.youkuaiyun.com/supermapsupport/article/details/103694193

Billboard中文一般叫做布告板或者广告牌，用来展示目标对象的相关信息，从API文档中我们可以知道，Billboard支持传入Image，URL和Canvas，使用Canvas制作Billboard的理由如下：

（1）能够利用Canvas强大的绘图能力，绘制出更加美观，炫酷的信息框。

（2）Billboard对象能够支持随图移动，随图缩放，通过距离控制可见性，从而Canvas绘制的信息框也具备了这些特性，比起传统html制作的信息框，更适用于大部分项目的需求。

（3）在Canvas中绘制图片+文本，可以保证图片和文本的相对位置不变，更适合展示需要图文结合的信息。

一.Canvas绘制图片和文本

小编是在PS中制作好了背景图片，然后在Canvas中绘制出制作好的图片和目标文字即可，绘制方法如下：

function drawCanvas(img,text,fontsize,tx,ty){   //img是图片对象，text是文本字符串，fontsize是字体大小，tx，ty则是绘制文本的位置
         var canvas = document.createElement('canvas');      //创建canvas标签
         var ctx = canvas.getContext('2d');   
 
         ctx.fillStyle = '#99f';
         ctx.font = fontsize + "px Arial";
 
         canvas.width = 280;      
         canvas.height = 235; 
 
         ctx.drawImage(img, 0,0,280,235);    //绘制图片
 
         ctx.fillStyle = '#fff';
         ctx.font = fontsize + "px Calibri,sans-serif";
         ctx.shadowOffsetX = 1;    //阴影往左边偏，横向位移量
         ctx.shadowOffsetY = 0;   //阴影往左边偏，纵向位移量
         //ctx.shadowColor = "#fff"; //阴影颜色
         ctx.shadowBlur = 1; //阴影的模糊范围
         ctx.fillText(text, tx, ty);  //绘制文本
         return canvas;
     }

二.Canvas传入Billboard中展示信息

利用上面绘制Canvas的方法绘制出目标Canvas，然后传入Billboard中展示信息，并设置Billboard随图缩放，通过距离控制可见性的特性，代码如下：

var img=document.createElement("img"); //用制作好的图片创建img对象
img.src="属性查询.png";
var canvas= drawCanvas(img,"徐汇区税务局一所",28,30,90);//调用绘制Canvas的方法
var entity=viewer.entities.add({
	position : Cesium.Cartesian3.fromDegrees(121.42799064,31.19380636,50),
	billboard :{
		image : canvas,
		scaleByDistance:new Cesium.NearFarScalar(1000, 1, 100000,0.1),//设置随图缩放距离和比例
		distanceDisplayCondition:new Cesium.DistanceDisplayCondition(50, 100000)//设置可见距离
	}
});

三.效果展示如下：

近处效果：
在这里插入图片描述

远处效果：

在这里插入图片描述
四.完整代码，放到WebGL产品包范例目录的范例中即可运行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>CBD</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="./js/config.js"></script>
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<img style="visibility: hidden;" src='./属性查询.png'/>
<script type="text/javascript">
/*示范代码说明：
 *选取一个点作为中心点，并以此做旋转
 *
 *主要涉及接口：
     * camera.flyCircle
     * camera.flyCircleLoop
     * camera.stopFlyCircle
     * 示范代码：
   */
function onload(Cesium) {
    viewer = new Cesium.Viewer('cesiumContainer');
	viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
	    url : 'https://dev.virtualearth.net',
	    mapStyle : Cesium.BingMapsStyle.AERIAL,
	    key : URL_CONFIG.BING_MAP_KEY
	}));
    var scene = viewer.scene;
	viewer.scene.globe.depthTestAgainstTerrain =false;
    var widget = viewer.cesiumWidget;
    try{
		

			var img=document.createElement("img"); //用制作好的图片创建img对象
			img.src="属性查询.png";
			var canvas= drawCanvas(img,"徐汇区税务局一所",28,30,90);//调用绘制Canvas的方法
			var entity=viewer.entities.add({
				position : Cesium.Cartesian3.fromDegrees(121.42799064,31.19380636,50),
				billboard :{
					image : canvas,
					scaleByDistance:new Cesium.NearFarScalar(1000, 1, 100000,0.1),//设置随图缩放距离和比例
					distanceDisplayCondition:new Cesium.DistanceDisplayCondition(50, 100000)//设置可见距离
				}
			});
			var canvas1= drawCanvas(img,"黄浦区税务局一所",28,30,90);
			var entity1=viewer.entities.add({
				position : Cesium.Cartesian3.fromDegrees(121.47516187,31.20711084,50),
				billboard :{
					image : canvas1,
					scaleByDistance:new Cesium.NearFarScalar(1000, 1, 100000,0.1),
					distanceDisplayCondition:new Cesium.DistanceDisplayCondition(50, 100000)
				}
			});
			var canvas2= drawCanvas(img,"三分局办税厅",28,60,90);
			var entity2=viewer.entities.add({
				position : Cesium.Cartesian3.fromDegrees(121.50272729,31.21522238,50),
				billboard :{
					image : canvas2,
					scaleByDistance:new Cesium.NearFarScalar(1000, 1, 100000,0.1),
					distanceDisplayCondition:new Cesium.DistanceDisplayCondition(50, 100000)
				}
			});
			viewer.flyTo(entity);

    }
    catch(e){
        if (widget._showRenderLoopErrors) {
            var title = '渲染时发生错误，已停止渲染。';
            widget.showErrorPanel(title, undefined, e);
        }
    }

} 
 function drawCanvas(img,text,fontsize,tx,ty){
         var canvas = document.createElement('canvas');      //创建canvas标签
         var ctx = canvas.getContext('2d');
 
         ctx.fillStyle = '#99f';
         ctx.font = fontsize + "px Arial";
 
         canvas.width = 280;      
         canvas.height = 235; 
 
         ctx.drawImage(img, 0,0,280,235);
 
         ctx.fillStyle = '#fff';
         ctx.font = fontsize + "px Calibri,sans-serif";
         ctx.shadowOffsetX = 1;    //阴影往左边偏，横向位移量
         ctx.shadowOffsetY = 0;   //阴影往左边偏，纵向位移量
         //ctx.shadowColor = "#fff"; //阴影颜色
         ctx.shadowBlur = 1; //阴影的模糊范围
         ctx.fillText(text, tx, ty);
         return canvas;
     }		 		 
</script>
</body>
</html>