022：cesium 根据坐标，显示折线Polyline

已于 2024-05-30 18:31:55 修改
阅读量909 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # cesium综合教程200+ 文章标签： cesium折线 cesium雪花宝典 大剑师 cesium自学 cesium教程
于 2023-03-02 17:06:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129304758
本文由大剑师兰特分享，详细解释如何在Vue项目中使用Cesium绘制折线。通过示例代码和配置说明，快速了解并实现折线展示。文章还提供了相关文章参考和专栏目标，涵盖Cesium的各种应用场景和技术点。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+cesium中根据坐标来显示polyline，理解并设置API参数

直接复制下面的 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添加实体 zIndex polyline
最新发布
m0_73136840的博客
06-17 376
为了添加的实体有个排序，利用zIndex对二维的实体进行排序
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 修改鼠标样式
062：cesium设置泛光折线材质（material-6）
大剑师兰特的GIS世界
05-20 1047
第062个本示例的目的是介绍如何在vue+cesium中设置泛光折线材质，请参考源代码，了解PolylineGlowMaterialProperty的应用。
Cesium中级开发教程之四十七：自定义XYZ坐标轴
Cesium开发工程师
03-28 168
在 Cesium 中，默认的坐标系是右手笛卡尔坐标系，X 轴指向东，Y 轴指向北，Z 轴垂直于地表向上，但是我们可以自定义坐标轴来表示空间关系。
cesium态势标绘 （ 折线）
God's asylum的博客
05-18 746
vue + cesium折线标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
Cesium基础-（Entity）-（Polyline）
纸飞机的旅行的博客
11-25 253
里边包含Vue、React框架代码详细步骤、以及代码详细解释公众号：GISer世界三维模型地址 ：https://download.youkuaiyun.com/download/weixin_44857463/89986869。
使用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
二维/三维/哥伦布视图模式的切换
const geometryInstance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: this.allPositions, width: 4, vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT, }) }); const appearance = new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.fromCssColorString("#fefe00") }) }); const polylinePrimitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: appearance, asynchronous: false // 同步加载确保立即显示 }); this.trackLine = this.viewer.scene.primitives.add(polylinePrimitive); 给他增加贴地和贴地的效果
04-28
<think>好的，我现在要解决用户的问题：在Cesium中为PolylineGeometry添加贴地效果，并提供一个示例。我需要先理解用户的需求，然后结合提供的引用资料和我的知识来给出正确的回答。 首先，用户提到了PolylineGeometry，而之前的回答可能涉及到Entity的贴地效果，比如引用[3]中的模型使用heightReference: Cesium.HeightReference.CLAMP_TO_GROUND。但PolylineGeometry属于Primitive API，需要不同的处理方式。 我记得在Cesium中，Entity API和Primitive API是不同的层次。Entity更高级，而Primitive更底层，控制更细。贴地效果通常通过设置clampToGround属性，但可能对于Primitive来说需要不同的方法。 查看用户提供的引用，引用[4]提到了addEntity支持entities的配置，其中可能有关于polyline的配置。但用户现在用的是PolylineGeometry，属于Primitive，所以可能需要使用GroundPolylinePrimitive。 根据我的知识，Cesium的GroundPolylinePrimitive是专门用于贴地的折线，需要结合PolylineGeometry和GroundPolylineGeometry。例如，创建Primitive时使用GroundPolylineGeometry，并设置相应的外观，如PolylineMaterialAppearance。 然后，我需要验证是否正确。比如，PolylineGeometry本身可能不支持clampToGround，而GroundPolylineGeometry是专门处理贴地的。需要确保在代码中使用正确的几何体和图元类型。 另外，用户可能需要示例代码，所以我要写出如何构造坐标点，创建几何体，实例化图元，并添加到场景中。同时，可能需要设置材质，比如颜色和宽度。 还需要注意，使用GroundPolylinePrimitive需要引入相应的模块，比如'cesium/GroundPolylinePrimitive'，或者确保正确加载了Cesium的库。 最后，对比Entity的方式，因为用户之前可能用过Entity的贴地，比如引用[3]中的heightReference，所以需要说明两种方法的区别，Primitive更底层，性能可能更好，适合大量数据。 现在需要整理步骤，确保代码正确，并引用相关资料中的内容，比如参考引用[3]中的贴地设置，但指出这里是不同的API。可能引用中的示例没有直接提到PolylineGeometry的贴地，所以需要依赖自己的知识。 总结：用户需要使用PolylineGeometry实现贴地，正确的方法是使用GroundPolylinePrimitive和GroundPolylineGeometry，并提供代码示例，解释两种方法（Entity和Primitive）的区别，以及注意事项如Z-fighting的避免。</think>在Cesium中为$PolylineGeometry$实现贴地效果，需要通过$GroundPolylinePrimitive$结合$GroundPolylineGeometry$实现，这是Primitive API层级的贴地解决方案。以下是具体实现方法和示例： --- ### 一、实现步骤 1. **定义坐标点** 使用$Cartesian3$定义折线路径的三维坐标点集合，例如： ```javascript const positions = Cesium.Cartesian3.fromDegreesArrayHeights([ 116.39, 39.91, 0, // 北京 121.47, 31.23, 0 // 上海 ]); ``` 2. **创建几何体** 使用$GroundPolylineGeometry$包裹$PolylineGeometry$，启用贴地属性： ```javascript const geometry = new Cesium.GroundPolylineGeometry({ positions: positions, width: 5, // 线宽 loop: false // 是否闭合 }); ``` 3. **构建图元对象** 通过$GroundPolylinePrimitive$加载几何体并设置材质： ```javascript const primitive = new Cesium.GroundPolylinePrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometry }), appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType('Color', { color: Cesium.Color.RED }) }) }); viewer.scene.primitives.add(primitive); ``` --- ### 二、对比Entity API实现方式 若使用**Entity API**更简单，直接设置$clampToGround$属性即可： ```javascript const entity = viewer.entities.add({ polyline: { positions: positions, width: 5, material: Cesium.Color.BLUE, clampToGround: true // 关键贴地参数[^3] } }); ``` --- ### 三、关键差异说明 | 特性 | Entity API | Primitive API | |---------------------|--------------------------------|--------------------------------| | **实现复杂度** | 简单，适合快速开发 | 复杂，需手动控制几何体和外观 | | **性能** | 适合少量实体 | 适合大规模数据（如万级线段） | | **贴地控制** | 通过`clampToGround`直接启用 | 需使用`GroundPolylineGeometry` | --- ### 四、注意事项 1. **Z-fighting问题** 贴地折线可能与地形产生闪烁，可通过设置`zIndex: 1`提升渲染优先级[^1]。 2. **坐标系精度** 建议使用`Cesium.Cartographic.fromDegrees`转换经纬度，避免精度丢失[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值