cesium绘制点、线、面，坐标之间的转换

我爱吃干果

已于 2024-07-31 10:11:20 修改

阅读量240

点赞数 2

分类专栏： cesium 文章标签：前端 javascript 数据库 typescript

于 2024-07-31 09:52:29 首次发布

本文链接：https://blog.csdn.net/qq_65325528/article/details/140813943

版权

cesium 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图形绘制

绘制点

  const options = {
    show:true,
    color:Cesium.Color.WHITE,
    outlineWidth:10,
    outlineColor:Cesium.Color.BLUE,
  }
  let pointer = Cesium.Cartesian3.fromDegrees(-107.00,40.0,3.0);
  let point = viewer.entities.add({
    id:'pointer',
    name:"这是点",
    description:"pointer_这是点",
    position:pointer,
    point:options
  });
  viewer.zoomTo(point);

绘制线

let start = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,3000.0)
  let end = Cesium.Cartesian3.fromDegrees(-125.59777, 40.03883);
  viewer.entities.add({
    id:'line',
    name:"Line",
    description:"这是线",
    position:Cesium.Cartesian3.fromDegrees(-107.00,40.0,3.0),
    polyline:{
      show:true,
      positions:[start,end],
      material: Cesium.Color.RED,
      width:3
    }
  })
  viewer.camera.flyTo({
    destination:start,
    clampToGround:true,
    complete:()=>{
    },
    duration:3
  })

绘制面

let start = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,3000.0)
let start1 = Cesium.Cartesian3.fromDegrees(-65.59777, 35.03883,3000.0)
let start2 = Cesium.Cartesian3.fromDegrees(-60.59777, 20.03883,3000.0)
let end = Cesium.Cartesian3.fromDegrees(-125.59777, 40.03883);
let polygon = viewer.entities.add({
    id:"polygon",
    name:"polygon",
    description:"这是面",
    position:Cesium.Cartesian3.fromDegrees(-107.00,40.0,3.0),
    polygon:{
      height:10,
      hierarchy:{
        positions:[start,start1,start2,end]
      },
      outline:true,
      material:Cesium.Color.fromCssColorString("#098").withAlpha(0.2),
      outlineColor:Cesium.Color.BLACK,
      arcType:Cesium.ShadowMode.CAST_ONLY
    }
  })
  viewer.zoomTo(polygon)

动态绘制线，绘制面也是相同的道理

let drawPolygonObj:any = null;
const drawLines = ()=>{
  let f = viewer.entities.getById('drawLinesObj');
  if(f){
    alert("当前id名的图像已存在")
  }
  drawPolygonObj  = viewer.entities.add({
    id:"drawLinesObj",
    name:"动态绘制的线",
    polyline:{
      material:Cesium.Color.BEIGE,
      arcType:Cesium.ArcType.GEODESIC
    }
  })
}

