Cesium 绘制不同的形状（Entity）

最新推荐文章于 2024-04-24 16:48:06 发布
最新推荐文章于 2024-04-24 16:48:06 发布
阅读量4.5k 收藏 30
点赞数 1
文章标签： javascript 3d 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014328243/article/details/124813720
版权

Cesium里面绘图最常用的就是 entity，而Cesium也提供了不同类型的entity,这里就介绍一下在Cesium中如何绘制这些entity。
1 billboard，广告牌

/**
* 添加entity-billboard
* 广告牌，也就是一张图片、图标数据。
* **/
addEntityBillboard() {
	let entityBillBoard = new Cesium.Entity({
		id: 'EntityBillboard0',
		name: 'EntityBillboard',
		show: true,
		description: '广告牌招租13390133157',
		position: new Cesium.Cartesian3.fromDegrees(116.0, 39.9, 100),
		billboard: {
			image: 'static/image/ziranzaihai.png',
			show: true,
			sacle: 1000.01,
			color: Cesium.Color.YELLOWGREEN,
			width: 100,
			height: 100
		}
	})
	let billboadrGeom = window.viewer.entities.add(entityBillBoard)
	window.viewer.zoomTo(entityBillBoard)
}

在这里插入图片描述

2 Box，立方体

/**
  * 添加entity-box
  * 立方体实体。
  * 可以根据不同的材质进行设置box的外观。
* **/
addEntityBox() {
   var heading = Cesium.Math.toRadians(90.0)
   var pitch = 0.0
   var roll = 0.0
   var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
   var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr)
	 let entityBox = new Cesium.Entity({
        id: 'entityBox0',
        name: 'entityBox',
        position: Cesium.Cartesian3.fromDegrees(111.0, 41.0),
        orientation: orientation,
        box: {
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            dimensions: new Cesium.Cartesian3(100000, 100000, 100000),
            material: new Cesium.ImageMaterialProperty({
                image: 'static/image/entityBillboard.ico',
                color: Cesium.Color.YELLOWGREEN,
                repeat: new Cesium.Cartesian2(16, 16),
                transparent: true
            }),
            outline: true,
            fill: true,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 100
        }
    })

    let boxGeom = window.viewer.entities.add(entityBox)
    window.viewer.flyTo(entityBox, {
        duration: 3,
        maximumHeight: 1000,
        offset: Cesium.HeadingPitchRange(1, 1, 1)
    })
}

在这里插入图片描述

3 corridor，走廊通道

/**
 * 添加entity-corridor
 * 走廊通道实体，可以拉伸高度
 * **/
addEntityCorridor() {
    let entityCorridor = new Cesium.Entity({
        id: 'entityCorridor0',
        name: 'entityCorridor0',
        position: Cesium.Cartesian3.fromDegrees(123.0, 43.0),
        corridor: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                123.0, 40.0, 122.0, 40.0, 123.0, 42.0, 121.0, 42.0
            ]),
            width: 10000,
            material: new Cesium.ImageMaterialProperty({
								//可以设置贴图
                // image: 'static/image/corridor.png',
                color: Cesium.Color.YELLOWGREEN,
                repeat: new Cesium.Cartesian2(32, 32)
                // transparent: true
            }),
            extrudedHeight: 10000,
            outline: false
        }
    })
    let corridorGeom = window.viewer.entities.add(entityCorridor)
    window.viewer.zoomTo(entityCorridor)
},

在这里插入图片描述

4 Cylinder 圆柱体

/**
* 添加entity-cylinder
* 圆柱实体
* **/
addEntityCylinder() {
    let entityCylinder = new Cesium.Entity({
        id: 'entityCylinder0',
        name: 'entityCylinder',
        position: Cesium.Cartesian3.fromDegrees(116.0, 40.0, 50000),
        cylinder: {
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            topRadius: 10000,
            bottomRadius: 10000,
            length: 20000,
            material: new Cesium.ImageMaterialProperty({
                // image: 'static/image/corridor.png',
                color: Cesium.Color.fromCssColorString('#FFD700'),
                transparent: false
            })
        }
    })
    let cylinderGeom = window.viewer.entities.add(entityCylinder)
    window.viewer.zoomTo(entityCylinder)
}

在这里插入图片描述

5 Ellipse 椭圆

