当前位置: 首页 > news >正文

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-900)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 = []  //将数组清空,不要忘了
};
http://www.lryc.cn/news/356285.html

相关文章:

  • 2023、2024国赛web复现wp
  • day34 贪心算法 455.分发饼干 376. 摆动序列
  • 养老院管理系统基于springboot的养老院管理系统java项目
  • 跳台阶扩展问题
  • 超清高帧,成像升级 | SWIR短波红外相机500万像素992芯片
  • 攻击渗透思考题
  • Flutter 中的 Opacity 小部件:全面指南
  • 【介绍下如何在SQL中添加数据】
  • 【Linux学习】深入了解Linux中进程状态及其转换
  • 【Python设计模式11】建造者模式
  • coredump文件生成配置
  • jmeter线程组(下篇)
  • Stable Diffusion【写实模型】:逼真,逼真,超级逼真的国产超写实摄影大模型万享XL
  • Android 13 配置默认DN
  • 系统开发与运行知识
  • 算法训练 | 二叉树Part1 | 递归遍历、迭代遍历、统一迭代
  • AcWing 2568:树链剖分 ← 线段树+DFS
  • PCIe协议之-DLLP详解
  • Jmeter+prometheus+grafana性能测试
  • Hololens 2 新建自定义按钮
  • 景源畅信:抖音小店新手小白如何做好运营?
  • 力扣 42. 接雨水 python AC
  • The 2022 ICPC Asia Nanjing Regional Contest - External D
  • 2024年蓝桥杯B组C++——复盘
  • 微调Llama3实现在线搜索引擎和RAG检索增强生成功能
  • 【软件工程】【23.04】p1
  • Flutter 中的 ColoredBox 小部件:全面指南
  • 【LeetCode 随笔】面试经典 150 题【中等+困难】持续更新中。。。
  • SwiftUI中AppStorage的介绍使用
  • iCloud 照片到 Android 指南:帮助您快速将照片从 iCloud 传输到安卓手机