// 定义将点击的每个点保存起来
let arr:number[] = [];
const addEvent = ()=>{
  let handle = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // 添加右击方法
  handle.setInputAction((event)=>{
    let p = viewer.scene.pick(event.position);
    if(Cesium.defined(p)){
      console.log(p)
      // alert("右键事件触发，当前位置是："+event.position.x+"和"+event.position.y)
    }
    if(drawPolygonObj){
      // 右击结束绘制，情况对象和数组
      arr = []
      drawPolygonObj = null;
    }
  },Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  // 添加左击方法
  handle.setInputAction((event:any)=>{
    if(drawPolygonObj){
      // 屏幕坐标转经纬度，具体方法下面会有
      let jw = coverCoordinate(event.position)
      arr.push(Cesium.Cartesian3.fromDegrees(jw!.lon,jw!.lat))
      drawPolygonObj._position = arr[0];
      drawPolygonObj.polyline ? (drawPolygonObj.polyline.positions = arr) : (drawPolygonObj.polygon.hierarchy = {positions:arr});
    }
  },Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

绘制平面，并在平面中添加视频

  var videoElement = document.createElement('video');
  videoElement.src = 'http://localhost:8001/1.mp4'; // 替换为你的视频文件路径
  videoElement.loop = true; // 让视频循环播放
  videoElement.muted = true; // 设置视频静音（如果需要）
  videoElement.controls = true;
  videoElement.play(); // 播放视频
  viewer.entities.add({
    id:"plane",
    name:"视频牌",
    position:Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,3000.0),
    plane:{
      material:videoElement,
      plane : Cesium.Plane.ORIGIN_ZX_PLANE,
      dimensions:Cesium.Cartesian2.fromElements(100,100),
      outlineColor:Cesium.Color.BLACK.withAlpha(0.6),
      outlineWidth:10
    }
  })
  viewer.camera.flyTo({
    destination:Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,3000.0),
    clampToGround:true,
    complete:()=>{
    },
    duration:3
  })

绘制path路径，一般用于路径回放

// 数据源
let dataSource = [
  [117.46031867100001,31.143882499000003,11.147400000001653],
  [117.45946237800001,31.143739847000063,11.108399999997346],
  [117.45859906800001,31.143571198000075,10.890799999993761],
  [117.45789337300005,31.143422075000046,11.12170000000333],
  [117.45711196300001,31.143350937000037,11.545700000002398],
  [117.45620292500007,31.143325030000028,11.5298999999940867],
  [117.45545284400009,31.143363754000063,11.038100000005215],
  [117.45473256600008,31.143448056000068,10.86380000000645],
  [117.45399052200003,31.143623321000064,11.345600000000559],
  [117.45347615200001,31.143811356000007,11.687300000005052],
  [117.45292459000007,31.144031608000034,12.106100000004517],
  [117.45192097000006,31.144426226000064,12.842399999994086],
  [117.45065835500009,31.144954275000032,12.712299999999232],
  [117.44980033200011,31.145266268000057,12.504899999999907],
  [117.44943370300007,31.145413392000023,12.731599999999162],
  [117.44920128900003,31.145382554000037,12.967699999993783],
  [117.44897692800009,31.144980649000047,14.909599999999045],
  [117.44872415000009,31.144495984000006,14.558999999999383],
  [117.44851592000009,31.144125416000065,14.410999999992782],
  [117.44848024700002,31.143928280000007,14.4758000000001631],
  [117.44948683700011,31.143507935000006,14.5074000000022351],
  [117.45089297600009,31.142959855000072,14.290399999998044],
  [117.45149371900004,31.142693826000027,14.127099999997881],
  [117.45166848000008,31.142571364000048,15.526100000002771],
  [117.45163585200001,31.142433625000024,14.034100000000044],
  [117.45082070700005,31.140899211000033,13.2890999999945051],
  [117.45082070700005,31.140899211000033,13.289099999994505]
]
// 将数据源的每天数据转换为Cartesian3类型的对象
  let data = dataSource.map(item=>{
    return Cesium.Cartesian3.fromDegrees(item[0],item[1],item[2]);
  })

// 添加时间对象
  let property = new Cesium.SampledPositionProperty();
  let startTime = new Date();
  let time = startTime.getTime();
  let stopTime:Date = new Date();
  dataSource.forEach((item,index)=>{
    let date = new Date(time + index * 5000);
    stopTime = date;
    property.addSample(Cesium.JulianDate.fromDate(date),Cesium.Cartesian3.fromDegrees(item[0],item[1],item[2]));
  })
  
  property.setInterpolationOptions({
    interpolationDegree:0.0001,
    interpolationAlgorithm:Cesium.LagrangePolynomialApproximation
  })

// 先绘制一条线，等会就安装这条线的路径行走
  let ploygons = viewer.entities.add({
    id:"ploygon100",
    name:"这是多边形",
    position:Cesium.Cartesian3.fromDegrees(polygonData[0][0],polygonData[0][1],polygonData[0][2]),
    polygon:{
      hierarchy:{
        positions:polygonData.map(t=>Cesium.Cartesian3.fromDegrees(t[0],t[1],t[2]))
      },
      height:5,
      fill:true,
      extrudedHeight:60,
      material:Cesium.Color.RED.withAlpha(0.4),
      arcType:Cesium.ArcType.GEODESIC
    }
  })
// 绘制回放线
  let ent = viewer.entities.add({
    id:"path01",
    name:"回放线",
    availability : new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start:Cesium.JulianDate.fromDate(startTime),
        stop:Cesium.JulianDate.fromDate(stopTime)
      })
    ]),
    position:property,
    orientation:new Cesium.VelocityOrientationProperty(property), // 控制模型的转向
    model:{
      uri:"http://localhost:80/dragon.gltf",
      clampAnimations:true,
      minimumPixelSize:70,
      maximumScale:70
    },
    label:{
      text:"",
      fillColor:Cesium.Color.RED,
      font:"12px 微软雅黑",

    },
    path:{
      leadTime:0,
      trailTime:1,
      material:new Cesium.ImageMaterialProperty({
        image:"http://localhost:8001/1.jpg"
      }),
      width:10
    },
  })

