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地图。
1255 4
Cesium介绍和入门
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2931 0
cesium添加实体不被地形遮挡的参数设置
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4321 0
干货!解决Cesium中Entity移动漂移的问题
Cesium开发:模型实体高亮
Cesium开发:模型实体高亮
1026 0
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
4703 10
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
3455 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
605 2
Cesium导入geojson数据
|
9月前
|
数据可视化 前端开发 JavaScript
地图可视化的艺术:深入比较Mapbox、OpenLayers、Leaflet和Cesium,不同场景下应如何选择地图库
选择合适的地图库取决于项目的需求、团队的技术栈以及预算等因素。简单来说,新手可以从leaflet入手;GIS开发使用openlayers会更顺手一些;mapbox适应大多数2D和2.5D场景,可视化效果好,但是不开源;cesium更侧重于3D场景。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
809 2
|
前端开发 Linux iOS开发
使用Python推送FLV流
本文介绍如何使用Python推送FLV流,涵盖环境准备、FFmpeg安装、创建Flask应用及前端页面,最后提供运行服务器和查看结果的步骤,适合初学者参考实践。
525 0