Cesium 之 Polyline

最新推荐文章于 2025-06-17 11:28:18 发布

原创最新推荐文章于 2025-06-17 11:28:18 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

初学Cesium 专栏收录该内容

2 篇文章

订阅专栏

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

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

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 到底有何不同，还是不太理解，待深入学习