使用JavaScript和Cesium添加椭球体

最新推荐文章于 2025-04-24 10:25:21 发布
原创 最新推荐文章于 2025-04-24 10:25:21 发布 · 212 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript #js

本文详细介绍了如何借助JavaScript和Cesium库在3D环境中添加椭球体。首先，通过CDN引入Cesium库，然后在HTML中创建可视化容器。接着，在JavaScript中创建Cesium场景，使用`EllipsoidGraphics`方法定义椭球体的半径，并通过`Entity`设置位置和材质。最后，调整相机视角以显示椭球体。这为地理可视化应用提供了定制椭球体模型的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在本文中，我们将探讨如何使用JavaScript和Cesium库来添加椭球体，并了解如何设置椭球体的参数。Cesium是一个用于创建3D地球和地理可视化应用程序的JavaScript库，提供了丰富的功能和工具。

首先，我们需要在HTML文件中引入Cesium库。您可以通过下载Cesium库并将其添加到您的项目中，或者使用CDN（内容分发网络）来引入Cesium。以下是使用CDN引入Cesium的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium Ellipsoid</title>
    <style<
最低0.47元/天 解锁文章

200万优质内容无限畅学
LdfcLoop
关注
018：cesium 添加椭球体，理解并设置参数
大剑师兰特的GIS世界
03-01 672
第018个本示例的目的是介绍如何在vue+cesium中根据坐标值宽度高度等，显示椭球体。这里设置两个椭球体，内外各占据一部分。
Cesium高级开发教程之十六：动态球#渐变球体
Cesium开发工程师
11-11 287
引入EllipsoidTrailMaterialProperty外部包，通过修改椭球体的材质来实现效果，可以动态修改球体半径，位置、速度和颜色。
cesium--画一个椭球
李卓书
06-13 3878
用cesium画一个椭球体,从而推论出话椭圆和圆形的使用
Cesium 绘制 立方体、圆柱、圆锥、球体、圆台
最新发布
qq_17627195的博客
04-24 359
Cesium 绘制 立方体、圆柱、圆锥、球体、圆台。
cesium api-Ellipsoid
bguihiub的博客
02-14 742
Cesium api Ellipsoid
cesium中Entity的EllipseGraphics添加椭圆
tjx1997的博客
08-27 1770
利用EllipseGraphics能够在cesium中添加椭圆、圆等形状。
【超图+CESIUM】【基础API使用示例】02、超图｜CESIUM初始化场景与销毁场景
汪同学丶的博客
02-24 3251
前言 缺少前置学习使用资料，请自行查阅：[https://blog.youkuaiyun.com/weixin_44402694/article/details/123110136](https://blog.youkuaiyun.com/weixin_44402694/article/details/123110136) 以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.youkuaiyun.com/download/
Cesium高级开发教程之十五：电弧球体
Cesium开发工程师
11-10 333
引入EllipsoidElectricMaterialProperty外部包，通过修改椭球体的材质来实现效果，可以动态修改球体半径，位置、速度和颜色。
Cesium-（Primitive）-（EllipsoidOutlineGeometry）
纸飞机的旅行的博客
12-27 118
返回值：修改后的结果参数或如果没有提供新实例，则为一个新的 EllipsoidOutlineGeometry 实例。加两个具有轮廓线的椭球体。返回值：被打包的数组。
Cesium-（Primitive）-（CircleOutlineGeometry）
纸飞机的旅行的博客
12-14 192
返回值：修改后的结果参数或如果没有提供新实例，则为一个新的 CircleOutlineGeometry 实例。参数，该参数是Cesium Viewer的实例，用于在Cesium场景中渲染图形。为中心，绘制一个半径约为1000公里的蓝色圆形轮廓，并将这个圆形轮廓沿垂直方向向上移动了100米。总的来说，这段代码的作用是在Cesium Viewer的3D场景中，以经纬度。是 CesiumJS 中的一个类，它用来描述在椭球体上圆的轮廓。类的构造函数选项、静态方法和属性的详细描述。返回值：被打包的数组。
cesium学习——cesium中的坐标
weixin_30251587的博客
08-03 387
一、坐标展现形式 　　在cesium中，对于坐标数值单位有三种：角度、弧度和坐标值 　　1.角度 　　　　角度就是我们所熟悉的经纬度，对于地球的坐标建立如下： 　　　　　 　　　　图中以本初子午线作为x和z的面，建立了一个空间坐标系。可知在纬度方向上，角1的范围为-90~90，即南纬90°~北纬90°，角2的范围是-180~180，即东经180°~西经180°。 　　2.弧...
cesium实现轨迹球体效果
专注GIS开发
03-14 6164
cesium实现轨迹球体效果
cesium实现自定义地球球体背景效果
专注GIS开发
02-19 3921
cesium实现自定义背景
cesium学习之路（十）在地图中绘制圆柱、圆锥与球体。
m0_63701303的博客
11-17 4157
在地图中绘制圆柱、圆锥与球体。
Cesium半椭球体面的生成思路
haochajin的博客
10-15 3496
Cesium提供了两种方式让使用着加载自己所需要的几何图形，分别是Entity和Primitive。前者是一些已经封装好的接口，可以很方面的添加点、线、面、矩形、椭球体、圆柱体等形状。对于一些意见的使用来说，Entity接口可以用极少量的代码就可以实现所需要的功能。另外一种则是Primitive，相比Entity来说，这种方式需要使用者对Cesium有着更深层次的理解，因为在Primitive中我...
Cesium+Vue初始化一个球体
weixin_47606392的博客
07-08 628
Cesium+Vue初始化一个球体
CesiumJS开发中坐标系的相关知识
GIS工具
03-11 585
经度是指在参考椭球体上的从本初子午线（通常是格林威治子午线）起的逆时针方向的角度，纬度是指从参考椭球体赤道面起的垂直角度，高度是指相对于参考椭球体表面的垂直距离。在Cesium中，地球固定坐标系使用笛卡尔坐标系（Cartesian Coordinate System）来表示，其中x轴指向赤道上的本初子午线，y轴指向赤道面上与本初子午线相交的位置，而z轴垂直于地球表面指向北极。参考椭球体坐标系是指以地球的参考椭球体（通常是WGS84椭球体）为基准的坐标系。
cesium坐标系及转换
~~~
03-03 8760
详细介绍了Cesium中采用的两大坐标系以及之间转换的各种方法。
cesium添加圆
04-03
### 如何在 Cesium 中添加圆形 要在 Cesium 中创建并显示一个圆形，可以利用 `EllipsoidGraphics` 或者通过多边形近似的方式实现。以下是两种常见的方法： #### 方法一：使用 `EllipsoidGraphics` Cesium 提供了内置的几何对象来绘制椭球体上的形状，例如椭圆或圆形。可以通过设置半径参数使椭圆变为正圆。 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-107.0, 40.0), // 圆心位置 (经度, 纬度) ellipse : { semiMajorAxis : 50000.0, // 主轴长度（米） semiMinorAxis : 50000.0, // 副轴长度（米），等于主轴则形成正圆 material : Cesium.Color.BLUE.withAlpha(0.5) // 设置颜色和透明度 } }); viewer.zoomTo(entity); ``` 上述代码展示了如何使用 `ellipse` 属性定义一个圆形区域[^1]。注意，这里的单位是以 **米** 计算的。 --- #### 方法二：基于多边形逼近法 如果需要更灵活的控制，也可以手动构建一个多边形作为圆形的近似表示。这种方法适用于复杂场景下的定制需求。 ```javascript function createCircle(centerLonLatHeight, radiusMeters, segments) { var positions = []; for (var i = 0; i <= segments; i++) { // 添加最后一个顶点闭合环路 var angle = Cesium.Math.toRadians(i * (360 / segments)); var dx = Math.cos(angle) * radiusMeters; var dy = Math.sin(angle) * radiusMeters; var cartographic = Cesium.Cartographic.fromDegrees( centerLonLatHeight.longitude, centerLonLatHeight.latitude ); var surfaceNormal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormalCartographic(cartographic); var offset = Cesium.Cartesian3.multiplyByScalar(surfaceNormal, radiusMeters, new Cesium.Cartesian3()); var pointOnSphere = Cesium.Cartesian3.add(Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0), offset, new Cesium.Cartesian3()); positions.push(pointOnSphere); } return positions; } // 使用示例 var viewer = new Cesium.Viewer('cesiumContainer'); var circlePositions = createCircle({longitude: -107.0, latitude: 40.0}, 50000, 64); // 半径为50km，分段数为64 viewer.entities.add({ polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(circlePositions), material : Cesium.Color.RED.withAlpha(0.5) } }); ``` 此函数实现了动态生成指定数量的顶点构成的圆形边界，并将其转换为适合 Cesium 的坐标系格式[^2]。 --- #### 注意事项 - 如果涉及复杂的材质映射或其他高级功能，则需要注意某些属性可能不支持插值操作。 - 对于 DEM 数据的支持情况，请确认所使用的地形服务是否兼容自定义高程模型[^5]。 --- ### 总结 无论是采用简单的 `ellipse` 几何还是手动生成多边形的方法，在 Cesium 中都可以轻松完成圆形的渲染任务。具体选择取决于实际应用场景的需求以及性能考量。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值