cesium Entities的理解和使用

流氓也是种气质 _Cookie

已于 2024-06-04 16:23:20 修改

阅读量980

点赞数 13

分类专栏： Cesium 文章标签： cesium entities 移除指定id实体

于 2024-06-04 15:43:00 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/139444826

版权

Cesium 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Entities介绍

Cesium Entities是Cesium中的一个重要组件，用于表示和管理在地球上的实体对象，通过设置不同的属性和行为，可以实现丰富多样的地理可视化效果。

Entities可以代表各种地理特征，如点、线、多边形、模型等。每个Entity对象都包含一系列属性，用于描述其外观、位置、姿态、行为等信息。以下是一些常见的Entity属性：

position（位置）：指定Entity在地球上的位置，可以是经纬度或笛卡尔坐标。
orientation（方向）：描述Entity的朝向，可以是方位角、四元数或旋转矩阵。
billboard（广告牌）：用于在Entity的位置上显示图片、文本或其他内容。
polyline（折线）：用于绘制连接多个点的线段，可以设置颜色、宽度、样式等属性。
polygon（多边形）：用于绘制封闭的多边形区域，可以设置颜色、边框、填充等属性。
model（模型）：用于在地球上放置三维模型，可以是COLLADA、glTF等格式的模型文件。

除了这些基本属性外，Entities还支持动画、时间轴、事件处理等功能，可以实现交互式的地理可视化效果。你可以利用Cesium Entities来创建各种应用，如地理信息系统、虚拟旅游、飞行模拟等。

`1.Cesium.Color` 类

在Cesium中，表示蓝色可以使用 Cesium.Color 类的预定义属性或者通过RGB值来创建。以下是表示蓝色的几种方式：

1.使用预定义的颜色属性：

var blueColor = Cesium.Color.BLUE;

2.通过RGB值创建（不透明度默认为1.0）：

var blueColor = new Cesium.Color(0.0, 0.0, 1.0, 1.0);

这里，(0.0, 0.0, 1.0) 分别对应红色、绿色和蓝色通道的值，最后一个 1.0 是不透明度（alpha），范围从0（完全透明）到1（完全不透明）。

在Cesium中使用颜色时，通常会采用Cesium.Color对象来表示，这个对象接受红绿蓝（RGB）以及 alpha（透明度）四个分量，每个分量的取值范围是0到1。如果你有一个特定的颜色值想要转换成Cesium兼容的RGB格式，你可以手动计算或者使用在线工具辅助转换

手动转换:

十六进制颜色 #FFA500 对应的RGB值是 (255, 165, 0)。将这些十进制值转换为0到1的浮点数，得到Cesium.Color需要的格式：

Red: 255 / 255 = 1.0
Green: 165 / 255 ≈ 0.647
Blue: 0 / 255 = 0.0 所以，Cesium中的颜色表示为 new Cesium.Color(1.0, 0.647, 1.0)，透明度默认为1（1完全不透明） 0为透明，如果需要可以添加第四个参数表示透明度

在线工具辅助:颜色值格式转换，RGB/十六进制HEX/HSL格式转换 - 在线工具

你可以使用前面提到的在线颜色转换工具之一来完成这个转换，比如“颜色值格式转换”、“在线颜色值转换-IP地址查询”或“wetools.com微工具”。步骤通常是：

输入十六进制颜色值（如 #FFA500）。
选择转换为RGB格式。
工具会显示转换后的RGB值，然后手动将这些值除以255转换为Cesium所需的范围

还有其他的工具按需取用

3.使用 fromBytes 方法从RGB值创建（每个通道0-255）：

var blueColor = Cesium.Color.fromBytes(0, 0, 255, 255);

这里的 0, 0, 255 分别对应R、G、B的字节值，最后一个 255 是不透明度的字节值。

2.效果图

3.代码示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css"

rel="stylesheet" />

<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>

<script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<div id="cesiumContainer"></div>

<script>

//无token会导致球体无法显示

