Cesium开发入门——Demo02：CreatingEntities创建对象

最新推荐文章于 2024-03-14 20:20:16 发布
最新推荐文章于 2024-03-14 20:20:16 发布
阅读量661 收藏 2
点赞数
分类专栏： 2016-2021 学习随记 文章标签： Cesium入门 创建对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41553157/article/details/90904385
版权
1.创建对象（矩形）代码

以下代码为创建面对向代码与对应运行结果图；

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Creating Entities</title>
		<script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
		<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

	</head>

	<body>
		<div id="cesiumContainer" style="width: 100%; height:600px;"></div>

		<!----------------------------------01第一个实体----------------------------------------------------------------------------------------->

		<script>
			var viewer = new Cesium.Viewer('cesiumContainer');

			var wyoming = viewer.entities.add({
				polygon: {
					hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
					height: 0,
					material: Cesium.Color.RED.withAlpha(0.5),
					outline: true,
					outlineColor: Cesium.Color.BLACK
				}
			});

			viewer.zoomTo(wyoming);
		</script>
	</body>

</html>

运行结果

2.对象材质替换

直接修改JavaScript中代码；
①条纹样式

var viewer = new Cesium.Viewer('cesiumContainer');

						var wyoming = viewer.entities.add({
							polygon: {
								hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
								height: 0,
								outline: true,
								outlineColor: Cesium.Color.BLACK
							}
						});
			
						var ellipse = wyoming.polygon;

			//黑白条纹材质
						ellipse.material = new Cesium.StripeMaterialProperty({
							evenColor: Cesium.Color.WHITE,
							oddColor: Cesium.Color.BLACK,
							repeat: 32
						});

在这里插入图片描述
黑白网格材质

ellipse.material = new Cesium.CheckerboardMaterialProperty({
							evenColor: Cesium.Color.WHITE,
							oddColor: Cesium.Color.BLACK,
							repeat: new Cesium.Cartesian2(4, 4)
						});

黑白网格

3.点、线、面对象创建与属性修改
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Creating Entities</title>
		<script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
		<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

	</head>

	<body>
		<div id="cesiumContainer" style="width: 100%; height:600px;"></div>

		<!----------------------------------01第一个实体----------------------------------------------------------------------------------------->

		<!--<script>
			var viewer = new Cesium.Viewer('cesiumContainer');

			var wyoming = viewer.entities.add({
				polygon: {
					hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
					height: 0,
					material: Cesium.Color.RED.withAlpha(0.5),
					outline: true,
					outlineColor: Cesium.Color.BLACK
				}
			});

			viewer.zoomTo(wyoming);
		</script>-->

		<!----------------------------------02材质替换----------------------------------------------------------------------------------------->

		<script>
			var viewer = new Cesium.Viewer('cesiumContainer');

						var wyoming = viewer.entities.add({
							polygon: {
								hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
								height: 0,
								outline: true,
								outlineColor: Cesium.Color.BLACK
							}
						});
			
						var ellipse = wyoming.polygon;

			//黑白条纹材质
//						ellipse.material = new Cesium.StripeMaterialProperty({
//							evenColor: Cesium.Color.WHITE,
//							oddColor: Cesium.Color.BLACK,
//							repeat: 32
//						});

			//黑白网格材质
//						ellipse.material = new Cesium.CheckerboardMaterialProperty({
//							evenColor: Cesium.Color.WHITE,
//							oddColor: Cesium.Color.BLACK,
//							repeat: new Cesium.Cartesian2(4, 4)
//						});

			//黄色网格材质
			//			ellipse.material = new Cesium.GridMaterialProperty({
			//				color: Cesium.Color.YELLOW,
			//				cellAlpha: 0.2,
			//				lineCount: new Cesium.Cartesian2(8, 8),
			//				lineThickness: new Cesium.Cartesian2(2.0, 2.0)
			//			});
			//
			//			viewer.zoomTo(wyoming);
			
			//高程修改与高度添加
			//			var wyoming = viewer.entities.add({
			//				polygon: {
			//					hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
			//					height: 0,
			//					material: Cesium.Color.RED.withAlpha(0.5),
			//					outline: true,
			//					outlineColor: Cesium.Color.BLACK
			//				}
			//			});
			//
			//			wyoming.polygon.height = 200000;
			//			wyoming.polygon.extrudedHeight = 250000;
			//
			//			viewer.zoomTo(wyoming);

			
			
			//线对象的创建与样式*************************************************************************************************************
			//			var entity = viewer.entities.add({
			//				polyline: {
			//					positions: Cesium.Cartesian3.fromDegreesArray([-77, 35, -78, 35, -78, 36, -79, 36, -79, 37]),
			//					width: 5
			//				}
			//			});
			//			viewer.zoomTo(viewer.entities);
			//
			//			var polyline = entity.polyline // For upcoming examples
			//			polyline.material = new Cesium.PolylineOutlineMaterialProperty({
			//				color: Cesium.Color.ORANGE,
			//				outlineWidth: 3,
			//				outlineColor: Cesium.Color.BLACK
			//			});

			

			//添加标记点************************************************************************************************************
			//			var citizensBankPark = viewer.entities.add({
			//				name: 'Citizens Bank Park',
			//				position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
			//				point: {
			//					pixelSize: 5,
			//					color: Cesium.Color.RED,
			//					outlineColor: Cesium.Color.WHITE,
			//					outlineWidth: 2
			//				},
			//				label: {
			//					text: 'Citizens Bank Park',
			//					font: '14pt monospace',
			//					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
			//					outlineWidth: 2,
			//					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			//					pixelOffset: new Cesium.Cartesian2(0, -9)
			//				}
			//			});
			//
			//			viewer.zoomTo(viewer.entities);
		
		</script>
	</body>

