Cesium 之 Polyline

Cesium中entities与czml的区别探究
本文探讨了Cesium中使用entities和czml创建3D地理图形的区别。entities主要用于单个实体的创建和控制,如红线上显示的文本标签;而czml则适合批量数据的导入,用于描绘路径。通过示例代码展示了如何使用entities创建线段,并使用czml绘制多段线。作者表示对两者差异仍有待深入理解。
部署运行你感兴趣的模型镜像

1. 使用entities创建

var viewer = new Cesium.Viewer("cesiumContainer");

let a = Cesium.Cartesian3.fromDegrees(116.445663,39.984186) 
let b = Cesium.Cartesian3.fromDegrees(116.611238,40.001875) 
let c = Cesium.Cartesian3.fromDegreesArray([116.445663,39.984186,116.611238,40.001875])

var redLine = viewer.entities.add({
  
  name: "Red line on terrain",
  position:a,
  polyline: {
    show:false,
    positions: c,
    width: 5,
    material: Cesium.Color.RED,
    clampToGround: true,
  },
  label:{
    text:"测试"
  }
});
//-75, 35, -125, 35, -125, 37,-75, 37

setTimeout(()=>{
  redLine.polyline.show=true
},2000)
console.log(c)
console.log(Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35, -125, 37,-75, 37]))

viewer.zoomTo(viewer.entities);

2. 使用czml创建

this.ljCzml = new Czml({
       name: 'ljCzml',
       isHeight: false
})
paths.forEach((_item,_idx)=>{
      if(_idx<item.path.length-1){
            let start = this.LngLatPoint.toGPSPoint(_item.lng, _item.lat)
            let end =this.LngLatPoint.toGPSPoint(item.path[_idx+1].lng, item.path[_idx+1].lat)
                  //绘制线
                   let obj = {
                         id:'line_'+_idx,
                         name:'redline_'+_idx,
                         polyline : {
                                positions : {
                                       cartographicDegrees : [start.lng,start.lat, 0, end.lng,end.lat, 0]
                                },
                                material: {
                                        solidColor: {
                                            color: {
                                                rgba: [255, 0, 0, 255],
                                            },
                                        },
                                 },
                                 width :4,
                                clampToGround : true,
                          }
                  }//obj结束
                            
                  czml.push(obj)
          }//if结束
})//forEach结束

this.ljCzml.load(czml)

本周疑问,czml和entities 到底有何不同,还是不太理解,待深入学习

您可能感兴趣的与本文相关的镜像

Facefusion

Facefusion

AI应用

FaceFusion是全新一代AI换脸工具,无需安装,一键运行,可以完成去遮挡,高清化,卡通脸一键替换,并且Nvidia/AMD等显卡全平台支持

Cesium 中使用 `polyline` 绘制地图线条是一种常见的需求,尤其是在需要展示地理轨迹、路线或连接多个地理点的场景中。以下是如何使用 `polyline` 在 Cesium 中绘制地图线条的详细方法。 ### 基本使用方法 Cesium 提供了 `Entity` 和 `Primitive` 两种方式来绘制 `polyline`。这里主要介绍使用 `Entity` 的方式,因为它更简单直观,适合大多数应用场景。 #### 1. 创建 Viewer 实例 首先,需要创建一个 `Cesium.Viewer` 实例,作为 Cesium 地图的容器。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); ``` #### 2. 使用 Entity 绘制 Polyline 接下来,可以通过创建 `Entity` 并设置其 `polyline` 属性来绘制线条。以下是一个简单的示例,展示如何绘制一条从北京到上海的黄色线条: ```javascript const entity = viewer.entities.add({ polyline: { positions: [ Cesium.Cartesian3.fromDegrees(116.4074, 39.9042), // 北京 Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) // 上海 ], color: Cesium.Color.YELLOW, width: 5 } }); ``` #### 3. 设置 ZIndex 控制显示优先级 当多条 `polyline` 重叠时,可以通过设置 `zIndex` 属性来控制它们的显示优先级。`zIndex` 值越大,图层越靠上显示。 ```javascript const yellowPolyline = viewer.entities.add({ polyline: { positions: [ Cesium.Cartesian3.fromDegrees(116.4074, 39.9042), // 北京 Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) // 上海 ], color: Cesium.Color.YELLOW, width: 5, zIndex: 0 } }); const orangePolyline = viewer.entities.add({ polyline: { positions: [ Cesium.Cartesian3.fromDegrees(116.4074, 39.9042), // 北京 Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) // 上海 ], color: Cesium.Color.ORANGE, width: 5, zIndex: 1 } }); ``` 在上述示例中,`orangePolyline` 的 `zIndex` 设置为 `1`,而 `yellowPolyline` 的 `zIndex` 设置为 `0`,因此橙色线条会优先显示在黄色线条之上。 #### 4. 设置贴地属性 如果希望线条贴合地面,可以设置 `clampToGround` 属性为 `true`。 ```javascript const clampToGroundPolyline = viewer.entities.add({ polyline: { positions: [ Cesium.Cartesian3.fromDegrees(116.4074, 39.9042), // 北京 Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) // 上海 ], color: Cesium.Color.RED, width: 5, clampToGround: true } }); ``` ### 进阶功能 #### 动态更新 Polyline 如果需要动态更新 `polyline` 的位置或其他属性,可以通过修改 `Entity` 的 `polyline` 属性来实现。 ```javascript // 动态更新位置 clampToGroundPolyline.polyline.positions = [ Cesium.Cartesian3.fromDegrees(116.4074, 39.9042), // 北京 Cesium.Cartesian3.fromDegrees(113.2644, 23.1291) // 广州 ]; ``` #### 控制地球交互 在某些场景下,可能需要禁止用户对地球的旋转、平移、缩放等操作。可以通过以下代码实现: ```javascript viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁止旋转 viewer.scene.screenSpaceCameraController.enableTranslate = false; // 禁止平移 viewer.scene.screenSpaceCameraController.enableZoom = false; // 禁止缩放 viewer.scene.screenSpaceCameraController.enableTilt = false; // 禁止倾斜 viewer.scene.screenSpaceCameraController.enableLook = false; // 禁止观察 ``` 如果需要恢复这些操作,可以将上述属性设置为 `true`。 ### 总结 通过 `Entity` 的 `polyline` 属性,可以轻松地在 Cesium 中绘制地图线条,并通过 `zIndex` 和 `clampToGround` 等属性控制线条的显示效果和行为。动态更新 `polyline` 的功能也为实时数据展示提供了便利。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值