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.mzph.cn/diannao/18041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python编程实战】基于Python语言实现学生信息管理系统

🎩 欢迎来到技术探索的奇幻世界👨‍💻 📜 个人主页:一伦明悦-CSDN博客 ✍🏻 作者简介: C软件开发、Python机器学习爱好者 🗣️ 互动与支持:💬评论 &…

C++的第一道门坎:类与对象(二)

一.类中生成的默认成员函数详解 0.类的6个默认成员函数 编译器会给类生成六个默认成员函数,在类中即使我们什么都不做,也会自动生成。 默认成员函数:用户没有显式实现,编译器会自动生成的成员函数称为默认成员函数。 下面我们逐…

重学java 50 集合 上

路随远&#xff0c;行则将至&#xff1b;路虽难&#xff0c;做则必成 —— 24.5.26 一、Collection接口 1.概述: 单列集合的顶级接口 2.使用 Collection<泛型>对象名new 实现类集合对象<>() <E>:泛型,决定集合中的元素都是啥类型的,必须指定的是引用…

网络渗透day2

Windows登录的明文密码存储过程和密文存储位置 明文密码存储过程&#xff1a; Windows操作系统不会以明文形式存储用户密码。相反&#xff0c;当用户设置或更改密码时&#xff0c;系统会对密码进行哈希处理&#xff0c;然后存储其哈希值。哈希处理的目的是为了提高密码的安全性…

Android性能优化方案

1.启动优化&#xff1a; application中不要做大量耗时操作,如果必须的话&#xff0c;建议异步做耗时操作2.布局优化&#xff1a;使用合理的控件选择&#xff0c;少嵌套。&#xff08;合理使用include,merge,viewStub等使用&#xff09;3.apk优化&#xff08;资源文件优化&#…

在 Vue 中实现表单校验失败后页面滚动到错误处

在 Web 应用程序中&#xff0c;表单验证是保证用户输入的正确性和完整性的关键部分。当用户提交表单时&#xff0c;我们经常需要验证表单数据&#xff0c;并在发现错误时向用户提示。在 Vue.js 中&#xff0c;实现表单验证通常是使用一些流行的库&#xff0c;比如 VeeValidate …

Linux安装Nginx脚本

Hello &#xff0c; 我是恒。 由于有一个脚本网页的仓库&#xff0c;开发必不可少的是自动化安装脚本 该shell脚本是根据某篇文章的脚本改进优化后写出来的&#xff0c;增加了软链接创建和系统服务注册的功能。 同时我也书写了PostgreSQL和Nvm的脚本&#xff0c;请在脚本专栏阅…

Github2024-05-21 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-21统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10C项目1TypeScript项目1youtube-dl - 从YouTube和其他网站下载视频的命令行程序 创建周期:4951 天开发语言:Python协议类型:The …

同时安装python2 和python3

最近的项目因为工具的原因 需要同时安装python2 和python3 我又想学着使用python 写东西 导致遇到了很多问题 记录下来 1 同时安装 python2 和python 1.1 安装完把/确认 Path 环境变量里 同时有python2,python2\Scripts和python3 ,python3\Scripts四个环境变量 修改python3…

LabVIEW通过OPC与PLC通讯

使用LabVIEW通过OPC与PLC&#xff08;可编程逻辑控制器&#xff09;通讯是一种常见的工业自动化解决方案。以下是详细的过程介绍&#xff0c;帮助理解并实现该通讯。 1. 理解OPC与PLC OPC&#xff1a;OPC是一种工业通讯协议&#xff0c;旨在实现不同硬件和软件之间的互操作性…

【SpringBoot笔记44】SpringBoot多数据源配置(方式一:配置多个mapper扫描不同的包路径实现多数据源配置)

这篇文章,主要介绍SpringBoot多数据源配置(方式一:配置多个mapper扫描不同的包路径实现多数据源配置)。 目录 一、多数据源配置 1.1、多数据源介绍 1.2、搭建基础工程

AIGC(人工智能生成内容)行业现在适合进入吗

AIGC&#xff08;人工智能生成内容&#xff09;行业现在适合进入吗 发展前景 随着深度学习、自然语言处理&#xff08;NLP&#xff09;、计算机视觉等人工智能技术的飞速发展&#xff0c;AIGC在文本、图像、音频、视频等多个领域都取得了显著的成果&#xff0c;为行业发展提供…

AWS存储之Amazon Aurora

Amazon Aurora是亚马逊自研提供的一种高性能、高可用性的关系型数据库引擎&#xff0c;兼容MySQL和PostgreSQL&#xff0c;提供了与这两种数据库引擎兼容的功能&#xff0c;同时具有更高的性能和可靠性。 Amazon Aurora在全球范围内提供无与伦比的高性能和可用性&#xff0c;完…

3步骤找回丢失文件!EasyRecovery让你轻松应对数据灾难!

EasyRecovery&#xff1a;数据丢失的终结者&#xff0c;您的数字世界守护神 在数字化时代&#xff0c;数据已经成为我们生活的一部分。无论是个人照片、重要文件还是企业资料&#xff0c;数据都扮演着重要的角色。然而&#xff0c;意外删除、格式化、系统崩溃或病毒攻击等原因导…

云原生架构内涵_2.云原生架构原则

云原生架构本身作为一种架构&#xff0c;也有若干架构原则作为应用架构的核心架构控制面&#xff0c;通过遵从这些架构原则可以让技术主管和架构师在做技术选择时不会出现大的偏差。 1.服务化原则 当代码规模超出小团队的合作范围时&#xff0c;就有必要进行服务化拆分了&…

QT的互斥量和信号量

文章目录 一、mutex互斥量1、mutex2、相关成员函数 二、semaphore信号量1、信号量2、成员函数 三、Linux内核中的互斥锁、读写锁、自旋锁、信号量四、QT简单日志类代码 一、mutex互斥量 1、mutex 目的是保护对象、数据结构或代码段&#xff0c;以便一次只有一个线程可以访问它…

云易办springboot+vue后端

springbootvue云易办后端项目完成 一.创建项目 创建父项目&#xff1a;yeb&#xff0c; 使用spring Initializr&#xff0c;完成创建之后删除无用文件夹&#xff0c;作为父项目 添加packaging <packaging>pom</packaging>二.创建子模块&#xff1a;yeb-server …

Day 56 647. 回文子串 516.最长回文子序列

回文子串 给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示例 1&#xff1a; 输入&#xff1a;“abc”输出&#xff1a;3解释&#xf…

蓝桥杯—SysTick中断精准定时实现闪烁灯

在嵌入式系统中&#xff0c;SysTick_Handler 是一个中断服务例程&#xff08;Interrupt Service Routine, ISR&#xff09;&#xff0c;用于处理 SysTick 定时器的中断。SysTick 定时器通常用于提供一个周期性的定时中断&#xff0c;可以用来实现延时或者周期性任务。 SysTick…

SQL 语言:数据控制

文章目录 概述授权&#xff08;GRANT)销权&#xff08;REVOKE&#xff09;总结 概述 SQL语言中的数据控制权限分配是数据库管理的重要组成部分&#xff0c;它涉及到如何合理地为用户分配对数据库资源的访问和使用权限。 权限类型&#xff1a;在SQL中&#xff0c;权限主要分为…