Cesium学习三：使用entity绘制polyline

已于 2022-09-26 21:30:54 修改
阅读量7.7k 收藏 27
点赞数 9
分类专栏： gis 文章标签： Cesium polyline entity 绘制 线
于 2022-09-21 22:29:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014523388/article/details/126981107
版权

一、线绘制代码

上一篇介绍了点的绘制，本篇介绍线的绘制，具体代码如下（别忘了使用你自己的Token，基础环境不知道怎么布置的请参考开发环境搭建），绘制的结果如下图所示。

<!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.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div>
    <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = '你的Token'; //替换成你的Token
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:true,//控制右上角第一个位置的查找工具
        homeButton:true,//控制右上角第二个位置的home图标
        sceneModePicker:true,//控制右上角第三个位置的选择视角模式，2d，3d
        baseLayerPicker:true,//控制右上角第四个位置的图层选择器
        navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮
        animation:false,//控制左下角的动画器件
        timeline:false,//控制下方时间线
        fullscreenButton:false,//右下角全屏按钮
        vrButton:false,//右下角vr按钮
        shouldAnimate: true,//允许动画同步
        infoBox : true, //不显示点击要素之后显示的信息
        terrainProvider: Cesium.createWorldTerrain()
    });

    viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息

    let polyline = viewer.entities.add({
        name: "polyline",
        polyline: {
            show: true, //是否显示，默认显示
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                70, 40, 600000, 
                75, 30, 400000,
                120, 25, 200000
            ]),
            width: 2, //线的宽度（像素），默认为1
            granularity: Cesium.Math.RADIANS_PER_DEGREE,
            material: Cesium.Color.BLUE, //线的颜色，默认为白色
            // depthFailMaterial: Cesium.Color.RED, //线被遮挡部分的颜色，默认为空（不显示被遮挡的部分），设置后可显示被遮挡的部分
            arcType: Cesium.ArcType.NONE, //线的地理类型，NONE表示纯直线，GEODESIC表示为测地线，RHUMB表示等角航线，默认为测地线
            // arcType: Cesium.ArcType.GEODESIC,
            // arcType: Cesium.ArcType.RHUMB,
            clampToGround: false, //是否贴地，默认为否
            shadows: Cesium.ShadowMode.DISABLED, //是否显示光照阴影，默认为否
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0), //显示的视角距离条件，在该范围内显示，范围不显示，默认为空
            classificationType: Cesium.ClassificationType.BOTH,
            zIndex: 0, //显示深度，越大表示图层在上
        }
    })

    let polyline_clampToGround_zindex0 = viewer.entities.add({
        name: "polyline_clampToGround_zindex0",
        polyline: {
            show: true, //是否显示，默认显示
            positions: Cesium.Cartesian3.fromDegreesArray([
                70, 40, 
                75, 30,
                120, 25
            ]),
            width: 2, //线的宽度（像素），默认为1
            material: Cesium.Color.YELLOW, //线的颜色，默认为白色
            clampToGround: true,
            zIndex: 0
            // zIndex: 1
        }
    })

    let polyline_clampToGround_zindex1 = viewer.entities.add({
        name: "polyline_clampToGround_index1",
        polyline: {
            show: true, //是否显示，默认显示
            positions: Cesium.Cartesian3.fromDegreesArray([
                70, 40, 
                75, 30,
                120, 25
            ]),
            width: 2, //线的宽度（像素），默认为1
            material: Cesium.Color.ORANGE, //线的颜色，默认为白色
            clampToGround: true,
            zIndex: 1
            // zIndex: 0
        }
    })

    let polyline_geodesic = viewer.entities.add({
        name: "polyline_geodesic",
        polyline: {
            show: true, //是否显示，默认显示
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                70, 40, 600000, 
                75, 30, 400000,
                120, 25, 200000
            ]),
            width: 2, //线的宽度（像素），默认为1
            granularity: Cesium.Math.RADIANS_PER_DEGREE,
            material: Cesium.Color.RED, //线的颜色，默认为白色
            // depthFailMaterial: Cesium.Color.RED, //线被遮挡部分的颜色，默认为空（不显示被遮挡的部分），设置后可显示被遮挡的部分
            // arcType: Cesium.ArcType.NONE,
            arcType: Cesium.ArcType.GEODESIC,
            // arcType: Cesium.ArcType.RHUMB,
            clampToGround: false,
            shadows: Cesium.ShadowMode.DISABLED,
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0),
            classificationType: Cesium.ClassificationType.BOTH,
            zIndex: 0,
        }
    })

    let polyline_rhumb = viewer.entities.add({
        name: "polyline_rhumb",
        polyline: {
            show: true, //是否显示，默认显示
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                70, 40, 600000, 
                75, 30, 400000,
                120, 25, 200000
            ]),
            width: 2, //线的宽度（像素），默认为1
            granularity: Cesium.Math.RADIANS_PER_DEGREE,
            material: Cesium.Color.GREEN, //线的颜色，默认为白色
            // depthFailMaterial: Cesium.Color.RED, //线被遮挡部分的颜色，默认为空（不显示被遮挡的部分），设置后可显示被遮挡的部分
            // arcType: Cesium.ArcType.NONE,
            // arcType: Cesium.ArcType.GEODESIC,
            arcType: Cesium.ArcType.RHUMB,
            clampToGround: false,
            shadows: Cesium.ShadowMode.DISABLED,
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0),
            classificationType: Cesium.ClassificationType.BOTH,
            zIndex: 0,
        }
    })

    // // 绘制经纬网
    // for(let i=-180; i<180; i+=10){
    //     viewer.entities.add({
    //         name: "meridian",
    //         polyline: {
    //             show: true, //是否显示，默认显示
    //             positions: Cesium.Cartesian3.fromDegreesArrayHeights([
    //                 i, -90, 0, 
    //                 i, 90, 0,
    //             ]),
    //             width: 2, //线的宽度（像素），默认为1
    //             granularity: Cesium.Math.RADIANS_PER_DEGREE,
    //             material: Cesium.Color.WHITE, //线的颜色，默认为白色
    //             // depthFailMaterial: Cesium.Color.RED, //线被遮挡部分的颜色，默认为空（不显示被遮挡的部分），设置后可显示被遮挡的部分
    //             // arcType: Cesium.ArcType.NONE,
    //             arcType: Cesium.ArcType.GEODESIC,
    //             // arcType: Cesium.ArcType.RHUMB,
    //             clampToGround: false,
    //             shadows: Cesium.ShadowMode.DISABLED,
    //             // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0),
    //             classificationType: Cesium.ClassificationType.BOTH,
    //             zIndex: 0,
    //         }
    //     })
    // }

    viewer.flyTo(polyline);
    </script>
