Cesium绘制一个正方体

baker_zhuang

已于 2024-05-23 16:30:03 修改

阅读量196

点赞数

分类专栏： cesium 文章标签： cesium

于 2023-09-04 09:36:37 首次发布

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

版权

cesium 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这节讲在cesium中绘制一个正方体，与threejs类似，在一个场景中添加一个正方体就好了，设置正方体的长宽高和位置，不过绘制的方式和threejs有很大的区别，这里还是用的类似百度echarts的绘制方式，通过json格式的配置文件描述正方体的长宽高和位置，以下是相关源码，可以替换掉token后复制到html文件中测试下：

<!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>
  <div id="credit"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';
    
	//初始化div容器为cesium
	var viewer = new Cesium.Viewer('cesiumContainer');
	//阿仔容器中添加一个正方体，
	var redBox = viewer.entities.add({
	  //正方体的名字
	  name : 'Red box with black outline',
	  //正方体的经纬度坐标
	  position: Cesium.Cartesian3.fromDegrees(-110.0, 39.0, 300000.0),
	  //正方体的长宽高和颜色等
	  box : {
		dimensions : new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
		material : Cesium.Color.RED.withAlpha(0.5),
		outline : true,
		outlineColor : Cesium.Color.BLACK
	  }
	});
	
	//将相机视角调整到适合显示场景中的所有实体的范围
	viewer.zoomTo(viewer.entities);
  </script>
 </div>
</body>
</html>

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

baker_zhuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium绘制一个正方体

这节讲在cesium中绘制一个正方体，与threejs类似，在一个场景中添加一个正方体就好了，设置正方体的长宽高和位置，不过绘制的方式和threejs有很大的区别，这里还是用的类似百度echarts的绘制方式，通过json格式的配置文件描述正方体的长宽高和位置，以下是相关源码，可以替换掉token后复制到html文件中测试...
复制链接

扫一扫