Ceisum创建点，标签，线，模型

原创已于 2023-05-10 13:17:52 修改 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-05-03 19:05:28 首次发布

本文展示了如何使用Cesium.js库在三维地球上创建点、标签、线以及添加模型，并提供了调整模型方向和改变高度的方法。示例代码详细说明了各个属性的设置。

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

1.点

createPoint(position) {
  return new Cesium.Entity({
    position: position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.YELLOW,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
  });
},

2.标签

createLabel(position, text) {
  return new Cesium.Entity({
    position: position,
    label: {
      text: text,
      font: '16px sans-serif',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      pixelOffset: new Cesium.Cartesian2(0, -25),
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
  });
},

3.线

function createLine(positions) {
  return new Cesium.Entity({  // 创建一个新的 Cesium 实体对象
    polyline: {
      positions: positions,  // 指定线条的顶点坐标
      width: 5,  // 设置线条的宽度
      material: new Cesium.PolylineOutlineMaterialProperty({  // 设置线条的材质，这里使用了一个带有轮廓的材质
        color: Cesium.Color.YELLOW,  // 设置线条的颜色
        outlineWidth: 2,  // 设置轮廓的宽度
        outlineColor: Cesium.Color.BLACK  // 设置轮廓的颜色
      }),
      clampToGround: true,  // 指定线条是否贴着地面
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 100000.0)  // 指定线条的显示和隐藏距离
    }
  });
}

若想直接添加可替换为

return _this.viewer.entities.add({})

4.模型

    let rocket=  this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(104.13958486185706,30.675933695326567,35),
      orientation: orientation,
        model: {
        uri: "./launchvehicle.glb",
        scale: 1,
        minimumPixelSize: 70,
        maximumScale: 70,
      },
      })

调整方向

 function setModelDirection( longitude, latitude, direction){
    var center = Cesium.Cartesian3.fromDegrees(longitude, latitude,0);
    var heading = Cesium.Math.toRadians(direction);
    var pitch = -80;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(center, hpr);
 
    return orientation;
}
var orientation = setModelDirection(104.13958486185706, 30.675933695326567, 90);

改变高度

    function update(){
     h+=step
     rocket.position=Cesium.Cartesian3.fromDegrees(104.13958486185706,30.675933695326567,h)
     requestAnimationFrame(update)
    }
    update()