多个立方体盒子组成

news2024/10/25 17:36:45

效果:

知识了解:

  在同一水平上,盒子经纬度计算:经度有误差,纬度没有误差

  纬度计算:lat=50/111320 约等于0.000449

  经度计算:lon=50/111320*cos(纬度) 约等于0.000519°

一个立方体:

  // 添加一个立方体
  const redbox = viewer.entities.add({
    // 名称
    name: "Red box with black outline",
    // 位置(经度、纬度、高度)
    position: Cesium.Cartesian3.fromDegrees(116.397, 39.917, 0),
    box: {
      // 设置立方体的尺寸(长宽高)数值单位是米
      dimensions: new Cesium.Cartesian3(40.0, 30.0, 50.0), // 立方体尺寸
      // withAlpha(0.5)表示 50% 的透明度
      material: Cesium.Color.RED.withAlpha(0.5), // 立方体颜色
      outline: true, // 是否显示边框
      outlineColor: Cesium.Color.BLACK, // 边框颜色
    },
  });
  // 将视图聚焦到创建的立方体
  viewer.zoomTo(redbox);

多个立方体:

封装生成多个或者一个立方体的方法:

//BoxEntityManager.js
import * as Cesium from "cesium";

class BoxEntityManager {
  constructor(viewer) {
    this.viewer = viewer;
    this.boxEntities = [];
  }

  // 创建单个立方体
  createBox (position, dimensions, color, name) {
    const boxEntity = this.viewer.entities.add({
      name: name || `Box-${this.boxEntities.length}`,
      position: position,
      box: {
        dimensions: dimensions || new Cesium.Cartesian3(116.397, 39.917, 100),
        material: color || Cesium.Color.fromRandom({ alpha: 1.0 }),
        outline: true,
        outlineColor: Cesium.Color.BLACK
      }
    });

    this.boxEntities.push(boxEntity);
    return boxEntity;
  }

  // 创建多个立方体
  createMultipleBoxes (positionsArray) {
    positionsArray.forEach((pos, index) => {
      this.createBox(
        Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.height),
        pos.dimensions,
        pos.color,
        pos.name
      );
    });
  }

  // 根据名称删除立方体
  removeBoxByName (name) {
    const entity = this.boxEntities.find(e => e.name === name);
    if (entity) {
      this.viewer.entities.remove(entity);
      this.boxEntities = this.boxEntities.filter(e => e.name !== name);
    }
  }

  // 删除所有立方体
  removeAllBoxes () {
    this.boxEntities.forEach(entity => {
      this.viewer.entities.remove(entity);
    });
    this.boxEntities = [];
  }

  // 聚焦到所有立方体
  zoomToBoxes () {
    this.viewer.zoomTo(this.viewer.entities);
  }
}

// 导出类
export default BoxEntityManager;

计算经纬度加减50米后的盒子坐标:

// calculateCoordinateOffset.js
/**
 * 计算经纬度加减50米后的坐标
 * @param {number} longitude - 原始经度
 * @param {number} latitude - 原始纬度
 * @returns {Object} - 返回加减50米后的坐标对象
 */
export function calculateCoordinateOffset (longitude, latitude) {
  // 地球半径(米)
  const EARTH_RADIUS = 6371000;
  // 偏移距离(米)
  const OFFSET_METERS = 50;

  // 计算纬度1度对应的距离(米)
  const LAT_METERS_PER_DEGREE = 111320;
  // 计算经度1度对应的距离(米)(需要根据纬度计算)
  const LON_METERS_PER_DEGREE = LAT_METERS_PER_DEGREE * Math.cos(latitude * Math.PI / 180);

  // 计算偏移的经纬度值
  const latOffset = OFFSET_METERS / LAT_METERS_PER_DEGREE;
  const lonOffset = OFFSET_METERS / LON_METERS_PER_DEGREE;

  return {
    longitude: {
      minus: longitude - lonOffset,  // 经度减50米
      plus: longitude + lonOffset    // 经度加50米
    },
    latitude: {
      minus: latitude - latOffset,   // 纬度减50米
      plus: latitude + latOffset     // 纬度加50米
    }
  };
}

使用:

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
import BoxEntityManager from './js/boxEntities.js';
import { calculateCoordinateOffset } from "./js/coordinateOffset.js";
onMounted(() => {
  // 使用Cesium的Ion服务进行认证
  Cesium.Ion.defaultAccessToken =
    "认证码";

  // 创建一个Viewer实例
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 使用默认的影像图层和地形图层
    terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true }),
    // 查找位置工具
    geocoder: false,
    // 返回首页按钮
    homeButton: false,
    // 场景视角
    sceneModePicker: false,
    // 图层选择
    baseLayerPicker: false,
    // 导航帮助信息
    navigationHelpButton: false,
    // 动画播放速度
    animation: false,
    // 时间轴
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // VR按钮
    vrButton: false,
  });
  // 去除logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // 飞入
  var destination = Cesium.Cartesian3.fromDegrees(116.397, 39.917, 1000.0);
  viewer.camera.flyTo({
    destination: destination,
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0,
    },
  });

  // 创建BoxEntityManager实例
  const boxManager = new BoxEntityManager(viewer);
  const res = calculateCoordinateOffset(116.397, 39.917,);
