Cesium实现根据坐标值、长短半径和高度显示椭圆形

最新推荐文章于 2025-06-23 15:50:54 发布

技术驱动者

最新推荐文章于 2025-06-23 15:50:54 发布

阅读量313

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/CodeWhizZ/article/details/132243665

js 专栏收录该内容

505 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍如何使用Cesium库，根据坐标值、长短半径和高度在Web应用程序中绘制并显示椭圆形。通过创建Viewer对象，定义椭圆参数，设置材质和高度，然后调整相机视角，实现椭圆形在三维场景中的展示。通过修改参数，可以探索不同效果。

Cesium实现根据坐标值、长短半径和高度显示椭圆形

Cesium是一款开源地理信息可视化库，它提供了丰富的功能和可定制性，使开发者能够创建各种类型的地理空间应用。在Cesium中，我们可以利用其强大的API和内置几何实体来绘制椭圆形，并根据给定的坐标值、长短半径和高度进行显示。

下面我将向您展示如何使用Cesium创建一个简单的Web应用程序，该应用程序可以根据用户提供的参数绘制椭圆形，并在三维场景中显示出来。

首先，我们需要使用HTML和CSS创建一个基本的Web页面结构。在HTML文件中，添加一个用于显示Cesium场景的div元素，并引入Cesium的CSS文件和JavaScript库：

<!DOCTYPE html>
<html>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术驱动者

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

78.（cesium之家）cesium椭圆编辑椭圆修改

GIS之家家长

05-23

256

听老人家说：多看美女会长寿 cesium之家总目录（订阅之前建议先查看该博客）文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。效果如下所示：下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> &l

Cesium态势标绘专题-椭圆（标绘+编辑）

总得学点什么的博客

07-25

711

Cesium态势标绘专题-椭圆（标绘+编辑）

参与评论您还未登录，请先登录后发表或查看评论

cesium中Entity的EllipseGraphics添加椭圆

tjx1997的博客

08-27

1970

利用EllipseGraphics能够在cesium中添加椭圆、圆等形状。

cesium--画一个椭球

李卓书

06-13

4067

用cesium画一个椭球体,从而推论出话椭圆和圆形的使用

Cesium使用鼠标动态绘制椭圆(附带绘制帮助提示语)

weixin_43812586的博客

09-18

645

实现思路是:椭圆绘制是基于矩形绘制的基础,因为椭圆长半轴和短半轴实际上就是矩形长和宽,所以核心还是绘制左上和右下两个点,然后计算出椭圆的中心店,以及长短半轴的值,以此实现动态绘制椭圆。

014：cesium根据坐标值长短半径高度，显示椭圆形

大剑师兰特的GIS世界

02-28

541

第014个本示例的目的是介绍如何在vue+cesium中根据坐标值长短半径高度，显示椭圆形。

013：cesium根据坐标值半径高度，显示圆形

大剑师兰特的GIS世界

02-28

658

第013个本示例的目的是介绍如何在vue+cesium中根据坐标值半径高度，显示圆形。

精选资源

64.（cesium篇）cesium根据坐标位置获取地形高度.zip

12-06

本篇文章将详细讲解如何利用Cesium库根据坐标位置获取地形高度，这对于地理数据分析、地图应用开发等场景具有很高的实用价值。 Cesium是一个基于 WebGL 的JavaScript库，它允许开发者在浏览器中创建交互式的3D地球...

精选资源

Cesium 地图显示鼠标经纬度和高度

02-23

本项目“Cesium地图显示鼠标经纬度和高度”是基于HTML前端技术实现的一个基本功能，允许用户在交互地图时查看鼠标位置的经度、纬度以及海拔高度。下面我们将深入探讨这一功能的实现及其相关技术。首先，我们需要...

【cesium+js】绘制椭圆

最新发布

qq_63736937的博客

06-23

252

摘要：该代码实现了一个基于Cesium的交互式椭圆绘制工具。通过鼠标左键点击确定椭圆中心点，移动鼠标实时预览椭圆形状（长轴随距离变化，短轴固定为长轴的60%），右键点击完成绘制并生成最终椭圆。绘制过程中提供贴地效果和颜色透明度设置，支持取消操作和清除所有已绘制椭圆。工具采用事件监听机制实现交互逻辑，适用于地理信息系统的图形标注需求。

78.（cesium篇）cesium椭圆编辑椭圆修改.zip

04-29

该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“78.（cesium篇）cesium椭圆编辑椭圆修改”。如下载有问题，可联系博主。解压密码：cesium

77.（cesium篇）cesium椭圆采集.zip

04-28

该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“77.（cesium篇）cesium椭圆采集”。如下载有问题，可联系博主。

DEJA_VU3D - Cesium功能集之 110-椭圆（标绘+编辑）

总得学点什么的博客

05-17

993

本篇是优化后标绘组件第十四篇，主要来实现椭圆对象的标绘和编辑功能，包括完整源代码奉上

