【Cesium】绘制线、面、体

已于 2023-12-26 11:30:48 修改
阅读量2.1k 收藏 8
点赞数 1
文章标签： 前端 javascript 开发语言
于 2023-10-21 15:43:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35093027/article/details/133941352
版权

文章目录

墙

在这里插入图片描述

entities.add({
  wall: {
    id:"wall",
    positions: Cesium.Cartesian3.fromDegreesArray([
      -95.0,
      50.0,
      -85.0,
      50.0,
      -75.0,
      50.0,
    ]),
    maximumHeights: [500000, 1000000, 500000],
    minimumHeights: [0, 500000, 0],
    outline: true,
    outlineColor: Cesium.Color.LIGHTGRAY,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});

矩形

在这里插入图片描述


entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(45),
    material: stripeMaterial,
  },
});

长方体

在这里插入图片描述

entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -118.0,
      38.0,
      -116.0,
      40.0
    ),
    extrudedHeight: 500000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

不规则图形

在这里插入图片描述

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -107.0,
        27.0,
        -107.0,
        22.0,
        -102.0,
        23.0,
        -97.0,
        21.0,
        -97.0,
        25.0,
      ])
    ),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: stripeMaterial,
  },
});

椭圆

在这里插入图片描述


entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.0, 25.0),
  ellipse: {
    semiMinorAxis: 300000.0,
    semiMajorAxis: 500000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(22),
    material: stripeMaterial,
  },
});

椭圆柱

在这里插入图片描述

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0),
  ellipse: {
    semiMinorAxis: 100000.0,
    semiMajorAxis: 200000.0,
    height: 100000.0,
    extrudedHeight: 200000.0,
    rotation: Cesium.Math.toRadians(90.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

正圆

在这里插入图片描述

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 250000.0,
    rotation: Cesium.Math.toRadians(-40.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    stRotation: Cesium.Math.toRadians(90),
    material: stripeMaterial,
  },
});

圆柱

在这里插入图片描述


entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    length: 200000.0,
    topRadius: 150000.0,
    bottomRadius: 150000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

圆锥

在这里插入图片描述

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
  cylinder: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    length: 400000.0,
    topRadius: 0.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

不规则多边形柱

在这里插入图片描述

entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -118.0,
        30.0,
        -115.0,
        30.0,
        -117.1,
        31.1,
        -118.0,
        33.0,
      ])
    ),
    // 离地高度
    height: 300000.0,
    extrudedHeight: 700000.0,
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

一串糖葫芦？

在这里插入图片描述

for (i = 0; i < 5; ++i) {
  height = 100000.0 + 200000.0 * i;
  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
    box: {
      dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
    ellipsoid: {
      radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}

带洞的矩形

在这里插入图片描述


entities.add({
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -109.0,
        30.0,
        -95.0,
        30.0,
        -95.0,
        40.0,
        -109.0,
        40.0,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -107.0,
            31.0,
            -107.0,
            39.0,
            -97.0,
            39.0,
            -97.0,
            31.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -105.0,
                33.0,
                -99.0,
                33.0,
                -99.0,
                37.0,
                -105.0,
                37.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -103.0,
                    34.0,
                    -101.0,
                    34.0,
                    -101.0,
                    36.0,
                    -103.0,
                    36.0,
                  ]),
                },
              ],
            },
          ],
        },
      ],
    },
    material: stripeMaterial,
  },
});

一系列矩形、圆形

在这里插入图片描述

for (i = 0; i < 5; ++i) {
  height = 200000.0 * i;

  entities.add({
    position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
    ellipse: {
      semiMinorAxis: 200000.0,
      semiMajorAxis: 200000.0,
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });

  entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        -67.0,
        27.0,
        -63.0,
        32.0
      ),
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}

贴地的线

在这里插入图片描述


positions = [];
for (i = 0; i < 40; ++i) {
  positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}
entities.add({
  polyline: {
    positions: positions,
    width: 10.0,
    material: new Cesium.PolylineGlowMaterialProperty({
      color: Cesium.Color.DEEPSKYBLUE,
      glowPower: 0.25,
    }),
  },
});

围墙

在这里插入图片描述

entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0,
      43.0,
      100000.0,
      -87.5,
      45.0,
      100000.0,
      -85.0,
      43.0,
      100000.0,
      -87.5,
      41.0,
      100000.0,
      -90.0,
      43.0,
      100000.0,
    ]),
    material: new Cesium.CheckerboardMaterialProperty({
      repeat: new Cesium.Cartesian2(20.0, 6.0),
    }),
  },
});

宽线

在这里插入图片描述

entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -125.0,
      50.0,
      -125.0,
      55.0,
    ]),
    width: 100000,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

宽线的体

在这里插入图片描述

entities.add({
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -125.0,
      50.0,
      -125.0,
      55.0,
    ]),
    width: 100000,
    height: 300000,
    extrudedHeight: 400000,
    material: Cesium.Color.fromRandom({ alpha: 0.7 }),
  },
});

复杂线状体

在这里插入图片描述

function starPositions(arms, rOuter, rInner) {
  const angle = Math.PI / arms;
  const pos = [];
  for (let i = 0; i < 2 * arms; i++) {
    const r = i % 2 === 0 ? rOuter : rInner;
    const p = new Cesium.Cartesian2(
      Math.cos(i * angle) * r,
      Math.sin(i * angle) * r
    );
    pos.push(p);
  }
  return pos;
}

entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -102.0,
      15.0,
      100000.0,
      -105.0,
      20.0,
      200000.0,
      -110.0,
      20.0,
      100000.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 1,
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

entities.add({
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -102.0,
      15.0,
      -105.0,
      20.0,
      -110.0,
      20.0,
    ]),
    shape: starPositions(7, 30000.0, 20000.0),
    material: Cesium.Color.fromRandom({ alpha: 1.0 }),
  },
});

