5.Cesium中的Entity(实体)和各种图形

my陈

已于 2022-12-22 11:40:05 修改

阅读量3.1k

点赞数

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

于 2022-12-22 11:38:48 首次发布

本文链接：https://blog.csdn.net/weixin_44552168/article/details/128404572

版权

Cesium 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

什么是Entity

Entity实例是将多种形式的可视化聚合到单个高级对象中，它们可以手动创建并添加到Viewer.entities 中，也可以由数据源(如CzmlDataSource和GeoJsonDataSource)生成。

Entity能做什么

通过cesium的new Cesium.Entity()可以定义各种各样的实体对象，提供比如cylinder(圆柱)、polygon(多边形)、box(盒子)、polyline(折线) 等

Entity的成员

官方文档

如何创建Entity并添加到场景中

此处以box图形为例

创建场景

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

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Entity</title>
    <style>
        @import url(../Build_1.100/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="credit"></div>
    <div id="cesiumContainer"></div>
    <script src="../Build_1.100/Cesium/Cesium.js"></script>
    <script>
        //1.声明观察者|创建场景
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //位置查找工具
            geocoder: false,
            //视角返回初始位置
            homeButton: false,
            //模式选择 3D 2D 哥伦布视图
            sceneModePicker: false,
            //图层选择器，选择显示的图层和地形服务
            baseLayerPicker: false,
            //导航按钮
            navigationHelpButton: false,
            //动画空间，控制视图动画播放速度
            animation: false,
            // 版权显示
            creditContainer: "credit",
            //时间轴控件
            timeline: false,
            // 全屏按钮
            fullscreenButton: false,
            // vr模式按钮
            vrButton: false,
        });
    </script>
</body>

</html>

创建Entity

//2.声明实体
let redBoxEntity = new Cesium.Entity({
    //此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //指定实体位置的属性
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    //实体关联的盒属性
    box: {
        //盒子的长宽高
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        //盒子的材质
        material: Cesium.Color.RED.withAlpha(0.5),
        //盒子边框线
        outline: false,
        //盒子边框线颜色
        outlineColor: Cesium.Color.BLACK
    }
})

将Entity添加到场景中

//3.将实体添加到viewer.entities中 entities中：获取未绑定到特定数据源的实体的集合
var redBox = viewer.entities.add(redBoxEntity);
//也可以省略new Entity 直接绑定 如果id已经存在那么将会触发修改事件
viewer.entities.add({
    //此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //指定实体位置的属性
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    //实体关联的盒属性
    box: {
        //盒子的长宽高
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        //盒子的材质
        material: Cesium.Color.RED.withAlpha(0.5),
        //盒子边框线
        outline: false,
        //盒子边框线颜色
        outlineColor: Cesium.Color.BLACK
    }
    //实体的简介 可以是字符串或html
    description: "这是个非常红的块块"
})
//重新定义redBoxEntity的简介
redBox.description = `<h1>这是个红块块</h1>`

其他的图形

广告牌

//2.声明实体
let redBoxEntity = new Cesium.Entity({
    //此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //指定实体位置的属性
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    //实体关联的广告牌属性
    billboard: {
        image: '../img/头像 (1).jpg',
        width: 64,
        height: 64
    }
})

//2.声明实体
let redBoxEntity = new Cesium.Entity({
    //此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //指定实体位置的属性
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    //实体关联的标签属性
    label: {
        text: '我是个标签',
        font: '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9)
    }
})

模型

//2.声明实体
let redBoxEntity = new Cesium.Entity({
    //此对象的唯一标识符。如果未提供，则会生成 GUID。
    id: "1",
    //向用户显示的人类可读名称。它不必是唯一的。
    name: "",
    //指定实体位置的属性
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    //实体关联的模型属性
    model: {
        uri: '../model/UFO_Empty.glb'
    }
})

模型链接

链接：https://pan.baidu.com/s/1ZzEbGVfrem0d3-JqHaF3xg?pwd=81fr
提取码：81fr

实体的查询与删除

查询

//在entities实体集合中查询id为1的实体
var entity = viewer.entities.getById('1');

实体存在就会返回实体信息，反之为空

删除

//方法一，先查后删
var entity = viewer.entities.getById('1');
viewer.entities.remove(entity) 
//方法二，直接删除
viewer.entities.removeById('1')
//方法三，删除所有
viewer.entities.removeAll()

监听修改和删除Entity

//1.定义监听执行响应函数
function onChanged(collection, added, removed, changed) {
    debugger
    let msg = ""
    //collection是当前的entities
    console.log(collection);
    //添加的元素
    console.log(added);
    if (added.length > 0) {
        msg += "我添加了：【"
        for (let index = 0; index < added.length; index++) {
            const element = added[index];
            msg += added.length - index > 1 ? element._id + "," : element._id

        }
        msg += "】"
    } else if (removed.length > 0) {
        msg += "我删除了：【"
        for (let index = 0; index < added.length; index++) {
            const element = added[index];
            msg += added.length - index > 1 ? element._id + "," : element._id

        }
        msg += "】"

    } else {
        msg += "我修改了：【"
        for (let index = 0; index < added.length; index++) {
            const element = added[index];
            msg += added.length - index > 1 ? element._id + "," : element._id

        }
        msg += "】"
    }
    console.log(msg);
}
//2.将代码函数添加到collectionChanged中 
//collectionChanged：获取从集合中添加或删除实体时触发的事件。
viewer.entities.collectionChanged.addEventListener(onChanged);