cesuim

CongJiYong

已于 2024-06-04 21:45:22 修改

阅读量383

点赞数 2

分类专栏： cesium 文章标签： cesuim

于 2024-05-28 22:05:14 首次发布

本文链接：https://blog.csdn.net/congjiyong/article/details/139254686

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

new Cesium.Color(255,255,0,1),  //颜色
Math.PI/2
 color: Cesium.Color.fromCssColorString("#f40"), //16进制颜色

Cesium中常用的坐标

屏幕坐标（像素）
二维笛卡尔平面坐标，可通过new Cesium.Cartesian2(x,y)创建
笛卡尔空间直角坐标
又称世界坐标，可通过new Cesium.Cartesian3(x,y,z)创建，主要是用来做空间位置的变化，如平移、旋转和缩放等等，它的坐标原点在椭球的中心
地理坐标（弧度）
new Cesium.Cartographic(longitude,latitude,height)

初始化地球

import * as Cesium from "cesium";

import { onMounted } from "vue";
onMounted(() => {
  Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0YTY1Yzc3MS05MWU3LTQxNGQtOGI3ZS04NTVhZjcwZjdjZmMiLCJpZCI6MjE2NjYwLCJpYXQiOjE3MTYyNzQ0MTh9.7EQqzCrI8s0-s76NAQZ3-EwRbhqAQ16FYuVWb1dCwos";
  // arcgis影像图层
  const ersi = new Cesium.UrlTemplateImageryProvider({
    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  });

  const viewer = new Cesium.Viewer("CesiumContainer", {
    terrainProvider: Cesium.createWorldTerrain(),
    // requestWaterMask:true // 开启水
    // imageryProvider: ersi,  //自定义图层
    baseLayerPicker: false, // 关闭图层选择器
    animation: false, // 关闭动画
    timeline: false, // 关闭时间线
    fullscreenButton: false, // 关闭全屏按钮
    homeButton: false,
    sceneModePicker: false, //3d，2d 关闭
    navigationHelpButton: false, //帮助
    geocoder: false, //搜索
    infoBox: false, //隐藏点击信息框
    selectionIndicator: false, //隐藏选择指示器
  });

坐标

//经纬度转笛卡尔坐标
  const position1 = Cesium.Cartesian3.fromDegrees(110, 20,30); //参数为经度，纬度，高度,返回笛卡尔坐标

//转成弧度
var d =45
var rotate = Cesium.Math.toRadians(d) 
//quat为围绕这个z轴旋转d度的四元数
var quat = Cesium.Quaternion.fromAxisAngle(
	Cesium.Cartesian3.UNIT_Z,
	rotate
)
  const position = new Cesium.Cartesian3(106, 29, 50);  //笛卡尔坐标x,y,z
  
  // 笛卡尔转弧度坐标 ,地理坐标（弧度制）
  let position2 = Cesium.Cartographic.fromCartesian(position1); //转成经纬度


  let position3 = ellipsoid.cartesianToCartographic(position1)
//弧度坐标转角度（经纬度坐标）
  // let lon = 180 / Math.PI * position2.longitude;  
  let lon = Cesium.Math.toDegrees(position2.longitude); //longitude经度
  let lat = Cesium.Math.toDegrees(position2.latitude); //latitude纬度
  let height = position2.height
  console.log(lat)
  console.log(lon)
  console.log(position2.height)

屏幕坐标和世界坐标互转
//二维点击屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标）
鼠标点击后的坐标
handel.setInputAction((event)=>{
  //1.鼠标点击后的坐标（像素值）
  var windowPostion = event.position
  var cartesian3 = scene.globe.pick(
	viewer.camera.getPickRay(windowPostion),
	scene
)
})

//三维笛卡尔空间直角坐标转为二维屏幕坐标，结果是Cartesian2对象，取出X,Y即为屏幕坐标
windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene,cartesian3)

相机

  // 相机
  const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000); //经度，纬度，高度

  // setView通过定义相机相机目的地（方向），直接跳转到目的地
  const camera = viewer.camera.setView({
    destination: position,
    orientation: { //相机视角
      //默认（0，-90，0）
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: Cesium.Math.toRadians(0),  //歪头看
    },
  });

相机动画

// 相机切换视角动画
  const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000); //经度，纬度，高度
  viewer.camera.flyTo({
    destination: position,
    duration: 10, //飞行时间
  })

相机锁定视角

  const position2 = Cesium.Cartesian3.fromDegrees(106, 29, 50); //经度，纬度，
  viewer.camera.lookAt(position2,
    new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0),Cesium.Math.toRadians(-90),20000)
  )