//打印计算加减五十米的经纬度
  console.log(res, 'res');
  // 定义立方体数据
  const boxesData = [
    {
      lon: 116.397,
      lat: 39.9170,
      height: 0,
      dimensions: new Cesium.Cartesian3(50.0, 50.0, 50.0),
      color: Cesium.Color.RED.withAlpha(0.8),
      name: 'RedBox'
    }, {
      lon: 116.397,
      lat: 39.917449,
      height: 0,
      dimensions: new Cesium.Cartesian3(50.0, 50.0, 50.0),
      color: Cesium.Color.GREEN.withAlpha(0.8),
      name: 'GreenBox'
    },
    {
      lon: 116.397,
      lat: 39.917,
      height: 50,
      dimensions: new Cesium.Cartesian3(50.0, 50.0, 50.0),
      color: Cesium.Color.BLUE.withAlpha(0.8),
      name: 'BlueBox'
    }
  ];

  // 创建多个立方体
  boxManager.createMultipleBoxes(boxesData);

  // 聚焦到立方体
  boxManager.zoomToBoxes();
});

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2223442.html

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

相关文章

微信小程序性能优化 ==== 合理使用 setData 纯数据字段

目录 1. setData 的流程 2. 数据通信 3. 使用建议 3.1 data 应只包括渲染相关的数据 3.2 控制 setData 的频率 3.3 选择合适的 setData 范围 3.4 setData 应只传发生变化的数据 3.5 控制后台态页面的 setData 纯数据字段 组件数据中的纯数据字段 组件属性中的纯数据…

Hadoop-001-本地虚拟机环境搭建

一、安装VMware 官方下载VMware&#xff1a; https://vmware.mdsoft.top/?bd_vid5754305114651491003 二、下载镜像文件 阿里云镜像仓库&#xff1a; https://mirrors.aliyun.com/centos/ 本文档使用 CentOS-7-x86_64-DVD-1810-7.6.iso 搭建虚拟机 三、搭建虚拟机 1、编辑…

vue3 腾讯地图 InfoWindow 弹框

1、vue项目index.html引入地图js 2、页面使用 <script setup lang"ts"> import { useMapStore } from //store;defineOptions({ name: PageMap }); const emits defineEmits([update:area, update:address, update:latitude, update:longitude]); const prop…

【Java】SpringBoot实现MySQL数据库的增删查改

目录 1. 项目介绍 2. 相关代码 2.1 项目配置 2.2 SQL语句 2.3 数据访问层 2.4 业务逻辑层 2.5 Web表现层 3. 结果展示 4. 源码获取 1. 项目介绍 SpringBoot是一个轻量级框架&#xff0c;简化了Spring应用的开发和配置。相比较SSM框架&#xff0c;极大的简化了SSM中XM…

Android Navigation传递复杂参数(自定义)

打开要添加参数的navigation文件 使用Design视图 点击右侧Arguments的添加("")按钮 根据自定义类所继承的序列化接口选择这两项其中的一个 选择或者在搜索框检索你的类&#xff0c;然后点击OK&#xff0c;回到前一界面点击ADD即可 其他的操作就跟基本类型用法一样了

C++中指针类型、引用类型、值类型

定义&#xff1a; 1. 带 * 的声明&#xff1a;指针类型 声明方式&#xff1a;MyClass* obj; 是一个 指针类型&#xff0c;表示 obj 是一个指针&#xff0c;可以指向 MyClass 类型的对象。 指针特点&#xff1a; 指针存储的是对象的地址&#xff0c;可以为空&#xff08;null…

新的Midjourney就是一个增强版的Photoshop,你现在可以轻松的用它换衣服、换发型了

好久没有聊 Midjourney 了&#xff0c;昨晚他们发布了一项引人注目的新功能&#xff1a;AI 图像编辑&#xff0c;一个基于网页的加强版的 Photoshop 呼之欲出&#xff0c;让我大为震撼&#xff0c;也让用户们赞叹不已。 基于现有图像进行参考&#xff0c;进而生成新的图片&…

谈一谈 Netty 的内存管理 —— 且看 Netty 如何实现 Java 版的 Jemalloc

本文基于 Netty 4.1.112.Final 版本进行讨论 在之前的 Netty 系列中&#xff0c;笔者是以 4.1.56.Final 版本为基础和大家讨论的&#xff0c;那么从本文开始&#xff0c;笔者将用最新版本 4.1.112.Final 对 Netty 的相关设计展开解析&#xff0c;之所以这么做的原因是 Netty 的…

