【GIS小案例】加载Canvas绘制的圆

程序员不丑009

已于 2024-03-08 15:35:27 修改

阅读量489

点赞数

分类专栏： GIS小案例文章标签： Cesium Canvas 图标

于 2022-09-28 15:52:40 首次发布

本文链接：https://blog.csdn.net/u013517229/article/details/127090475

版权

GIS小案例专栏收录该内容

5 篇文章 4 订阅

订阅专栏

效果图：

代码：

<script>
	function onload(Cesium) {
		let viewer = new Cesium.Viewer('cesiumContainer');
		let circleImage = drawCircle("1000", "rgba(255, 193, 37,0.5)");
		let entity = viewer.entities.add({
			position: Cesium.Cartesian3.fromDegrees(120.9272518350473, 41.37647789152760),
			billboard: {
				image: circleImage.toDataURL(),
				width: 60,
				height: 60,
				heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
				horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // //相对于对象的原点（注意是原点的位置）的水平位置
				verticalOrigin: Cesium.VerticalOrigin.BOTTOM //相对于对象的原点的垂直位置，BOTTOM时锚点在下，对象在上
			},
		});
		viewer.flyTo(entity);
	}

	if (typeof Cesium !== 'undefined') {
		window.startupCalled = true;
		onload(Cesium);
	}

	function drawCircle(fontText, circleColor) {
		let pixelRadius = 50;
		let canvasWidth = pixelRadius * 2;
		let canvasHeight = pixelRadius * 2;
		let circleCanvas = document.createElement('canvas');
		circleCanvas.width = canvasWidth;
		circleCanvas.height = canvasHeight;
		let circleCtx;
		circleCtx = circleCanvas.getContext('2d');
		// 绘制圆
		circleCtx.arc(pixelRadius, pixelRadius, pixelRadius, 0, Math.PI * 2, true);
		// circleCtx.fillStyle = "rgba(255, 193, 37,0.5)";
		circleCtx.fillStyle = circleColor;
		circleCtx.fill();
		circleCtx.beginPath();
		// 设置字体
		circleCtx.font = "normal bold 22px Arial";
		// 设置字体颜色
		circleCtx.fillStyle = "blue"
		circleCtx.textAlign = "center"
		// 添加文字和位置
		circleCtx.fillText(fontText, pixelRadius, pixelRadius + 5);
		circleCtx.fill();
		return circleCanvas;
	}
</script>