实体画点

  // 相机
  const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000); //经度，纬度，高度
  // 实体entity
  // 写法1
  const entity = new Cesium.Entity({
    position: position,
    point: {
      pixelSize: 20, //像素点大小
      color: Cesium.Color.RED, //颜色
    }
  })
  // 添加实体
  viewer.entities.add(entity)
  viewer.zoomTo(entity)  //切换位置
  // 写法2
 viewer.entities.add({
    id:'point',
    position:Cesium.Cartesian3.fromDegrees(106, 29, 50),
    point:{
      pixelSize:20,
      color:Cesium.Color.RED
    }
  })

实体画图片

  const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116, 40, 222),
    billboard: {
      image: "/src/assets/img/doteck_logo.png",
      scale: 0.5,
      color:Cesium.Color.YELLOW
    }
  })
   viewer.zoomTo(billboard)

实体画文字

  // 文字
  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(106, 29, 2222),
    label: {
      text:'丛继永',
      fillColor: Cesium.Color.YELLOW,
      showBackground:true,
      backgroundColor:new Cesium.Color(255,255,0,1),
    }
  })
  viewer.zoomTo(label)

实体画线条


  const polyline = viewer.entities.add({
    polyline:{
      positions:Cesium.Cartesian3.fromDegreesArray([120,20,121,20]),
      width:10,
      material:Cesium.Color.RED
    }
  })
  viewer.zoomTo(polyline)

实体画多边型

// 多边型
  const polygon = viewer.entities.add({
    polygon:{
      hierarchy:{
        positions:Cesium.Cartesian3.fromDegreesArray([120,25,121,25,121,25.5]),
      },
      material:Cesium.Color.RED,
      extrudedHeight:100000,  //拉伸高度
      height:2000,//距离高度
      outline:true,
      outlineColor:Cesium.Color.WHITE,
      fill:false,//是否填充

    }
  })
viewer.zoomTo(polygon)

实体画立方体

//立方体
const box = viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(106, 29, 3000),
  box:{
    dimensions:new Cesium.Cartesian3(100, 200, 3000),//长宽高
    material:Cesium.Color.RED,
  }
})
viewer.zoomTo(box)

实体画矩形

  // 矩形
  const rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(120, 40, 123, 45),
      material: Cesium.Color.RED,
      extrudedHeight: 30000, //拉伸
      material:'src/assets/img/doteck_logo.png'  //图片
    },
  });
  viewer.zoomTo(rectangle);

先定义后添加

 // 声明点
  const point = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(120, 30),
    point: {
      pixelSize: 10,
    },
  });

  viewer.entities.add(point);
  viewer.zoomTo(point);  //跳转

实体添加标注

// 标注
  const billboard = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116, 40, 500),
    billboard: {
      image: "/src/assets/img/doteck_logo.png",
      scale: 0.1,
    },
  });
  viewer.zoomTo(billboard);

多个实体定在一个里面

const bill = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120, 30, 100),
    billboard: {
      image: "/src/assets/img/rotate.png",
      scale: 0.1,
      color: Cesium.Color.YELLOW,
    },
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        120, 30, 100, 120, 30, 0,
      ]),
      material: Cesium.Color.YELLOW,
    },
    label: {
      text: "丛继永家",
      pixelOffset: new Cesium.Cartesian2(0, -50),
    },
  });

删除实体方法

bill = viewer.entities.add({
    id: "point", //增加id
    position: Cesium.Cartesian3.fromDegrees(120, 30, 100),
    billboard: {
      image: "/src/assets/img/rotate.png",
      scale: 0.1,
      color: Cesium.Color.YELLOW,
    },
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        120, 30, 100, 120, 30, 0,
      ]),
      material: Cesium.Color.YELLOW,
    },
    label: {
      text: "丛继永家",
      pixelOffset: new Cesium.Cartesian2(0, -50),
    },
  });




const toDel = () => {
  console.log(234);
  // 直接删除
  // viewer.entities.remove(bill);
  // id删除方法
  // viewer.entities.removeById("point");
  // 先查后删
  const entity = viewer.entities.getById("point");
  viewer.entities.remove(entity);
  // 删除所有
  viewer.entities.removeAll();
  
};

实体分组删除


  let point1 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120.0001, 30),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 10,
    },
  });
  let point2 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120.0002, 30),
    point: {
      color: Cesium.Color.RED,
      pixelSize: 10,
    },
  });
  blueList.push(point1);
  blueList.push(point2);

const toDel = () => {
  blueList.map((item) => {
    viewer.entities.remove(item);
  });
  blueList = []  //将数组清空，不要忘了
};

