Cesium绘制点、矩形、立方体教程

Cesium绘制点、矩形、立方体教程

引用

CSDN

1.

https://m.blog.csdn.net/m0_72030584/article/details/143146686

效果

知识讲解

实体：entity

• id：主键，如果没设置，值默认为GUID
• name：名称，标识实体
• availability：可用性
• show：可见性
• description：描述
• position：位置
• orientation：方向
• viewFrom：查看此对象的初始偏移量
• parent：父节点
• properties：与此实体关联的任意属性
• Graphics：相关的形状

用于建筑物、塔楼或自然景观的可视化

• box：立方体

• dimensions：立方体的长、宽、高

• material：立方体的表面颜色或纹理

• corridor：走廊

• positions：走廊的路径点

• width：走廊的宽度

• cylinder：圆柱

• length：圆柱体的高度

• topRadius：圆柱的顶面半径

• bottomRadius：圆柱的底面半径

• ellipse：椭圆

• semiMajorAxis：椭圆的长轴

• semiMinorAxis：椭圆的短轴

• rotation：椭圆的旋转角度

• ellipsoid：椭球

• radii：椭球的半径（x、y、z 方向的长度）

• path：路径

• positions：路径点

• point：点

• pixelSize：点的大小（以像素为单位）

• color：点的颜色

用于显示区域或路径，例如国界、河流

• polygon：多边形

• hierarchy：多边形的顶点

• material：多边形的颜色或纹理

• polyline：折线

• positions：折线的点

• width：折线的宽度

• polylineVolur：折线体

• shape：横截面形状

• positions：路径点

• rectangle：矩形

• coordinates：矩形的经纬度边界

• material：矩形的颜色或纹理

• wall：墙

• positions：墙的底部位置点

• minimumHeights：墙的底部高度

• maximumHeights：墙的顶部高度

用于在地图上标注重要位置或展示信息

• billboard：广告牌

• image：广告牌显示的图像

• scale：图像缩放比例

• label：标签

• text：显示的文本

• font：字体样式

用于将更复杂的 3D 模型如建筑、车辆或其他对象导入场景中进行展示

• model：模型
• uri：3D 模型文件的路径
• scale：模型的缩放比例

创建立方体实体

const redbox = viewer.entities.add({
  name: 'xx',
  position: Cesium.Cartesian3.fromDegrees(经度，纬度，高度),
  box: {
    dimensions: new Cesium.Cartesian3(长, 宽, 高), // 立方体尺寸
    material: Cesium.Color.RED, // 立方体填充颜色
    outline: true, // 是否显示边框
    outlineColor: Cesium.Color.BLACK // 边框颜色
  }
});

矩形

viewer.entities.add({
  rectangle: {
    outline: true, // 指定是否为矩形绘制轮廓线
    outlineColor: Cesium.Color.BLACK, // 矩形轮廓线的颜色
    material: Cesium.Color.BLUE.withAlpha(0.5), // 矩形的填充颜色
    coordinates: Cesium.Rectangle.fromDegrees(西经, 南纬, 东经, 北纬) // 矩形实体的关键属性
  }
});

创建实体

const redbox = viewer.entities.add({
  // 实体配置项
});

修改实体属性

redbox.box.dimensions = new Cesium.Cartesian3(60.0, 40.0, 70.0);
redbox.box.material = Cesium.Color.BLUE;

添加事件监听

redbox.click = function(entity) {
  console.log('立方体被点击');
};

应用代码

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(0.1, 0.1, 1000000),
  point: {
    pixelSize: 12,
    color: Cesium.Color.RED
  }
});

// 添加一个立方体
const redbox = viewer.entities.add({
  name: "Red box with black outline",
  position: Cesium.Cartesian3.fromDegrees(116.397, 39.917, 0),
  box: {
    dimensions: new Cesium.Cartesian3(40.0, 30.0, 50.0), // 立方体尺寸
    material: Cesium.Color.RED.withAlpha(0.5), // 立方体颜色
    outline: true, // 是否显示边框
    outlineColor: Cesium.Color.BLACK // 边框颜色
  }
});
viewer.zoomTo(redbox);

// 创建矩形实体并设置 coordinates 属性等相关参数属性
var rectangles = [
  {
    coordinates: Cesium.Rectangle.fromDegrees(116.297, 39.817, 116.497, 40.017),
    material: Cesium.Color.BLUE.withAlpha(0.5), // 蓝色，50%透明
    height: 0, // 高度为0，贴地绘制
    outline: true,
    outlineColor: Cesium.Color.BLACK
  },
  {
    coordinates: Cesium.Rectangle.fromDegrees(116.297, 39.817, 116.497, 40.017),
    material: Cesium.Color.RED.withAlpha(0.5), // 红色，50%透明
    height: 1000, // 提升到一定高度，悬浮在第一个矩形上
    outline: true,
    outlineColor: Cesium.Color.BLACK
  }
];

// 快速创建多个矩形实体
rectangles.forEach(function(rectangleData) {
  viewer.entities.add({
    rectangle: rectangleData
  });
});

// 自动调整视角以适应矩形范围
viewer.zoomTo(viewer.entities);