Cesium绘制透明光圈

baker_zhuang

已于 2024-05-22 14:17:36 修改

阅读量342

点赞数

分类专栏： cesium 文章标签：前端 Cesium

于 2023-09-12 09:22:18 首次发布

本文链接：https://blog.csdn.net/qq_26881073/article/details/132972258

版权

cesium 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这节讲用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>

效果图以上如有问题可以在评论区留言

baker_zhuang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium绘制透明光圈

这节讲用cesium在地球上绘制一个透明的光圈，常用于标识一片区域等。具体步骤是现在场景中放置一个圆形的几何体，设置圆形几何体的中心点在地球上的经纬度和半径。然后创建几何体实例，引入圆形，并设置颜色，最后设置一些几何体的属性，并加载到场景中，代码如下：<!DOCTYPE html><html lang...
复制链接

扫一扫