</body>
</html>

polyline

二、图解参数

2.1 name

polyline的名称，在鼠标点击点弹出的infoBox中会显示该名称。
name

2.2 polyline

线的绘制参数

2.2.1 show

是否显示，true为显示，false为不显示，默认为显示

2.2.2 positions

线的坐标，为笛卡尔坐标系的地心坐标，可以有两种形式

一种是带高程值的，如Cesium.Cartesian3.fromDegreesArrayHeights([第1个点的经纬度高程, 第2个点的经纬度高程, ...])

另一种是不带高程的，只有经纬度，如Cesium.Cartesian3.fromDegreesArrayHeights([第1个点的经纬度, 第2个点的经纬度, ...])，此时的高程默认为0，可配合clampToGround参数让线贴地

2.2.3 width

线的宽度，单位为像素，默认为1，值越大，线越宽，下图分别是宽度为2和5的对比
width=2
width=5

2.2.4 granularity

线的粒度，具体含义还不太理解，后续会继续研究，默认为Cesium.Math.RADIANS_PER_DEGREE

2.2.5 material

线的样式，颜色也是其中的一种，目前可以先把这个参数当作设置颜色用，默认为白色，如上图中的线的颜色为蓝色，对应的值为Cesium.Color.BLUE，也可以使用RGBA的格式（A表示透明度），如上图的蓝色可用new Cesium.Color(0, 0, 1, 1)表示（rgb的取值为0-1，如果是0-255的可以除以255进行归一化）。
下图展示了半透明（A=0.5）颜色的显示效果，对应的值为new Cesium.Color(0, 0, 1, 0.5)