// 对时钟的onTick进行监听
viewer.clock.onTick.addEventListener((tick:any)=>{
    取出当前的大地坐标
    let p = ent.position.getValue(tick.currentTime);
    // 大地坐标转经纬度
    let cart = worldCoverLonLat(p);
    // 经纬度转屏幕坐标
    let posi = coverLonlatToEvent({lon:cart.longitude,lat:cart.latitude});
    let text = Number(cart.longitude).toFixed(6) +","+ Number(cart.latitude).toFixed(6);
    // 给正在移动的图形更改文字
    ent.label.text = text;

    // 视角实时跟随图形
    viewer.trackedEntity = ent;
    更新cesium当前的时间，调整为开始移动的时间
    viewer.clock.currentTime = Cesium.JulianDate.fromDate(startTime)
    viewer.clock.stopTime = Cesium.JulianDate.fromDate(stopTime)
    viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
    viewer.clock.shouldAnimate = true;

})

绘制可以旋转的圆

// 声明初始的旋转角度
let rotate = 0;
let ellipse = viewer.entities.add({
    id:"addRatoteCircle",
    name:"添加的旋转圆",
    position:Cesium.Cartesian3.fromDegrees(116.46, 39.92),
    ellipse:{
      semiMinorAxis: 1000.0,
        semiMajorAxis: 1000.0,
        material: new Cesium.ImageMaterialProperty({
            image: 'http://localhost:8001/1.jpg'
      })
    }
  })
  viewer.zoomTo(ellipse)
  _setRotate()
  function _setRotate(){
    ellipse.ellipse.stRotation = new Cesium.CallbackProperty(function(){
      rotate+=1;
      if(rotate>=360){
        rotate = 0
      }
      return Cesium.Math.toRadians(rotate);  // 转弧度
    },false)
  }

删除图形

  // 通过cesium提供的getById方法找到指定图形，然后直接调用remove方法删除即可
  let polygon = viewer.entities.getById('point');
  viewer.entities.remove(polygon)

坐标转换

type PositionType = {
  x:number,
  y:number
}
type PositionResult = {
  lon:number,
  lat:number
}
// 屏幕坐标转经纬度
const coverCoordinate = (position:PositionType):PositionResult=>{
  if(!position) return;
    let cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);
    let ellipsoid = viewer.scene.globe.ellipsoid;
    let cartographic = ellipsoid.cartesianToCartographic(cartesian);
    let lon = Cesium.Math.toDegrees(cartographic.longitude);  // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度
    return {
      lon,lat
    }
}
// 经纬度转屏幕坐标
const coverLonlatToEvent = (position:PositionResult):PositionType=>{
  let c3 = Cesium.Cartesian3.fromDegrees(position.lon,position.lat);
   //笛卡尔坐标转屏幕坐标
  let c2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, c3);
  return {
    x:c2!.x,
    y:c2!.y
  }
}
// 世界大地坐标转经纬度
const worldCoverLonLat = (position:Cesium.Cartesian3)=>{
  var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
  cartographic.longitude = Cesium.Math.toDegrees(cartographic.longitude);
  cartographic.latitude = Cesium.Math.toDegrees(cartographic.latitude);
  return cartographic;
}