/**
* 添加entity-ellipse
* 椭圆实体,面状，可以拉伸成体
* **/
addEntityEllipse() {
    let entityEllipse = new Cesium.Entity({
        id: 'entityEllipse0',
        name: 'entityEllipse',
        position: Cesium.Cartesian3.fromDegrees(123.0, 45.0),
        ellipse: {
            semiMajorAxis: 100000,
            semiMinorAxis: 60000,
            material: Cesium.Color.fromRandom().withAlpha(1),
						//拉伸
            extrudedHeight: 100000,
            heightReference: Cesium.HeightReference.CLAMP_TO_EDGE,
            rotation: 0.9,
            shadows: Cesium.ShadowMode.ENABLED
        }
    })
    let ellipseCeom = window.viewer.entities.add(entityEllipse)
    window.viewer.zoomTo(entityEllipse)
}

在这里插入图片描述

6 ellipsoid 椭球体

/**
 * 添加entity-ellipsoid
 * 椭球实体
 * **/
addEntityEllipsoid() {
    this.trackedEntity = new Cesium.Entity({
        id: 'EntityEllipsoid0',
        name: 'EntityEllipsoid',
        position: Cesium.Cartesian3.fromDegrees(111, 35, 100),
        ellipsoid: {
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            radii: new Cesium.Cartesian3(30000, 50000, 30000),
            material: Cesium.Color.fromRandom().withAlpha(1),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    })
    let ellipsoidGeom = window.viewer.entities.add(this.trackedEntity)
    window.viewer.zoomTo(this.trackedEntity)
},

在这里插入图片描述

7 Label 标签文本

/**
* 添加entity-label
* 标签， 可以根据缩放的程度控制标签大小或者显示与隐藏
* **/
addEntityLabel() {
    let entityLabel = new Cesium.Entity({
        id: 'entityLabel0',
        name: 'entityLabel',
        position: Cesium.Cartesian3.fromDegrees(123.5, 45.5, 1000),
        label: {
            text: '臣本布衣，躬耕于陇亩',
            fillColor: Cesium.Color.YELLOWGREEN,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: true,
            backgroundColor: Cesium.Color(255, 255, 0),
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
            translucencyByDistance: new Cesium.NearFarScalar(
                1.5e2,
                1.0,
                1.5e8,
                0.0
            ),
            verticalOrigin: Cesium.VerticalOrigin.LEFT
        }
    })
    let labelsGeom = window.viewer.entities.add(entityLabel)
    window.viewer.zoomTo(entityLabel)
},

在这里插入图片描述

8 Plane 平面实体

/**
* 添加entity-plane
* 平面实体, 没有厚度
* **/
addEntityPlane() {
    let entityPlane = new Cesium.Entity({
        id: 'entityPlane0',
        name: 'entityPlane',
        position: Cesium.Cartesian3.fromDegrees(123.6, 45.8),
        plane: {
            plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
            dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
            material: Cesium.Color.BLUE
        }
    })
    let planeGeom = window.viewer.entities.add(entityPlane)
    window.viewer.zoomTo(planeGeom)
},

在这里插入图片描述

9 Point 点实体

/**
* 添加entity-point
* 点实体
* **/
addEntityPoint() {
    let entityPoint = new Cesium.Entity({
        id: 'entityPoint0',
        name: 'entityPoint',
        position: Cesium.Cartesian3.fromDegrees(125.2, 40.5),
        point: {
            color: Cesium.Color.YELLOWGREEN,
            pixelSize: 40,
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.1),
            translucencyByDistance: new Cesium.NearFarScalar(
                1.5e2,
                1.0,
                1.5e8,
                0.0
            )
        }
    })
    let pointGeom = window.viewer.entities.add(entityPoint)
    window.viewer.zoomTo(pointGeom)
}

在这里插入图片描述

10 polygon 多边形面实体

/**
* 添加 entity-polygon
* 面实体, 可以在面中挖空
* **/
addEntityPolygon() {
    let entityPolygon = new Cesium.Entity({
        id: 'entityPolygon0',
        name: 'entityPolygon',
        polygon: {
            hierarchy: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    125.0, 47.0, 126.3, 47.3, 127.5, 43.6, 124.8, 40.3, 123.0, 45.0
                ]),
                holes: [
                    {
                        positions: Cesium.Cartesian3.fromDegreesArray([
                            125.0, 46.0, 125.5, 46.5, 126.0, 44.0, 124.0, 45.0
                        ])
                    }
                ]
            },
            material: Cesium.Color.YELLOWGREEN,
            extrudedHeight: 100000
            // closeTop: false,
            // closeBottom: false,
        }
    })
    let polygonGeom = window.viewer.entities.add(entityPolygon)
    window.viewer.zoomTo(entityPolygon)
},