线透明

2.2.6 depthFailMaterial

线被遮挡部分的颜色，默认为空，即不显示被遮挡的部分，设置后可显示被遮挡的部分。如下图所示，当设置了depthFailMaterial: Cesium.Color.RED后，被遮挡的部分呈现了红色
不显示遮挡
显示遮挡

2.2.7 arcType

线的地理类型，NONE表示纯直线，GEODESIC表示为测地线，RHUMB表示等角航线，默认为测地线

测地线可理解为过球心的圆弧，表示球面上两点之间最短的距离，等角航线比较复杂，可参考下图理解，即线与经线的交点处的切线与经线的角度都相同
rhumb
白色的线为每隔10度的经线
蓝色的线表示NONE，线为直线，贯穿了地球
红色的线表示GEODESIC，线为曲线，其圆心为地心，其在地表的投影为蓝线（贴地时）
绿色的线表示RHUMB，线为曲线，其与白色经线的夹角都一致（先这么理解吧）
对比

2.2.8 clampToGround

线是否贴地，默认为否。下图为clampToGround: true对于的效果，可见线都沿着地形绘制
贴地

2.2.9 shadows

是否显示线在光照下的阴影，默认为否

2.2.10 distanceDisplayCondition

线在该视角距离内可见，其他距离不可见，默认为空，即一直可见。如new Cesium.DistanceDisplayCondition(100.0, 2000000.0)表示在视角离线的距离为100到2000000之间时可看到该线，其他距离不显示该线，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能

2.2.11 classificationType

分类是否影响地形（TERRAIN）、3dtiles（CESIUM_3D_TILE）或两者都有(BOTH)，默认为Cesium.ClassificationType.BOTH，此参数我还不太理解，需要继续研究

2.2.12 zIndex

显示深度，越大表示图层在上，当两条线重叠时可用此参数表示优先显示哪个
上述代码中polyline_clampToGround_zindex0和polyline_clampToGround_zindex1都是贴地的线，两者重合，前者颜色为黄色，深度为0，后者颜色为橙色，深度为1，所以橙色的线优先显示，如下图
在这里插入图片描述
如果把两者的zIndex调换一下，则变成黄色优先显示，如下图
在这里插入图片描述