学习--四元数介绍

2022年的草稿箱里的一篇 四元数由William Rowan Hamilton发现 定义与复数类似&#xff0c;有三个虚部 q a b i c j d k qabicjdk qabicjdk 其中 i 2 j 2 k 2 i j k − 1 i^2j^2k^2ijk-1 i2j2k2ijk−1 四元数的模长&#xff1a; 四维的长度 加减法&#xff1a; 对应分…

十年编程路,一生踏征途

时光荏苒流逝&#xff0c;白驹匆匆过隙&#xff0c;不知不觉间&#xff0c;我已经在程序开发这条道路上走过了整整十年。从最初的求学&#xff0c;到如今成为一名较为资深的职业开发者&#xff0c;这一路充满了挑战、学习、成长与感动。在这1024程序员节的特殊时刻&#xff0c;…

信息安全工程师(69)数字水印技术与应用

前言 数字水印技术是一种在数字媒体中嵌入特定信息的技术&#xff0c;这些信息可以是版权信息、元数据等。 一、数字水印技术的定义与原理 数字水印技术&#xff08;Digital Watermarking&#xff09;是将一些标识信息&#xff08;即数字水印&#xff09;直接嵌入数字载体&…

发布者Publisher、订阅者Subscriber的编程实现+自定义话题消息编程实现

1.发布者Publisher的编程实现 1.创建功能包 cd ~/catkin_ws/src catkin_create_pkg learning_topic rospy roscpp std_msgs geometry_msgs turtlesim 2.创建发布者代码&#xff08;C&#xff09; ——文件名为velocity_publisher.cp /*************************************…

【Vue】word / excel / ppt / pdf / 视频(mp4,mov) 预览

文件预览 Vue3一. word二. excel三. ppt四. pdf4.1 vue-pdf-embed4.2 iframe 五. 视频六&#xff1a;扩展——kkFileView Vue3 一. word 安装&#xff1a;npm install docx-preview父页面 <template><div><DocPreviewv-if"filePath.includes(docx)"…

E. Sakurako, Kosuke, and the Permutation (置换环) Codeforces Round 981 (Div. 3)

哈哈哈, 之前做过一道置换环的题目, 但是当时不知道这是置换环 昨天写这道题目时老眼昏花, 读错题目, 如今一朝有悟,甄至化境 原题 E. Sakurako, Kosuke, and the Permutation 思路 这道题目与排序的不同在于, 如果第 i 个数不等于 i, 但是第 i 个数指向的数等于 i, 那么也…

基于RabbitMQ,Redis,Redisson,RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍(以12306为主题)

目录 1. 延迟关闭订单 1.1 订单延时关闭功能技术选型 1.1.1 定时任务 1.1.2 RabbitMQ 1.1.3 Redis 过期监听 1.1.4 Redisson 1.1.5 RocketMQ 1.2 RocketMQ订单延时关闭发送方实现 1.3 RocketMQ订单延时关闭的消费方实现 1. 延迟关闭订单 用户发起订单后&#xff0c;如…

基于SSM的BBS社区论坛系统源码

运行环境&#xff1a;ideamysql5.7jdk8maven 使用技术&#xff1a;ssmmysqlshirolayui 功能模块&#xff1a;用户管理、模板管理、帖子管理、公告管理、权限管理等

使用 v-html 指令渲染的标签, 标签内绑定的 click 事件不生效

背景 在项目开发中&#xff0c;实现用户友好的输入交互是提升用户体验的关键之一。例如&#xff0c;在客服对话框中&#xff0c;其中有包含多个快捷选项用于快速问答&#xff0c;每个快捷选项都是一个可点击的按钮&#xff0c;并需要绑定点击事件来执行相应操作。然而&#xf…

Android Junit 单元测试 | 依赖配置和编译报错解决

问题 为什么在依赖中添加了testImplement在build APK的时候还是会报错&#xff1f;是因为没有识别到test文件夹是test源代码路径吗&#xff1f; 最常见的配置有: implementation - 所有源代码集(包括test源代码集)中都有该依赖库.testImplementation - 依赖关系仅在test源代码…

【CSS in Depth 2 精译_054】8.2 CSS 层叠图层(cascade layer)的推荐组织方案

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第三部分 现代 CSS 代码组织】 ✔️【第八章 层叠图层及其嵌套】 ✔️ 8.1 用 layer 图层来操控层叠规则&#xff08;上篇&#xff09; 8.1.1 图层的定义&#xff08;上篇&#xff09;8.1.2 图层的…

华为云实战杂记

配置nginx服务器 首先我们拿到一台服务器时&#xff0c;并不知道系统是否存在Nginx我们可以在Linux命令行执行如下命令查看 find / -name nginx* find / -name nginx* 查找所有名字以nginx开头的文件或者目录&#xff0c;我们看看系统里面都有哪些文件先&#xff0c;这样可以快…