在这里插入图片描述

11 Polyline 线实体

/**
* 添加 entity-polyline
* 线实体， 可以绘制箭头线
* **/
addEntityPolyline() {
    let lontitude = 0
    let latitude = 0
    let nNum = 1
    let isConstant = false
    let entityPolyline = new Cesium.Entity({
        id: 'entityPolyline0',
        name: 'entityPolyline',
        polyline: {
            positions: new Cesium.CallbackProperty(function (time, result) {
                nNum += 0.4
                lontitude = 86 + (nNum - 1) * 0.0333333333
                latitude = 42 + (nNum - 1) * -0.0021212121
                if (lontitude < 119) {
                    return Cesium.Cartesian3.fromDegreesArray([
                        86.0,
                        42.0,
                        lontitude,
                        latitude
                    ])
                } else {
                    return Cesium.Cartesian3.fromDegreesArray([
                        86.0, 42.0, 119.0, 39.9
                    ])
                }
            }, isConstant),
            material: new Cesium.PolylineArrowMaterialProperty(
                Cesium.Color.YELLOWGREEN
            ),
            followSurface: true,
            width: 20
        }
    })
    let polygonGeom = window.viewer.entities.add(entityPolyline)
    window.viewer.zoomTo(entityPolyline)
},

在这里插入图片描述

12 polylineVolm 管线实体

/**
* 添加 entity-polylineVolm
* 类似管装线实体
* **/
addEntityPloylineVolum() {
    let entityPolylineVolum = new Cesium.Entity({
        id: 'EntityPloylineVolum',
        name: 'addEntityPloylineVolum',
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                120.0, 40.0, 120.0, 45.0, 125.0, 45.0
            ]),
            shape: [
                new Cesium.Cartesian2(-10000, 0),
                new Cesium.Cartesian2(10000, 0),
                new Cesium.Cartesian2(20000, 17340),
                new Cesium.Cartesian2(0, 37340),
                new Cesium.Cartesian2(-20000, 17340)
            ],
            material: Cesium.Color.YELLOWGREEN,
            fill: true,
            outline: true,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 10
        }
    })
    let polylineVolume = window.viewer.entities.add(entityPolylineVolum)
    window.viewer.zoomTo(polylineVolume)
}

在这里插入图片描述

13 rectangle 矩形实体

/**
* 添加entity-rectangle
* 添加矩形实体
* **/
addEntityRectangle() {
    let entityRectangle = new Cesium.Entity({
        id: 'entityRectangle0',
        name: 'entityRectangle',
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(120.0, 40, 125, 45), // west, south, east, north
            // material: Cesium.Color.PURPLE.withAlpha(0.6),
            material: 'static/image/hzw.png'
            // outline: true, // height must be set for outline to display
            // outlineColor: Cesium.Color.RED,
            // extrudedHeight: 10000,
        }
    })
    let rectangleGeom = window.viewer.entities.add(entityRectangle)
    window.viewer.zoomTo(rectangleGeom)
},

在这里插入图片描述

14 wall 墙实体

/**
* 添加 entity-wall
* 添加墙实体
* **/
addEntityWall() {
    let entityWall = new Cesium.Entity({
        id: 'enttiyWall0',
        name: 'entityWall',
        wall: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                123.0, 40.0, 100000, 123.5, 40.5, 12012, 124.0, 41.0, 210000, 124.5,
                41.5, 220000, 125.0, 42.0, 52136
            ]),
            material: new Cesium.ImageMaterialProperty({
                image: 'static/image/corridor.png',
                repeat: new Cesium.Cartesian2(32, 32)
            })
        }
    })
    let wallGeom = window.viewer.entities.add(entityWall)
    window.viewer.zoomTo(entityWall)
}

在这里插入图片描述

