这节讲用cesium在地球上绘制一个透明的光圈，常用于标识一片区域等。具体步骤是现在场景中放置一个圆形的几何体，设置圆形几何体的中心点在地球上的经纬度和半径。然后创建几何体实例，引入圆形，并设置颜色，最后设置一些几何体的属性，并加载到场景中，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNDgzZGEyYy0yZmFkLTQ3ZGItOWU2My1jZjRkN2ZhNTU0OTAiLCJpZCI6MTYyODM0LCJpYXQiOjE2OTMxMjA4MTB9.xHUQdfmqpl3Iei6Iur_AOYeg2jyDiXZsaYBg33KU_zg';
// 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，这里不传ID传DO .
const viewer = new Cesium.Viewer('cesiumContainer',{});
//绘制一个圆，center是中心点经纬度，radius是半径，vertexFormat是顶点格式
var circleGeometry = new Cesium.CircleGeometry({
center: Cesium.Cartesian3.fromDegrees(118.763232, 32.061707),
radius: 5000,
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});
//创建几何体实例，并将上面的圆添加进去，然后设置颜色
var circleInstance = new Cesium.GeometryInstance({
geometry: circleGeometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 0.0, 0.5))
}
});
//设置透明和封闭属性
var circlePrimitive = new Cesium.Primitive({
geometryInstances: [circleInstance],
appearance: new Cesium.PerInstanceColorAppearance({
translucent: true,
closed: true
})
});
viewer.scene.primitives.add(circlePrimitive);
//飞入效果，其他章节有讲到
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(118.763232, 32.061707, 40000),
orientation : {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
}
});
</script>
</div>
</body>
</html>
效果图
以上如有问题可以在评论区留言