primitive实体

 // primitive
  // 更接近底层
  // 可以绘制高级图形
  // 由Geometry(几何形状)、（appearance）外观组成
  // 1. Draw a translucent ellipse on the surface with a checkerboard pattern
  // 1. Draw a translucent ellipse on the surface with a checkerboard pattern
  // 1. Draw a translucent ellipse on the surface with a checkerboard pattern
  var instance = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
      center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
      semiMinorAxis: 500000.0,
      semiMajorAxis: 1000000.0,
      rotation: Cesium.Math.PI_OVER_FOUR,
      vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
    }),
    id: "object returned when this instance is picked and to get/set per-instance attributes",
  });
  viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: instance,
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType("Checkerboard"),
      }),
    })
  );

  // viewer.scene.primitives.add(instance);
  viewer.zoomTo(instance);

primitive实体，绑定两个

  var instance1 = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
      center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
      semiMinorAxis: 500000.0,
      semiMajorAxis: 1000000.0,
      rotation: Cesium.Math.PI_OVER_FOUR,
      vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
    }),
    id: "object returned when this instance is picked and to get/set per-instance attributes",
  });
  var instance2 = new Cesium.GeometryInstance({
    geometry: new Cesium.EllipseGeometry({
      center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0),
      semiMinorAxis: 500000.0,
      semiMajorAxis: 1000000.0,
      rotation: Cesium.Math.PI_OVER_FOUR,
      vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
    }),
    id: "object returned when this instance is picked and to get/set per-instance attributes",
  });

 viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance1,instance2],
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType("Checkerboard"),
      }),
    })
  );

3D贴图

 // tileset加在primitives里面
    const tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: '/src/assets/b3dm/tileset.json',
            url: Cesium.IonResource.fromAssetId(216660),
        })
    );

点击变色

  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    let position = viewer.scene.pickPosition(movement.position);
    if (Cesium.defined(position)) {
        let pick = viewer.scene.pick(movement.position);//拾取
        if(pick && pick.id){
            pick.id.point.color = Cesium.Color.RED;
        }
      //如果有这个坐标
      console.log(position);
    }




  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);```

点击事件

let arr = []
const line = viewer.entities.add({
    polyline: {
        positions:[],
        material: Cesium.Color.RED,
        width: 10,
    }
})
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    let position = viewer.scene.pickPosition(movement.position);
    if (Cesium.defined(position)) {
        // let pick = viewer.scene.pick(movement.position);//拾取
        // if(pick && pick.id){
        //     pick.id.point.color = Cesium.Color.RED;
        // }

        // 返回一个笛卡尔坐标
        let position = viewer.scene.pickPosition(movement.position); //拾取 坐标
          if(position){
            viewer.entities.add({
              position: position,

                point:{
                  color:Cesium.Color.RED,
                  pixelSize:30

                }
              
            })
            arr.push(position)
            line.polyline.positions = arr
          }

      //如果有这个坐标
      console.log(position);
    }




  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);  //事件类型左击

  // handler可以使用多个事件
  handler.setInputAction((movement) => {
     //结束所以事件 且只保留一条线
      console.log(1234)
     viewer.entities.removeAll()
     viewer.entities.add(line)
     handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
     handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
      
  },Cesium.ScreenSpaceEventType.RIGHT_CLICK);  //事件类型右击

let lastPick;
  handler.setInputAction((movement) => {
    //结束所以事件 且只保留一条线
    console.log("move");
    let pick = viewer.scene.pick(movement.endPosition); //移动事件中没有event.position
    if (pick) {
      if (lastPick) {
        lastPick.color = Cesium.Color.WHITE;
      }
      pick.color = Cesium.Color.BLUE;
      lastPick = pick;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

model模型引入

  const position = Cesium.Cartesian3.fromDegrees(106, 29, 4000);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    Cesium.HeadingPitchRoll.fromDegrees(90, 0, 0)
  );

  const entity = viewer.entities.add({
    position,  //位置
    orientation, //方向
    model: {
      uri: "/src/assets/models/CesiumAir/Cesium_Air.glb",
      minimumPixelSize: 128, //模型最小像素大小
    },
  });

变换工具类

Cesium.Cartesian3(相当于Point3D)
Cesium.Matrix3(33矩阵，用于描述旋转变换）
Cesium.Matrix4(44矩阵，用于描述旋转加平移变换）
Cesium.Quaternion(四元数，用于描述围绕某个向量旋转一定的角度的变换)
Cesium.Transforms(包含将位置转换为各种参考系的功能)
Cesium.SceneTransforms

在这里插入图片描述
用3加载