003：vue+cesium 设置skybox透明并添加背景图

大剑师兰特的GIS世界

02-25

2644

第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。

使用Cesium进行态势标绘：绘制椭圆形状（DEJA_VU3D）

HwfOcaml的博客

09-18

778

Cesium是一个开源的地理信息系统（GIS）库，它提供了丰富的功能来创建具有地球表面上位置的三维可视化。通过使用Cesium的DEJA_VU3D功能，我们可以轻松创建并展示态势标绘中的椭圆。通过定义椭圆的中心位置、半长轴、半短轴和方向，我们可以创建一个椭圆实例并将其添加到地球场景中。接下来，我们需要定义绘制椭圆所需的参数，例如中心位置、半长轴、半短轴和椭圆的方向。使用上述定义的参数，我们可以创建一个椭圆实例并将其添加到地球场景中。以下是使用Cesium库在地球上绘制椭圆的步骤。第4步：创建椭圆实例。

cesium 显示视角高度以及鼠标经纬度

weixin_34303897的博客

06-23

901

HTML中的内容 1 <div id="cesiumContainer"> 2  3 <span style="font-size:24px;"> 4 <div id="latlng_show" style="width:450px;height:30px;position...

cesium计算动态高度显示，高度刚好展示全部点位

葫芦娃y的博客

05-04

470

cesium计算动态高度显示，高度刚好展示全部点位

78.（cesium篇）cesium椭圆编辑椭圆修改

GIS之家家长

05-11

517

听老人家说：多看美女会长寿地图之家总目录（订阅之前建议先查看该博客）文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。效果如下所示：下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <li

018：cesium 添加椭球体，理解并设置参数

大剑师兰特的GIS世界

03-01

739

第018个本示例的目的是介绍如何在vue+cesium中根据坐标值宽度高度等，显示椭球体。这里设置两个椭球体，内外各占据一部分。

Cesium 怎么根据经纬度，和半径，创建一个圆形的边框呢

02-20

在 Cesium 中，要基于给定的经纬度和半径创建一个带有边框的圆形区域，通常会使用 `EllipseGraphics` 来表示该圆形。由于直接设置 `outlineWidth` 属性已不再支持以指定边框的具体宽度，我们可以采取一种变通的方式——通过增加另一个稍大的椭圆作为“虚拟”的边框来达到类似的效果。以下是具体步骤及代码实例： ### 步骤 1. **初始化 Viewer**：首先需要有一个已经配置好的 Cesium Viewer 实例。 2. **添加内部实体（蓝色填充）**：使用指定的位置（经纬度转换后的笛卡尔坐标）、以及提供的半径构建一个小一点的椭圆用于展示中心部分的颜色。 3. **添加外部实体（红色边框）**：再创建一个新的椭圆略大于前一步所建立的那个，只显示轮廓而不进行填充，以此模拟出边框效果。 ### 示例代码 ```javascript // 初始化Viewer var viewer = new Cesium.Viewer('cesiumContainer'); function addCircleWithBorder(longitude, latitude, radiusInMeters) { var position = Cesium.Cartesian3.fromDegrees(longitude, latitude); // 内部填充蓝色彩色的小椭圆 (圆) viewer.entities.add({ name : 'Inner Circle - Blue Fill', position : position, ellipse : { semiMajorAxis : radiusInMeters * 0.5, // 半长轴等于半径的一半 semiMinorAxis : radiusInMeters * 0.5, // 对于正圆形来说两者的长度应该是相等的 material : Cesium.Color.BLUE.withAlpha(0.8), // 设置材料颜色为半透明深蓝色 outline : false // 关闭此形状的描边选项因为我们将在下一步处理 } }); // 较大尺寸但是空心且有红彩边框的大椭圆 (用来做假边框) viewer.entities.add({ name : 'Outer Border - Red Outline', position : position, ellipse : { semiMajorAxis : (radiusInMeters + 50) * 0.5, // 稍微增大些以便显现边框 semiMinorAxis : (radiusInMeters + 50) * 0.5, material : Cesium.Color.TRANSPARENT, // 完全透明不让其遮挡下层元素 outline : true, // 开启描边功能 outlineColor : Cesium.Color.RED // 描边颜色设成红色 } }); } // 调用函数生成指定位置与大小的带边框圆形 addCircleWithBorder(-75.1641667, 39.9522222, 100); // 经纬度: (-75.1641667, 39.9522222)，圆形直径=100米 ``` 以上代码片段展示了如何结合两个略微差异化的椭圆图形实现具有明显边界的圆形区域可视化。这种做法虽然并非完美解决方案，但在当前版本 API 下确实是一种有效的替代手段。请注意，这里的单位是以米计，并假设地球表面近似平面处理。如果涉及到更大范围或者更高的精度需求，则要考虑更多因素如投影变换等复杂情况。此外，实际应用中应根据自身业务逻辑调整各个参数值。