cesuim

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

初始化地球

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); //参数为经度，纬度，高度,返回笛卡尔坐标const position = new Cesium.Cartesian3(106, 29, 50);  //笛卡尔坐标x,y,z// 笛卡尔转弧度坐标let position2 = Cesium.Cartographic.fromCartesian(position1); //转成经纬度
//弧度坐标转角度// let lon = 180 / Math.PI * position2.longitude;  let lon = Cesium.Math.toDegrees(position2.longitude); //longitude经度let lat = Cesium.Math.toDegrees(position2.latitude); //latitude纬度console.log(lat)console.log(lon)console.log(position2.height)

相机

  // 相机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// 写法1const entity = new Cesium.Entity({position: position,point: {pixelSize: 20, //像素点大小color: Cesium.Color.RED, //颜色}})// 添加实体viewer.entities.add(entity)viewer.zoomTo(entity)  //切换位置// 写法2viewer.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", //增加idposition: 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 = []  //将数组清空，不要忘了
};