广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注
  • 935
分享到

基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

Cesium绘制图形标注Cesium 图形标注Cesium 绘制标注 2022-11-13 10:11:10 935人浏览 独家记忆
摘要

目录官方案例绘制矩形绘制多边形绘制椭圆绘制圆形绘制立方体绘制椭圆柱体绘制多边柱体绘制圆柱体立体串串好难形容 又平面又立体的板板“回”字绘制立方体,扭转一定角度

这个是啥子嘞,就是向cesium上面添加圆形、正方形啥的。

官方案例

https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html

官网写的很好了,但是有一些没有注释,所以说刚入门的小可爱们不知道那些代码分别是绘制啥的,所以说嘞,我稍微整理了一下。

绘制矩形

	const stripeMaterial = new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE.withAlpha(0.5),
      oddColor: Cesium.Color.BLUE.withAlpha(0.5),
      repeat: 5.0,
    });

    // 绘制矩形
    let graphical = viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(116.8, 36.1, 116.9, 36.2), // 最西、最南、最东、最北
        outline: true,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 4,
        stRotation: Cesium.Math.toRadians(45),
        // material: stripeMaterial,
      },
    })

绘制多边形

	let graphical = viewer.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,
      },
    })

绘制椭圆

	let graphical = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116.8, 36.1),
      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,
      },
    });

绘制圆形

	let graphical = viewer.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,
      },
    });

绘制立方体

	// 绘制立方体
    let graphical = viewer.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 }),
      },
    });

绘制椭圆柱体

	// 绘制椭圆柱体
    let graphical = viewer.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 }),
      },
    });

绘制多边柱体

	// 绘制多边柱体
    let graphical = viewer.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 }),
      },
    });

绘制圆柱体

    // 绘制圆柱体
    let graphical = viewer.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 }),
      },
    });

立体串串

	for (i = 0; i < 5; ++i) {
      let = height = 100000.0 + 200000.0 * i;
      viewer.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 }),
        },
      });

      viewer.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 }),
        },
      });

      viewer.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 }),
        },
      });
    }

好难形容 又平面又立体的板板

    // 绘制啥这是,又平面又立体的板板
    viewer.entities.add({
      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 }),
      },
    });

“回”字

	// 我滴妈呀,越来越难形容,一个“回”字
    viewer.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,
      },
    });

绘制立方体,扭转一定角度的

    // 绘制立方体,带旋转的
    viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
          -110.0,
          38.0,
          -107.0,
          40.0
        ),
        height: 700000.0,   // 一个数字属性,用于指定多边形相对于椭球表面的高度
        extrudedHeight: 100000.0,   // 一个数字属性,用于指定多边形的凸出面相对于椭球面的高度。
        rotation: Cesium.Math.toRadians(45),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

在天上飘着的椭圆柱体

    // 在天上飘着的椭圆柱体
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0),
      ellipse: {
        semiMinorAxis: 100000.0,
        semiMajorAxis: 200000.0,
        height: 300000.0,
        extrudedHeight: 700000.0,
        rotation: Cesium.Math.toRadians(-40.0),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
      },
    });

绘制椎体

	viewer.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 }),
      },
    });

平面图形的串串

    // 平面图形的串串
    for (i = 0; i < 5; ++i) {
      let height = 200000.0 * i;
      viewer.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 }),
        },
      });

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

以上就是基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注的详细内容,更多关于Cesium绘制图形标注的资料请关注编程网其它相关文章!

--结束END--

本文标题: 基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

本文链接: https://www.lsjlt.com/news/152358.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作