小何又沐风
关注
专栏目录
022：cesium 根据坐标，显示折线Polyline
大剑师兰特的GIS世界
03-02 489
第022个示例的目的是介绍如何在vue+cesium中根据坐标来显示polyline，理解并设置API参数。
Cesium 动态Polyline绘制
01-20
Cesium 用Entity绘制polyline，如果使用CallbackProperty方法进行动态绘制，depthFailMaterial属性将失效。 从官方github上的issue找了替代的方法。 动态Primitive线的绘制 // 绘制方法 this._candidateLinePrimitive = this.scene.primitives.add( new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGe
Cesium在线绘制PolyLine折线
热门推荐
Bret的技术栈
01-16 1万+
使用Cesium.CallbackProperty可以实时更改Geometry.position等参数，从而达到绘制的效果。1.封装PolyLine对象var PolyLinePrimitive = (function(){ function _(positions){ this.options = { polyline : {
cesium通过entity的polyline，或者primitive加载线条，实现轨迹线
最新发布
weixin_56584894的博客
09-05 407
用entity的ployline方法，只适用少量的值，如果数据量很大，进一步用此方法，否则帧率不保。
Cesium在模型表面画线（polyline）
GIS小虫的博客
11-10 3418
RT
cesium中Entity的PolylineGraphics添加线
tjx1997的博客
08-27 1183
利用PolylineGraphics可以添加线元素。
Cesium 画折线 polyline
liubangbo的专栏
05-29 1036
Cesium 画折线非常简单， 鼠标点击获取经纬度， 把这些经纬度存放在数组中。每次鼠标点击先清空之前画的折线，然后重新画。所用到的API 有Cesium.Cartesian3.fromDegreesArrayHeights。注意：在使用此代码时，需要替换自己的accessToken。
cesium在模型上画线
weixin_35754676的博客
12-27 1219
Cesium是一款用于建立Web地图应用程序的开源软件库。它提供了丰富的API来绘制各种几何图形，包括线。 要在Cesium上绘制线，你需要首先导入Cesium库，然后在地图上添加一个图层。然后，你可以使用Cesium的Polyline类来创建线，并使用Polyline.positions属性设置线的路径。 例如，下面是一个简单的例子，展示了如何在Cesium上绘制一条从纬度40度，经度-100度...
Cesium 之 Polyline
wangxuefei1的博客
07-23 2380
可通过 entities 和 Czml 创建
cesium绘制折线_Cesium 绘制对象Entity
weixin_35224206的博客
01-14 997
添加点，线，圆，多边形，飞机，广告牌，方盒，球体，圆柱，圆柱，管道，围墙等以及模型的添加，删除html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.btnDiv{position: absolute;top: 0;}.btnDiv2{position: absolut...
Cesium动态绘制面，线，点.vue
09-17
c
Polyline 折线图
07-06
最简单的折线图，根据y值上的最大差值来觉得Y周上的单位值
cesium绘制工具
05-05
提供动态绘制点线面功能，开启绘制，鼠标点击绘制点，多点成线、面
CesiumJS【Basic】- #031 绘制虚线（Entity方式）
AlanL的专栏
07-01 115
绘制虚线（Entity方式）
CesiumJS【Basic】- #029 绘制实线（Entity方式）
AlanL的专栏
07-01 75
绘制实线（Entity方式）
Cesium快速上手4-Polylines图元使用讲解
sky___Show的博客
04-22 1562
【代码】Cesium快速上手4-Polylines图元使用讲解。
Cesium 创建线
前端小陈的成长记录
04-08 226
Cesium 创建线
cesium绘制折线_polyline
weixin_35823099的博客
01-14 1989
有人可以告诉我这段代码有什么问题吗？Cesium.Math.setRandomNumberSeed(1234);var viewer = new Cesium.Viewer('cesiumContainer');var entities = viewer.entities;var boxes = entities.add(new Cesium.Entity());var polylines = n...
使用cesium绘制类似高德地图的 导航方向线
05-31
要在Cesium中绘制导航方向线，可以按照以下步骤进行： 1. 获取起点和终点的经纬度坐标，并创建Cesium的Viewer对象。 2. 创建一个Polyline对象，它将表示导航方向线。 3. 设置Polyline对象的属性，例如颜色、宽度、样式等。 4. 将起点和终点的经纬度坐标添加到Polyline对象的positions数组中。 5. 将Polyline对象添加到Cesium的Entity对象中，并将Entity添加到Viewer中进行显示。 以下是示例代码： ```javascript // 获取起点和终点的经纬度坐标 var startLon = 116.397128; var startLat = 39.916527; var endLon = 116.397477; var endLat = 39.918102; // 创建Cesium的Viewer对象 var viewer = new Cesium.Viewer('cesiumContainer'); // 创建Polyline对象 var polyline = new Cesium.Polyline({ positions: Cesium.Cartesian3.fromDegreesArray([startLon, startLat, endLon, endLat]), width: 5, material: new Cesium.PolylineOutlineMaterialProperty({ color: Cesium.Color.YELLOW, outlineWidth: 2, outlineColor: Cesium.Color.BLACK }) }); // 将Polyline对象添加到Entity中 var entity = viewer.entities.add({ name: 'Navigation Line', polyline: polyline }); // 设置相机视角 viewer.zoomTo(entity); ``` 这将在Cesium中创建一个黄色的导航方向线，线宽为5像素，带有黑色边框。你可以根据需要自定义线的颜色、宽度和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小何又沐风

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值