const mapCreate = async () => {

Cesium.Ion.defaultAccessToken ="your_token";

var viewer = new Cesium.Viewer('cesiumContainer', {

geocoder: false,//控制地图是否显示一个地理编码（geocoding）控件，允许用户搜索地点并定位到特定位置。

homeButton: false, //控制是否显示一个回到初始视图的按钮，允许用户快速返回到地图的初始状态

animation: false, //控制是否显示动画控件，允许用户播放、暂停或者改变时间。

fullscreenButton: false, //控制是否显示全屏按钮，允许用户切换地图进入或退出全屏模式。

sceneModePicker: false, //控制是否显示场景模式选择器，允许用户在 2D、3D 和 CV（Columbus View）模式之间切换

timeline: true, //: 控制是否显示时间轴控件，允许用户在时间上浏览数据。

navigationHelpButton: false, //控制是否显示导航帮助按钮，提供关于如何使用地图导航控件的帮助信息

baseLayerPicker: false, // 控制是否显示基础图层选择器，允许用户选择不同的基础图层（如卫星影像、地图等）。

infoBox: false, //控制是否显示信息框，当用户点击地图上的对象时，会显示与该对象相关的信息。

scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源

selectionIndicator: false,//控制是否显示选择指示器，用于指示当前选择的地图对象。

baselLayerPicker: false, //控制是否显示基础图层选择器，允许用户选择不同的基础图层。

});

const redRectangle = viewer.entities.add({

name: "Red translucent rectangle",

rectangle: {

coordinates: Cesium.Rectangle.fromDegrees(

-110.0,

20.0,

-80.0,

25.0

),

material: Cesium.Color.RED.withAlpha(0.5),

},

});

const greenRectangle = viewer.entities.add({

name:

"Green translucent, rotated, and extruded rectangle at height with outline",

rectangle: {

coordinates: Cesium.Rectangle.fromDegrees(

-110.0,

30.0,

-100.0,

40.0

),

material: Cesium.Color.GREEN.withAlpha(0.5),

rotation: Cesium.Math.toRadians(45),

extrudedHeight: 300000.0,

height: 100000.0,

outline: true, // height must be set for outline to display

outlineColor: Cesium.Color.BLACK,

},

});

let rotation = Cesium.Math.toRadians(30);

function getRotationValue() {

rotation += 0.005;

return rotation;

}

viewer.entities.add({

name: "Rotating rectangle with rotating texture coordinate",

rectangle: {

coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),

material: "/Cesium_Logo_Color.jpg",

rotation: new Cesium.CallbackProperty(getRotationValue, false),

stRotation: new Cesium.CallbackProperty(getRotationValue, false),

classificationType: Cesium.ClassificationType.TERRAIN,

},

});

// 点位实体

var pointEntity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-92.0, 30.0, 40.0),
point : {
pixelSize : 5,
color : Cesium.Color.RED
}
});

viewer.zoomTo(viewer.entities);

}

mapCreate()

</script>

</body>

</html>

4.移除实体

viewer.entities.remove(pointEntity); // 移除实体

viewer.entities.removeAll(); // 移除所有实体

移除指定id的实体：

let list = [
                [109.162018, 30.556107],

                [109.153273, 30.554881],

                [109.150425, 30.561759],

                [109.139546, 30.57109],

                [109.14245, 30.574852],

                [109.152813, 30.57898]
            ]
            list.forEach((item, index) => {
                let layerId = null, color = null;

                if (index <= 2) {
                    layerId = "myEntityId" + index // 这里定义实体的ID
                    color = Cesium.Color.RED
                } else {
                    layerId = "customId" + index
                    color = new Cesium.Color(0.0, 0.0, 1.0, 1.0)
                }
                myEntity = new Cesium.Entity({

                    id: layerId,
                    position: Cesium.Cartesian3.fromDegrees(item[0], item[1]), // 位置
                    point: { // 点实体的样式
                        pixelSize: 10,
                        color: color,
                        outlineColor: Cesium.Color.WHITE,
                        outlineWidth: 2
                    }
                });
                viewer.entities.add(myEntity);
            });


            viewer.zoomTo(viewer.entities);

            // 要移除的ID部分
            var idToMatch = "myEntityId";

            // 创建一个临时的实体集合用于存储要移除的实体
            var entitiesToRemove = new Cesium.EntityCollection();

            // 遍历现有的实体集合
            viewer.entities.values.forEach(function (entity) {
                // 检查实体ID是否包含特定字符串
                if (entity.id && entity.id.includes(idToMatch)) {
                    // 添加到待移除的实体集合中
                    entitiesToRemove.add(entity);
                }
            });

            // 从原始实体集合中移除这些实体
            entitiesToRemove.values.forEach(function (entity) {
                viewer.entities.remove(entity);
            });

流氓也是种气质 _Cookie

关注

13
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
cesium Entities的理解和使用

Cesium Entities是Cesium中的一个重要组件，用于表示和管理在地球上的实体对象，通过设置不同的属性和行为，可以实现丰富多样的地理可视化效果。Entities可以代表各种地理特征，如点、线、多边形、模型等。每个Entity对象都包含一系列属性，用于描述其外观、位置、姿态、行为等信息。以下是一些常见的Entity属性：position（位置）：指定Entity在地球上的位置，可以是经纬度或笛卡尔坐标。orientation（方向）：描述Entity的朝向，可以是方位角、四元数或旋转矩阵。
复制链接

扫一扫