</html>
4.Cesium官网示例学习

Cesium创建对象
该官网中，有一个通过“Hello world example”进入到沙箱（Sandcastle）中，沙箱其实就是相当于一个JavaScript文件，里面是所有的js代码，所有界面实现都是通过js代码实现。
Basic中的代码可以直接复制并运行（如下图中的绿色框中代码），可复制到图二中的沙箱中，Run运行；
在这里插入图片描述
在这里插入图片描述

刘彩虹
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium Entities 贴图
虎康的博客
08-25 369
原文链接：https://blog.csdn.net/weixin_46730573/article/details/115604845。
Cesium学习笔记（二）：添加实体对象
热门推荐
simple_soul的博客
07-04 1万+
1. 首先，你需要选择一款代码编辑器，可以选择eclipse，webstorm，visual studio code这种比较大型的带有代码提示的，你也可以选择sublime，nodepad++，atom这种没有提示的，但是不能使用word这种自带格式的，这样出来的代码其实是有很大问题的。以上这些你都可以自行选择，Cesium官方也给我们提供了一个很好用的东西Sandcastle，它可以很方便的把效果
CesiumJS 沙盒
最新发布
GIS探索之路
03-14 543
通过CesiumJS 沙盒快速测试CesiumJS的一些功能，免去安装开发环境的困恼。
Cesium绘制矩形
yangwq的博客
05-13 7181
取消双击默认选中实体效果：添加的标注本身有默认事件：左键单击选中标注实体，双击镜头会直接跳转到标注地点。如果不想要这种效果，可以取消默认事件。 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); var activeShapePoints = []; var activeShape; var floatingPoint; //查看
【Cesium】创建形状基础---点、线、面、矩形、柱体、连廊、墙等
Wangzx的博客
07-13 3585
【代码】Cesium创建形状基础---点、线、面、矩形、柱体、连廊、墙等。
Cesium教程番外篇--自定义Geometry（一）
weixin_34228387的博客
06-26 859
2019独角兽企业重金招聘Python工程师标准>>> ...
Cesium.HPUZYZ.Demo:该项目是CESIUM的一些演示。 其中许多来自其他人的博客和铯的官方网站（https
05-24
Cesium.HPUZYZ.Demo This project is some demos of CESIUM. Much of them are from other people's blogs and cesium's official website (). Thanks to my good friend MikesWei () for giving me great help. ...
cesium_demos:cesium样例库
05-02
ceisum 使用demo、方法或components总结使用cesium+react+ts编写的cesium使用。启动项目 :alien_monster::alien_monster::alien_monster:yarn安装依赖yarn start启动项目样例内容资源加载加载3dtiles调整3dtiles高度...
Cesium 入门案例 Cesium 入门案例
05-29
Cesium 入门案例 Cesium 入门案例
CESIUM开发基础培训(cesiumlab提供)
05-31
CESIUM开发基础培训(cesiumlab提供)CESIUM开发基础培训(cesiumlab提供)CESIUM开发基础培训(cesiumlab提供)CESIUM开发基础培训(cesiumlab提供)CESIUM开发基础培训(cesiumlab提供)CESIUM开发基础培训(cesiumlab提供)...
cesium 军事标绘 demo
12-28
cesium 军事标绘 demo
cesium总结(一)之实现cesium的自定义创建实体的功能,并封装改变材质
keep hungry keep foolish
05-08 3422
实现cesium的自定义创建实体的功能,并封装改变材质 可以创建点,线,面,圆,矩形 作者直接再cesium的源码基础上进行代码封装,不喜勿喷,组件拿去即用 function Drawing(viewer) { this.viewer = viewer; } //设置实体的材质 var drawGraphicMaterial = { //normal类型 normal: ...
[cesium] 自定义材质(3)
啊嘞嘞的博客
05-22 1423
自定义3d效果: 传送门
cesium学习之路（九）在地图中绘制通道与墙体
m0_63701303的博客
11-17 1013
在地图中绘制通道与墙体
cesium动态绘制圆，矩形，自定义区域
LBY_XK的博客
10-19 5409
自己封装了一个类，可以放在js文件中引入项目，具体使用和代码如下/**cesium实例对象 */ this . viewer = viewer /**绘制要素的相关配置* 默认配置* {borderColor: Cesium.Color.BLUE, 边框颜色borderWidth: 20, 边框宽度material: Cesium.Color.GREEN.withAlpha(0.5),填充材质}* @description: 绘制矩形区域/*** 矩形四点坐标。
Cesium 自定义Primitive - 绘制矩形
地理信息的专栏
03-06 688
根据自定义Primitive的绘制矩形
Cesium 沙盒 sandcastle 开启 显示 development 目录下的 开发模式的 示例
a571574085的博客
06-08 1136
【代码】Cesium 沙盒 sandcastle 开启 显示 development 目录下的 开发模式的 示例。
vite cesium 报错如何解决 SyntaxError: Cannot use import statement outside a module
10-21
vite cesium 报错 SyntaxError: Cannot use import statement outside a module 是因为在浏览器中无法直接使用 ES6 的 import 语法。解决这个问题的方法是使用打包工具将代码打包成浏览器可以识别的代码。可以使用 Rollup 或者 Webpack 等打包工具进行打包。另外，也可以在 HTML 文件中添加 type="module" 属性来告诉浏览器这是一个 ES6 模块。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值