走马看黄花
关注
  • 1
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
cesium绘制工具
03-26
本篇将详细讲解如何使用Cesium来实现动态绘制点、线和面的功能，以及如何通过`drawManager`来管理这些绘制操作。 首先，我们要理解Cesium的核心概念——`Entity`。在Cesium中，`Entity`是场景中的基本元素，可以是...
cesium聚合entity时label聚合不了的问题
隔壁家的小屁孩
01-29 1797
cesium聚合entity时label聚合不了的问题 entity聚合代码 **let enabled = true; ///是否聚合 let pixelRange = 15; //聚合范围（单位px） let minimumClusterSize = 3; //最小聚合数值（小于等于该数值，不聚合） let myDataSource = new Cesium.CustomDataSource("myDataSource"); //实例化实体级对象（实现，可用于手动管理一组实体） let obj = cr
【Cesium入门教程】第三课：Cesium 实体(Entity)与数据源(DataSources)
最新发布
GIS前端嘉欣的博客
04-24 1165
本教程详细介绍了Cesium中的实体和数据源的概念、创建、加载和删除方法。实体和数据源是Cesium中进行地理数据可视化的基础，它们为创建动态和交互式地图提供了强大的工具。理解这些概念对于开发复杂的Cesium应用十分重要。在后续教程中，我们将探讨更多高级特性，如图元(Primitive)绘制、交互事件处理以及粒子系统的使用。本系列教程持续更新，不想错过的同学请关注我！
cesium绘制抛物线
bielifor的博客
08-23 464
使用cesium绘制抛物线
cesium中Entity的CylinderGraphics添加圆柱体
tjx1997的博客
10-26 537
cesium可以利用CylinderGraphics类将创建的圆柱体添加到地球中。
Cesium学习五：使用entity绘制cylinder
小何又沐风的博客
09-27 2841
使用Cesium的entity来绘制圆柱等柱体
Cesium 材质Fabric（一）
weixin_45611944的博客
07-29 2990
Cesium Material（材质） 一、种类（18种） ColorType ImageType DiffuseMapType AlphaMapType SpecularMapType EmissionMapType BumpMapType NormalMapType GridType StripeType CheckerboardType DotType WaterType RimLightingType FadeType PolylineArrowType PolylineGlowType Poly
Cesium 拾取entity / 获取entity属性
qq_17627195的博客
01-12 2993
判断为 false 的情况下，就代表没有获取到点，用来区分是否点击到 entity 也是很好用的。获取到entity以后，怎么操作就自己写啦。方法，我有一片文章，专门介绍了常用的方法。
Cesium 追踪模型或entity 动态修改观看视角
热门推荐
资深三维GIS开发
04-16 1万+
先晒一下效果： 先说下大致实现的情形： 现从后台获取json数据，拿到gps坐标数组，里面包含时间和经纬度高度，展示模型的运行轨迹，并且在展示的同时可以动态修改观看的视角； 以下是cesium中trackEntity时的视角设定： 调用viewFrom方法； 在entity这个类下，自己可以去看一下，这里的设定只是在追踪entity的时候初始视角，下面的是动态修改视角； 现说下...
cesium entity导出kml文件
12-01
可以将point lable entity导出文件
Cesium动态绘制面，线，点.vue
09-17
c
Cesium 动态Polyline绘制
01-20
Cesium 用Entity绘制polyline，如果使用CallbackProperty方法进行动态绘制，depthFailMaterial属性将失效。 从官方github上的issue找了替代的方法。 动态Primitive线的绘制 // 绘制方法 this._...
cesium.zip
03-02
在雷达跟踪飞机动画的实现中，开发者可能使用了Cesium的`Entity`类来表示雷达和飞机，每个`Entity`都有自己的位置、速度等属性，并可以随着时间的推移进行动态更新。`DataSource`和`Viewer`对象则用于管理这些实体和...
Cesium笔记 获取实体位置并转化为经纬度坐标
qq_40216244的博客
08-18 1767
Cesium 获取实体经纬度位置
Cesium 材质相关
m0_38004751的博客
04-03 1434
cesium开发，材质设置，材质相关。
【Cesium学习笔记】entity实体构建
weixin_53880641的博客
01-10 1045
前面加载token#创建一个地球#添加实体#具体的一些操作，定义实体具体形状})#将相机固定在实体位置处。
cesium实现手动绘制点，线，面
weixin_55223296的博客
09-26 2295
【代码】cesium实现手动绘制点，线，面。
cesium绘制实时绘制多边形并编辑多边形
weixin_57538359的博客
12-28 1663
2.理清需要那些功能,在这里我们用到了cesium得画点,画线,画面,以及对鼠标得左键,右键,和移动得监听。3.接下来就开始创作了,其中还有一些细节,大家自行体会,完整代码如下,当然还有一些缺陷或者bug,请大家指正,我会改进。1.创建cesium (省略.....)前言:基于cesium实现画多边形以及对其编辑。也作为在工作当中的积累,展示在这里.如有不好的地方,欢迎指正.
cesium用entity绘制圆
04-04
在Cesium中，我们可以使用Entity对象来绘制圆。 首先，我们需要创建一个Entity对象。然后，我们可以使用“ellipse”属性来定义圆的形状和样式。以下是一个基本的示例： ```javascript var viewer = new Cesium....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值