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

2024-11-03 19:44:11

官方案例

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绘制图形标注的资料请关注我们其它相关文章！

基于Cesium实现拖拽3D模型的示例代码

目录添加基站模型拖拽这个地方是想实现一个什么效果呢?就是使用 cesium 在地图上添加一个3D模型,然后实现拖拽效果. 添加基站模型然后这篇博文介绍的主要不是添加模型,但是也简单把代码直接粘贴过来吧,就不详细说了. // 添加基站模型 function addSite() { let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0); // 设置模型方向 let hpRoll = new Cesium.
基于Cesium绘制栅栏的示例代码

目录最终效果创建 dynamicWallMaterialProperty.js 文件网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方法又加上自己百度改,最后实现了一个效果,和我想实现的效果差不多,分享一下子. 最终效果反正这篇博文最后实现的效果就是上面动图的效果,如果你想实现的效果不是这个样子的话就不要看了,浪费时间了就. 创建 dynamicWallMaterialProperty.js 文件首先需要一个 dynamicWallMat
基于Cesium实现加载显示热力图

目录 CesiumHeatmap 编写案例我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索,一点一点学习的过程中,所以说有些博文写的可能不是准确的,只是用来记录一下学习过程,错了别喷我啊!! CesiumHeatmap 首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个github的地址. CesiumHeatmap [时空门~ 嗖~] 下载下来
基于Cesium绘制抛物弧线

Cesium绘制抛物弧线,供大家参考,具体内容如下在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> 取n个点,依次画线,得到近似的抛物线,点越多越光滑 JS代码 // 两点之间抛物线绘制函数,twoPoints是一个数组:[lon1,lat1,lon2,lat2] function animatedParabola(twoPoints) { //动态抛物线绘制 let startPoint = [two
基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

目录官方案例绘制矩形绘制多边形绘制椭圆绘制圆形绘制立方体绘制椭圆柱体绘制多边柱体绘制圆柱体立体串串好难形容又平面又立体的板板 “回”字绘制立方体,扭转一定角度的在天上飘着的椭圆柱体绘制椎体平面图形的串串这个是啥子嘞,就是向cesium上面添加圆形.正方形啥的. 官方案例 https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html 官网写的很好了,但是有一些没有注释,所以说刚入门的小可爱
Vue使用openlayers实现绘制圆形和多边形

目录绘制圆形绘制多边形绘制编辑多边形完成绘制这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. 绘制圆形这里的绘制圆是指当后台返回数据,告诉你以某个经纬度坐标为圆心,或者是顶点,以 r 为半径绘制,不是鼠标手动绘制. 首先绘制圆,首先有一个数据源和一个图层来存放绘制的圆形,这个很简单.然后创建变量自己该就可以,我估计都搞openlayer了,这些基础应该不至于不知道,我这边就写关键代码,我想应该没问题
canvas快速绘制圆形、三角形、矩形、多边形方法介绍

想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar 从本篇文章开始,我会分享给大家canvas绘制的各种基础图形和酷炫的图形,注意:是一系列!欢迎关注! 后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路. 本文看点:
js绘制圆形和矩形的方法

本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&
基于javascript实现按圆形排列DIV元素(三)

$(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop}); 效果图: 分析图: 上图中: 黑色:是外层容器; 黄色:是需要按椭圆运动的图片橙色:每个图片元素距离容器顶部的距离紫色:长半径或短半径; 蓝色:图片距离容器顶部最大的距离绿色:坐标轴; 白色:椭圆运动轨迹; 一.原理分析: 1.1按椭圆
php绘制圆形的方法

本文实例讲述了php绘制圆形的方法.分享给大家供大家参考.具体实现方法如下: php绘图的基本步骤,有四步(php.ini里的 extension = php_gb2.dll 组件首先需要启用) 1.创建画布: 2.画出所需要的图像(圆.直线.矩形.扇形.弧线.......): 3.输出到网页,或者另存: 4.销毁图片(目的是释放图像所占用的内存). 网站开发最常用的三种图像格式:gif.jpg/jpeg.png (1)gif格式:压缩率最高,但只能显示256色,可能造成色彩的丢失.优势:可能显
Android使用Canvas绘制圆形进度条效果

前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B
Python基于matplotlib实现绘制三维图形功能示例

本文实例讲述了Python基于matplotlib实现绘制三维图形功能.分享给大家供大家参考,具体如下: 代码一: # coding=utf-8 import numpy as np import matplotlib.pyplot as plt import mpl_toolkits.mplot3d x,y = np.mgrid[-2:2:20j,-2:2:20j] #测试数据 z=x*np.exp(-x**2-y**2) #三维图形 ax = plt.subplot(111, project
基于 D3.js 绘制动态进度条的实例详解

D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于