015：cesium根据坐标值宽度高度，显示走廊状corridor图形

已于 2024-05-30 18:06:27 修改
阅读量501 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # cesium综合教程200+ 文章标签： cesium 大剑师 cesium教程 cesium示例 cesium自学
于 2023-02-28 09:16:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129254574
本文是大剑师兰特分享的Vue+Cesium教程，详细讲解了如何根据坐标值和宽度高度显示走廊状Corridor图形。提供源代码示例，适合想要在vue项目中使用cesium进行3D可视化的开发者学习。

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

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 015个示例

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+cesium中根据坐标值宽度高度，显示走廊状corridor图形。

直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果.

三、配置说明

1）查看基础设置：https://xiaozhuanlan.com/topic/1374609285
或者同样查看：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 2358
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
使用Cesium加载OpenStreetMap地图
laugh666的博客
09-03 413
通过初始化Cesium Viewer，并指定OpenStreetMap作为底图的图像提供者，我们可以在Web浏览器中展示OpenStreetMap地图。接下来，在JavaScript代码中，我们将初始化Cesium，并将OpenStreetMap作为底图加载到地图容器中。在上述代码中，我们创建了一个新的Cesium Viewer实例，并将其绑定到具有ID为’cesiumContainer’的HTML元素上。这只是Cesium的一小部分功能，你可以根据自己的需求进一步探索和使用Cesium的功能。
Cesium加载OpenStreetMap
qq_25064691的博客
03-07 1689
Cesium加载OpenStreetMap黑色风格 tdtLayer = new Cesium.UrlTemplateImageryProvider({ url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png ", subdomains: ["a", "b", "c", "d"], }) viewer.imageryLay
Cesium中实时显示经纬度及视角高
XLSMN的博客
12-08 7696
在Cesium中实现随着鼠标的移动，屏幕实时显示鼠标对应在WGS84坐标系中的经纬度坐标
Cesium 修改鼠标样式
wangjianbo09的博客
08-02 3155
cesium 修改鼠标样式
基于坐标值、宽度和高度的Cesium走廊状图形显示（使用JavaScript）
ByteZenith的博客
08-17 221
本文介绍了如何使用JavaScript和Cesium库创建基于坐标值、宽度和高度的走廊状图形。通过引入Cesium库并编写相应的逻辑，我们可以在3D场景中展示具有长方形轮廓和空间感的走廊图形。在本文中，我们将使用JavaScript和Cesium库来实现根据给定的坐标值、宽度和高度显示走廊状图形的功能。然后，我们可以在JavaScript中编写逻辑来创建Cesium场景和走廊状图形。然后，我们可以使用Cesium的几何体和材质来创建走廊状图形。接下来，我们需要在HTML文件中创建一个。
Cesium图形绘制
【cacrle】的博客
01-26 1411
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。本文介绍Cesium中的坐标系统及相互转换关系，讲解如何在构造的三维场景中交互绘制点、线、面、体等多种空间对象并对这些空间对象进行管理。
Cesium 展示—— 绘制点线面
虎康的博客
08-25 1019
【代码】Cesium 使用 Entity 绘制点线面。
Gitee上那些开源的WebGIS项目（一）Cesium
2301_78220461的博客
09-11 1265
文档链接：https://gitee.com/xhlfly/cesium-demo作者：小龙。
使用JavaScript设置Cesium的透明Skybox并添加背景图
ByteZenith的博客
09-20 625
在上面的代码中，我们创建了一个新的SkyBox实例，并将其赋值给Viewer实例的skyBox属性。在这里，我们将所有的图像路径设置为透明图像的路径，以实现透明的效果。通过以上步骤，你可以在Cesium中设置透明的Skybox并添加自定义的背景图像。首先，我们需要创建一个Cesium的Viewer实例，即一个可视化场景的容器。完成上述设置后，你将看到Cesium的Skybox变为透明，允许场景中的其他元素透过Skybox显示。在上面的示例代码中，我们创建了一个包含Cesium Viewer的HTML页面。
Cesium鹰眼缩略图 - JavaScript实现
laugh666的博客
08-17 412
用户可以通过在主视图中导航，同时在鹰眼缩略图中获得全局视图，并可通过交互来控制主视图。接下来，我们创建了一个具有指定参数的鹰眼缩略图Viewer对象，并将其放置在ID为"thumbnailContainer"的div元素中。其中一个重要的功能是鹰眼缩略图，它可以帮助用户在整个地图范围内导航和了解当前视图的位置。每当主视图相机位置发生变化时，我们通过设置鹰眼缩略图的相机位置和方向，使其与主视图保持同步。最后，我们向主视图中添加了一个开放街道地图的图像提供者，并将相机的视图设置为指定的经纬度和高度。
cesium教程-3（显示高度,海拔,经度,纬度）
weshmily前端
09-14 4786
老规矩先看效果 解析： 在Cesium里面，我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件： var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //Cesium.ScreenSpaceEventType.MOUSE_MOVE ：监听鼠标移动 handler.setInputAction(function(event) { }, Cesium.
cesium如何加载openStreetMap离线瓦片资源（矢量图）
2401_83327792的博客
10-31 1124
这五个地图资源文件 因为连接的是外网，所以下载非常缓慢，甚至可能下载不下来，这边建议自己搭建一个文件服务器，首先自己下载完之后通过url的方式直接更改。全地球大约77G的文件所以导入的较为缓慢，此步操作完全交由镜像内的Lua脚本执行，所以终端突然链接终端也不会影响其操作。更换完毕后等待pbf文件的导入。pbf文件的导入会通过内置的lua脚本创建。中的下载链接改为自己的文件服务器，这样能保证这几个文件能较快的下载下来。将自己下载的pbf文件放入服务器的文件夹中 例如 /etc/拼接安全参数之后的命令为。
cesium自带的组件显示与隐藏
Baker的博客
09-02 977
Cesium有很多自带的工具栏，这些工具栏可以实现隐藏与现实，这里介绍一下具体有哪些工具栏，以及属性名是什么，如何进行隐藏与显示，下面提供源码，源码中会对每个工具栏的介绍，值设置为false为不显示，设置true为显示，默认都是显示的。可以对照着源码的注释试一试。 <!DOCTYPE html> <htm...
cesium 加载mapbox底图 黑色主题底图 84底图
AllBluefm的专栏
04-03 740
【代码】cesium 加载mapbox底图 黑色主题底图 84底图。
根据点位信息，显示多边形
zhanghuaiwei
04-06 320
根据点位信息，显示多边形。及其Cesium的事件
Cesium 显示实时鼠标位置和视角信息
Y13349887034的博客
03-16 866
cesium显示地图参数、视角信息和鼠标位置
CesiumJS【Basic】- #071 二维/三维/哥伦布视图模式
AlanL的专栏
07-05 353
二维/三维/哥伦布视图模式的切换
【Cesium学习（八）】Cesium设置材质
HAI_GUI的博客
06-05 3582
今天我们将学习Cesium对entity实体设置材质，在Cesium中为实体及几何行状设置材质有多个方法。我们可以在创建实体的时候直接构件Cesium.Material对象，再通过设置Material的属性来进行各种材质的控制，具有实例和API我们可以看官网的描述。颜色材质是我们最常用到的材质，他可以将实体设置成不同的颜色，以到达实体醒目的作用及其他作用，通常和鼠标移动或者点击事件来联动展示。
cesium 普通墙
最新发布
04-01
### 如何在 Cesium 中创建或渲染普通墙体 在 Cesium 中，可以通过 `Cesium.Primitive` 或者更高级别的 API 来实现墙体的绘制和渲染。以下是两种常见的方法来创建墙体。 #### 方法一：使用 `Cesium.PolygonGraphics` 通过定义一个多边形并将其拉伸到一定高度，可以模拟墙体的效果。这种方法适用于简单的平面墙体。 ```javascript viewer = new Cesium.Viewer('cesiumContainer'); var wallEntity = viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ -72.0, 45.0, -68.0, 45.0, -68.0, 47.0, -72.0, 47.0 ]), extrudedHeight: 1000.0, // 墙体的高度 material: Cesium.Color.RED.withAlpha(0.5) // 设置颜色透明度 } }); viewer.zoomTo(wallEntity); ``` 上述代码片段展示了如何利用多边形的 `extrudedHeight` 属性来创建一个垂直于地面的墙体效果[^1]。 #### 方法二：使用 `Cesium.CorridorGraphics` 如果需要创建一条沿着路径延伸的墙体，则可以考虑使用走廊图形 (`CorridorGraphics`)。它允许指定一组经纬度坐标作为路径，并设置宽度和高度属性。 ```javascript var corridorEntity = viewer.entities.add({ corridor : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([ -90.0, 40.0, 0, -80.0, 40.0, 0 ]), width : 200000.0, // 走廊宽度 (米) height : 5000.0 // 高度 (可选参数，默认为零) }, material : Cesium.Color.BLUE.withAlpha(0.5) }); ``` 这里我们构建了一条蓝色半透明的走廊形状物体，它可以被看作是一堵连续变化方向上的墙壁。 #### 使用自定义几何体（Custom Geometry） 对于更加复杂的场景需求，比如倾斜角度不固定的墙面或者带有纹理贴图的情况，可能就需要借助原始几何数据结构来自由设计每一个顶点位置及其法线向量等细节信息了： ```javascript function createWallGeometry(options){ var geometry = new Cesium.GeometryInstance({ geometry : new Cesium.WallGeometry({ positions : options.positions.map(function(pos){return Cesium.Cartographic.toCartesian(Cesium.Ellipsoid.WGS84.cartographicRadiansToCartesians([pos.longitude * Math.PI / 180,pos.latitude*Math.PI/180]));}), maximumHeights : options.maximumHeights || [], minimumHeights : options.minimumHeights || [] }), attributes:{ color:Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(...options.color)) } }); return geometry; } // Example Usage: let customGeomOptions={ 'positions':[ {'longitude':-75,'latitude':40}, {'longitude':-74,'latitude':40} ], 'maximumHeights':[1000], 'minimumHeights':[0], 'color':[1,0,0,.5] }; const primitive=new Cesium.Primitive({ geometryInstances:createWallGeometry(customGeomOptions), appearance:new Cesium.PerInstanceColorAppearance({closed:false}) }); viewer.scene.primitives.add(primitive); ``` 这段脚本提供了一个函数用于生成特定配置下的墙型几何实例对象，并最终添加至视图器中的基本原语集合里显示出来。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值