Cesium实现贴地线

简介: 这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。

顾名思义就是贴着地画一条线,用到的组件是polyline,这里和Threejs的用法不大相同,cesium通常都用类似json的方式设置组件属性,类似百度echarts里设置图表的用法。下这里给线设置点,点是有经纬度组成,组件会根据点的顺序连接成一条线。并且可以设置线的宽度,颜色等。下面是源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器,这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer'); 
    //添加一个线的组价
    var yellowLine = viewer.entities.add({
        name: 'Red line',//线的名称
        polyline: {
            //这里添加线的经纬度,两个为一组一个经度一个维度
            positions: Cesium.Cartesian3.fromDegreesArray([
                116.751937,36.553571,
                118.76873,34.11446,
                120.807120,31.351219,
                86.041075,44.305886
            ]),
            width: 2,//设置线段恶宽
            material: Cesium.Color.YELLOW//设置线的颜色
        }
    });

  </script>
 </div>
</body>
</html>

效果图 屏幕截图 2023-09-03 211622.png 如有问题可以在评论区留言

相关文章
|
JavaScript 前端开发 定位技术
Cesium介绍和入门
这篇文章介绍了Cesium的基本概念及其在Web开发中的应用,包括如何集成Cesium并使用它来创建和展示3D地图。
1227 4
Cesium介绍和入门
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2872 0
cesium添加实体不被地形遮挡的参数设置
Cesium开发:模型实体高亮
Cesium开发:模型实体高亮
1001 0
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4270 0
干货!解决Cesium中Entity移动漂移的问题
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
1891 0
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
3409 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
4619 10
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
766 2
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
554 2
Cesium导入geojson数据
Cesium添加3DTile
这篇文章介绍了如何在Cesium中添加3DTile内容,以增强三维地理空间数据的表现,并提供了实现的具体步骤和代码示例。
381 1
Cesium添加3DTile