一根水管

在这里插入图片描述

function computeCircle(radius) {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
  }
  return positions;
}

entities.add({
// http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iPortal/webgl/docs/Documentation/PolylineVolumeGraphics.html?classFilter=polylineVolume
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -104.0,
      13.0,
      -107.0,
      18.0,
      -112.0,
      18.0,
    ]),
    shape: computeCircle(40000.0),
    material: Cesium.Color.WHITE,
  },
});
老靳的WebGIS
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cesium动态绘制面，线，点.vue
09-17
c
【Cesium学习笔记】三、画点、画线、画多边形
jg10000119的博客
04-11 736
对Cesium画点、画线、画多边形、组合图形
cesium绘制、编辑线
最新发布
梦寻汝的博客
06-03 252
Vue使用cesium绘制线，编辑线
cesium实现手动绘制点，线，面
weixin_55223296的博客
09-26 2436
【代码】cesium实现手动绘制点，线，面。
【Cesium】创建形状基础---点、线、面、矩形、柱体、连廊、墙等
Wangzx的博客
07-13 4163
【代码】Cesium创建形状基础---点、线、面、矩形、柱体、连廊、墙等。
cesium绘制抛物线
bielifor的博客
08-23 496
使用cesium绘制抛物线
【超图+CESIUM】【基础API使用示例】20、超图｜CESIUM - 标绘线段：Cesium.DrawHandler绘制线段Cesium.DrawMode.Line
汪同学丶的博客
02-28 1052
超图｜CESIUM - 标绘：Cesium.DrawHandler绘制点位Cesium.DrawMode.Line
cesium 绘制点贴地
herogui的专栏
04-02 4755
Cesium 绘制缓冲区 点 线 面缓冲区
04-10
本主题将深入探讨如何使用Cesium绘制点、线和面的缓冲区，这在构建复杂的三维地理信息系统（GIS）应用时尤其有用。通过理解和运用这些技术，开发者能够高效地展示大量数据并提升用户体验。 首先，让我们理解“缓冲...
cesium绘制工具
05-05
8. **样式与属性**: Cesium绘制工具允许用户自定义点、线、面的颜色、大小、透明度等视觉属性，以满足不同场景的需求。此外，每个几何对象还可以关联附加属性，如时间戳、高度信息等，以增加数据的丰富性。 9. **...
Cesium绘制点线面以及面积测量
06-05
首先，Cesium本身提供了基础的几何体绘制功能，例如`Cesium.Primitive`、`Cesium.Geometry`和`Cesium.GeometryInstance`等类，它们可以用来创建点、线、面等基本图形。例如，`Cesium.Cartesian3`用于定义三维坐标，`...
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
05-21
关于“三维开发实例”，Cesium提供了丰富的API和实体类型来创建各种3D对象，如点、线、多边形、几何体和模型。模型（Model）是Cesium中处理复杂3D形状的关键，它可以加载来自GLTF、GEOJSON等多种格式的3D模型。在贴...
cesium绘制实时绘制多边形并编辑多边形
weixin_57538359的博客
12-28 1804
2.理清需要那些功能,在这里我们用到了cesium得画点,画线,画面,以及对鼠标得左键,右键,和移动得监听。3.接下来就开始创作了,其中还有一些细节,大家自行体会,完整代码如下,当然还有一些缺陷或者bug,请大家指正,我会改进。1.创建cesium (省略.....)前言:基于cesium实现画多边形以及对其编辑。也作为在工作当中的积累,展示在这里.如有不好的地方,欢迎指正.
Cesium 简单航飞线路规划，模拟飞行扫描效果
Zk的博客
06-16 4247
Cesium 简单航飞线路规划，模拟飞行扫描效果。
Cesium加载geojson矢量面+拉伸为建筑体+贴TIN地形
cky_123的博客
02-23 5223
.shp矢量面数据如何在cesium中拉伸为建筑体显示并贴地
Cesium在线绘制PolyLine折线
Bret的技术栈
01-16 1万+
使用Cesium.CallbackProperty可以实时更改Geometry.position等参数，从而达到绘制的效果。1.封装PolyLine对象var PolyLinePrimitive = (function(){ function _(positions){ this.options = { polyline : {
Cesium 点击绘制圆形（动态绘制圆形）
qq_17627195的博客
07-05 7514
点击绘制圆形，动态绘制圆形
Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘
热门推荐
qq_17627195的博客
10-23 2万+
添加标绘之前要明白一点：Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象，或者说Cesium 提供 Entity API 来绘制控件数据。所以我们添加的所有标绘都是entity Entity API简介 Cesium提供两类API： 面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识。 高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、
cesium编辑多边形面，需要闭合面
weixin_43620832的博客
05-06 354
******************** 退出编辑功能 ************************/tmpPointColor: "#ffff0088", //临时点面颜色rgba。polygonColor: "#30dd1042", //编辑面颜色rgba。pointColor: "#ff0000ee", //正式点面颜色rgba。tmpPointSize: 7, //临时点大小,pointSize: 10, //正式点大小。//右击取消 固定位置。/** 清理资源 */
cesium绘制等高线
10-25
在Cesium中绘制等高线的方法如下： 1. 定义等高线初始值，包括最小高度、最大高度、等高线颜色等参数。 2. 使用Cesium.Material.fromType("ElevationContour")方法创建等高线材质。 3. 将等高线材质的uniforms属性赋值给contourUniforms变量。 4. 设置等高线的线宽、高度间隔和颜色等参数。 5. 将材质赋值给globe.material，即可开启等高线效果。 需要注意的是，以上代码只是一个示例，具体实现还需要根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老靳的WebGIS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值