-
Cesium学习六：使用entity绘制ellipsoid
一、椭球绘制代码
上一篇介绍了圆柱的绘制，本篇介绍椭球的绘制，
Cesium提供的ellipsoid类主要用来绘制椭球和球体，具体代码如下（别忘了使用你自己的Token，基础环境不知道怎么布置的请参考开发环境搭建），绘制的结果如下图所示。DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js">script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> head> <body> <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;">div> <script> // Your access token can be found at: https://cesium.com/ion/tokens. // Replace `your_access_token` with your Cesium ion access token. Cesium.Ion.defaultAccessToken = '你的Token'; //替换成你的Token Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90); // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. const viewer = new Cesium.Viewer('cesiumContainer', { geocoder:true,//控制右上角第一个位置的查找工具 homeButton:true,//控制右上角第二个位置的home图标 sceneModePicker:true,//控制右上角第三个位置的选择视角模式，2d，3d baseLayerPicker:true,//控制右上角第四个位置的图层选择器 navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮 animation:false,//控制左下角的动画器件 timeline:false,//控制下方时间线 fullscreenButton:false,//右下角全屏按钮 vrButton:false,//右下角vr按钮 shouldAnimate: true,//允许动画同步 infoBox : true, //不显示点击要素之后显示的信息 terrainProvider: Cesium.createWorldTerrain() }); viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息 let sphere = viewer.entities.add({ name: "sphere", position: new Cesium.Cartesian3.fromDegrees(120, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_inner = viewer.entities.add({ name: "sphere_inner", position: new Cesium.Cartesian3.fromDegrees(120, 29.995, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), innerRadii: new Cesium.Cartesian3(50, 50, 50), // 内椭球半径 material: new Cesium.Color(1, 0, 0, 0.7), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_clock1 = viewer.entities.add({ name: "sphere_clock1", position: new Cesium.Cartesian3.fromDegrees(120, 29.99, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 minimumClock: Cesium.Math.PI/4, maximumClock: Cesium.Math.PI/2, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_clock2 = viewer.entities.add({ name: "sphere_clock2", position: new Cesium.Cartesian3.fromDegrees(120, 29.985, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 minimumClock: Cesium.Math.PI/4, maximumClock: 3*Cesium.Math.PI/2, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_cone1 = viewer.entities.add({ name: "sphere_cone1", position: new Cesium.Cartesian3.fromDegrees(120.005, 29.99, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 minimumCone: Cesium.Math.PI/4, maximumCone: Cesium.Math.PI/2, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_cone2 = viewer.entities.add({ name: "sphere_cone2", position: new Cesium.Cartesian3.fromDegrees(120.005, 29.985, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 minimumCone: Cesium.Math.PI/2, maximumCone: 3*Cesium.Math.PI/4, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_height = viewer.entities.add({ name: "sphere_height", position: new Cesium.Cartesian3.fromDegrees(120, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_outline1 = viewer.entities.add({ name: "sphere_outline1", position: new Cesium.Cartesian3.fromDegrees(119.995, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_outline2= viewer.entities.add({ name: "sphere_outline2", position: new Cesium.Cartesian3.fromDegrees(119.995, 29.995, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 10.0, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_stack1 = viewer.entities.add({ name: "sphere_stack1", position: new Cesium.Cartesian3.fromDegrees(119.995, 30.005, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, stackPartitions: 1, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_stack2 = viewer.entities.add({ name: "sphere_stack2", position: new Cesium.Cartesian3.fromDegrees(120, 30.005, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, stackPartitions: 2, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_stack3 = viewer.entities.add({ name: "sphere_stack3", position: new Cesium.Cartesian3.fromDegrees(120.005, 30.005, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, stackPartitions: 3, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_stack4 = viewer.entities.add({ name: "sphere_stack4", position: new Cesium.Cartesian3.fromDegrees(120.01, 30.005, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, stackPartitions: 4, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_stack8 = viewer.entities.add({ name: "sphere_stack8", position: new Cesium.Cartesian3.fromDegrees(120.015, 30.005, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, stackPartitions: 8, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_slice1 = viewer.entities.add({ name: "sphere_slice1", position: new Cesium.Cartesian3.fromDegrees(119.995, 30.01, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, slicePartitions: 1, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_slice2 = viewer.entities.add({ name: "sphere_slice2", position: new Cesium.Cartesian3.fromDegrees(120, 30.01, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, slicePartitions: 2, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_slice3 = viewer.entities.add({ name: "sphere_slice3", position: new Cesium.Cartesian3.fromDegrees(120.005, 30.01, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, slicePartitions: 3, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_slice4 = viewer.entities.add({ name: "sphere_slice4", position: new Cesium.Cartesian3.fromDegrees(120.01, 30.01, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, slicePartitions: 4, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_slice8 = viewer.entities.add({ name: "sphere_stack8", position: new Cesium.Cartesian3.fromDegrees(120.015, 30.01, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, slicePartitions: 8, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) // // subdivisions 不能 =1，会报错 // let sphere_subdivisions1 = viewer.entities.add({ // name: "sphere_subdivisions1", // position: new Cesium.Cartesian3.fromDegrees(119.995, 30.015, 400), // 点的经纬度坐标 // ellipsoid: { // radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 // outline: true, // subdivisions: 1, // material: Cesium.Color.RED, // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) // }, // }) let sphere_subdivisions8 = viewer.entities.add({ name: "sphere_subdivisions8", position: new Cesium.Cartesian3.fromDegrees(120, 30.015, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, subdivisions: 8, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_subdivisions16 = viewer.entities.add({ name: "sphere_subdivisions16", position: new Cesium.Cartesian3.fromDegrees(120.005, 30.015, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, subdivisions: 16, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 10000.0) }, }) let sphere_subdivisions32 = viewer.entities.add({ name: "sphere_subdivisions32", position: new Cesium.Cartesian3.fromDegrees(120.01, 30.015, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, subdivisions: 32, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let sphere_subdivisions64 = viewer.entities.add({ name: "sphere_subdivisions64", position: new Cesium.Cartesian3.fromDegrees(120.015, 30.015, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 100), //xyz三个方向的半径，相等则为球 outline: true, subdivisions: 64, material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_x = viewer.entities.add({ name: "ellipsoid_radii_x", position: new Cesium.Cartesian3.fromDegrees(120.005, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(200, 100, 100), //xyz三个方向的半径，相等则为球，不相等为椭球 material: Cesium.Color.RED, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_x_inner = viewer.entities.add({ name: "ellipsoid_radii_x_inner", position: new Cesium.Cartesian3.fromDegrees(120.005, 29.995, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(200, 100, 100), //xyz三个方向的半径，相等则为球，不相等为椭球 innerRadii: new Cesium.Cartesian3(100, 50, 50), material: new Cesium.Color(1, 0, 0, 0.7), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_y = viewer.entities.add({ name: "ellipsoid_radii_y", position: new Cesium.Cartesian3.fromDegrees(120.01, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 200, 100), //xyz三个方向的半径，相等则为球，不相等为椭球 material: Cesium.Color.GREEN, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_y_inner = viewer.entities.add({ name: "ellipsoid_radii_y_inner", position: new Cesium.Cartesian3.fromDegrees(120.01, 29.995, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 200, 100), //xyz三个方向的半径，相等则为球，不相等为椭球 innerRadii: new Cesium.Cartesian3(50, 100, 50), material: new Cesium.Color(0, 1, 0, 0.7), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_z = viewer.entities.add({ name: "ellipsoid_radii_z", position: new Cesium.Cartesian3.fromDegrees(120.015, 30, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 200), //xyz三个方向的半径，相等则为球，不相等为椭球 material: Cesium.Color.BLUE, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) let ellipsoid_radii_z_inner = viewer.entities.add({ name: "ellipsoid_radii_z_inner", position: new Cesium.Cartesian3.fromDegrees(120.015, 29.995, 400), // 点的经纬度坐标 ellipsoid: { radii: new Cesium.Cartesian3(100, 100, 200), //xyz三个方向的半径，相等则为球，不相等为椭球 innerRadii: new Cesium.Cartesian3(50, 50, 100), material: new Cesium.Color(0, 0, 1, 0.7), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 20000.0) }, }) viewer.flyTo(sphere); script> body> html> script> body> html>
二、图解参数
2.1 name
ellipsoid的名称，在鼠标点击点弹出的infoBox中会显示该名称。
2.2 position
椭球中心点的坐标，默认是地心坐标系，可使用我们更熟悉的经纬度来表示，转换方法是
new Cesium.Cartesian3.fromDegrees(经度，纬度，高程)2.3 ellipsoid
椭球的绘制参数
2.3.1 show
是否显示，
true为显示，false为不显示，默认为显示2.3.2 radii
椭球的半径，单位为米，格式为
Cesium.Cartesian3，对应的xyz三个分量分别表示椭球三个半径的长度，当三个值相等时为球体，不等时为椭球
2.3.3 innerRadii
椭球的内球半径，椭球可以包含两层，
radii描述的是外层，一般我们用的也是外层，所以innerRadii默认为radii，当设置innerRadii后，可得到内椭球，为了便于查看，将外椭球设置为透明，从上图中可以观察到内椭球2.3.4 minimumClock和maximumClock
椭球最小和最大可见部分的经度值（
弧度制），默认为0和2*PI，即表示整个球体都可见（相当于沿着纬度线绕一圈）。如下图分别为PI/4到PI/2、PI/4到3PI/2对应的椭球，夹角为与朝东的X轴的角度，逆时针（朝北）旋转为正
2.3.5 minimumCone和maximumCone
椭球最小和最大可见部分的纬度值（
弧度制），默认为0和PI，即表示整个球体都可见（相当于沿着经线从北纬90到南纬90）。如下图分别为PI/4到PI/2、PI/4到3PI/4对应的椭球，夹角为与垂直地表朝上的轴的角度，顺时针（朝下）旋转为正
2.3.6 heightReference
椭球的高程参考面，默认值为
Cesium.HeightReference.NONE，表示使用绝对高程，如果想要椭球贴在地表，可设置为Cesium.HeightReference.CLAMP_TO_GROUND，下图为两个红色球体分别为贴地与不贴地的效果
2.3.7 material
椭球的样式，颜色也是其中的一种，目前可以先把这个参数当作设置颜色用，默认为
白色。有些颜色Cesium直接提供了，如红色为Cesium.Color.RED；我们也可以使用RGBA的格式（A表示透明度），如红色可用new Cesium.Color(1, 0, 0, 1)表示（rgb的取值为0-1，如果是0-255的可以除以255进行归一化），下图中带有透明度的绿色为new Cesium.Color(0, 1, 0, 0.5)
2.3.8 outline
是否显示椭球的边框，
true为显示，false为不显示，默认为不显示
2.3.9 outlineColor
椭球边框的颜色，默认为
黑色，值的格式同material，上图中左侧的白色边框就是由该参数设置得到2.3.10 outlineWidth
椭球边框的宽度，默认为
1，此参数我修改后不起作用，原因还未搞清楚2.3.11 stackPartitions
椭球面垂向控制面的数量，默认为
64，下图中从左到右的数量分别为1、2、3、4、8，可见值为1时椭球绘制不出来，数值越大越接近球
2.3.12 slicePartitions
椭球面水平方向上控制面的数量，默认为
64，下图中从左到右的数量分别为1、2、3、4、8，可见值为1时椭球绘制不出来，数值越大越接近球
2.3.13 subdivisions
椭球边框线的段数，默认为
128，数量越大，边框越平滑。该属性不能为1，会报错
2.3.14 distanceDisplayCondition
椭球在该视角距离内可见，其他距离不可见，默认为空，即一直可见。如
new Cesium.DistanceDisplayCondition(100.0, 20000.0)表示在视角离椭球的距离为100到20000之间时可看到该椭球，其他距离不显示该椭球，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能 -
相关阅读:
Acrel-EMS企业微电网能效管理平台在某食品加工厂35kV变电站应用
【推荐】10款最好用的下载工具
python脚本根据linux内存/CPU情况生成csv文件可描绘数据散点图
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
Visual Studio 2022插件的安装及使用 - 编程手把手系列文章
JUC第三十讲：JUC工具类：Exchanger详解
Neo4j图数据科学及2.0版本新功能介绍
87.有效的完全平方数（力扣）
Java ArrayList与顺序表
js的es5
- 原文地址：https://blog.csdn.net/u014523388/article/details/127097036