Vue.js2+Cesium1.103.0 十五、绘制视锥,并可实时调整视锥姿态

Vue.js2+Cesium1.103.0 十五、绘制视锥,并可实时调整视锥姿态

Demo

<template>
  <div
    id="cesium-container"
    style="width: 100%; height: 100%;"
  />
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable new-cap */
/* eslint-disable no-unused-vars */
/**
 * 根据两个坐标,计算连接的线段与正北的夹角
 *
 */
import * as turf from '@turf/turf'
export default {
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
    window.$InitMap()
    viewer.camera.flyTo({
      destination: Cesium.Rectangle.fromDegrees(100, 10, 120, 70)
    })

    const altitude = 100000
    const distance = 1000
    const pointO = {
      longitude: 116.407387,
      latitude: 39.904179,
      altitude: altitude
    }
    const pointN = {
      label: 'N 0°',
      longitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        0
      ).geometry.coordinates[0],
      latitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        0
      ).geometry.coordinates[1],
      altitude: altitude
    }
    const pointE = {
      label: 'E 90°',
      longitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        90
      ).geometry.coordinates[0],
      latitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        90
      ).geometry.coordinates[1],
      altitude: altitude
    }
    const pointS = {
      label: 'S 180°',
      longitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        180
      ).geometry.coordinates[0],
      latitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        180
      ).geometry.coordinates[1],
      altitude: altitude
    }
    const pointW = {
      label: 'W 270°',
      longitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        270
      ).geometry.coordinates[0],
      latitude: turf.rhumbDestination(
        turf.point([pointO.longitude, pointO.latitude]),
        distance,
        270
      ).geometry.coordinates[1],
      altitude: altitude
    }
    const list = [pointN, pointE, pointS, pointW]
    for (let index = 0; index < list.length; index++) {
      const point = list[index]
      viewer.entities.add(
        new Cesium.Entity({
          position: Cesium.Cartesian3.fromDegrees(
            point.longitude,
            point.latitude,
            point.altitude
          ),
          label: {
            font: '14px sans-serif',
            text: point.label,
            fillColor: new Cesium.Color.fromCssColorString('#fff'),
            outlineColor: new Cesium.Color.fromCssColorString('#fff'),
            outlineWidth: 1,
            // verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            showBackground: true
          },
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              pointO.longitude,
              pointO.latitude,
              pointO.altitude,
              point.longitude,
              point.latitude,
              point.altitude
            ]),
            width: 10,
            material: new Cesium.PolylineArrowMaterialProperty(
              new Cesium.Color.fromCssColorString('#fff').withAlpha(1)
            )
          }
        })
      )
    }

    const lines = [
      [
        {
          longitude: 112.9634812162806,
          latitude: 36.97040252777073,
          altitude
        },
        {
          longitude: 119.32663938454708,
          latitude: 42.26995861317594,
          altitude
        }
      ],
      [
        {
          longitude: 117.9592990653408,
          latitude: 38.38163978720803,
          altitude
        },
        {
          longitude: 123.42464237870345,
          latitude: 33.296977534577685,
          altitude
        }
      ],
      [
        {
          longitude: 111.53663125569267,
          latitude: 30.989726449061138,
          altitude
        },
        {
          longitude: 93.66207819341395,
          latitude: 42.32870629780615,
          altitude
        }
      ],
      [
        {
          longitude: 90.91200448882437,
          latitude: 40.709266162020185,
          altitude
        },
        {
          longitude: 109.04284513782429,
          latitude: 28.780767151167282,
          altitude
        }
      ]
    ]
    for (let index = 0; index < lines.length; index++) {
      const line = lines[index]
      const angle = turf.rhumbBearing(
        turf.point([line[0].longitude, line[0].latitude]),
        turf.point([line[1].longitude, line[1].latitude])
      )
      viewer.entities.add(
        new Cesium.Entity({
          position: Cesium.Cartesian3.fromDegrees(
            line[1].longitude,
            line[1].latitude,
            line[1].altitude
          ),
          label: {
            font: '14px sans-serif',
            text: `${angle.toFixed(0)}°`,
            fillColor: new Cesium.Color.fromCssColorString('#fff'),
            outlineColor: new Cesium.Color.fromCssColorString('#fff'),
            outlineWidth: 1,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            showBackground: true
          },
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              line[0].longitude,
              line[0].latitude,
              line[0].altitude,
              line[1].longitude,
              line[1].latitude,
              line[1].altitude
            ]),
            width: 10,
            material: new Cesium.PolylineArrowMaterialProperty(
              new Cesium.Color.fromCssColorString('#fff').withAlpha(1)
            )
          }
        })
      )
    }

    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction(function (event) {
      // 平面坐标系转笛卡尔空间直角坐标系
      /**
        position: Cartesian2 {x: 683.0753784179688, y: 512.71826171875}
        转
        Cartesian3{x: -2174106.926252774, y: 4386734.375324652, z: 4074136.167795586}
       */
      console.log(
        '平面坐标系转笛卡尔空间直角坐标系',
        viewer.scene.pickPosition(event.position)
      )

      // 空间直角坐标系转经纬度
      const earthPosition = viewer.camera.pickEllipsoid(
        event.position,
        viewer.scene.globe.ellipsoid
      )
      const cartographic = Cesium.Cartographic.fromCartesian(
        earthPosition,
        viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      )
      const longitude = Cesium.Math.toDegrees(cartographic.longitude)
      const latitude = Cesium.Math.toDegrees(cartographic.latitude)
      console.log(
        '空间直角坐标系转经纬度',
        longitude,
        latitude,
        cartographic.height
      )
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  },
  methods: {}
}
</script>

<style></style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【NICN】探索牛客之求阶乘

1.题目描述 递归和非递归分别实现求n的阶乘&#xff08;不考虑溢出的问题&#xff09; 2.代码解题 2.1递归 递归思想&#xff1a; Fac(N) 1*2*3*……*N递归方式实现&#xff1a;1 N < 1 Fac(N)Fac(N-1)*N N > 2 long long Fac(int N) {if(N < 1)return 1;retu…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第10章 项目进度管理(四)

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…

力扣hot100 -- 双指针

目录 &#x1f382;移动零 &#x1f319;盛最多水的容器 &#x1f33c;三数之和 &#x1f33c;接雨水 前缀和 辅助数组 双指针 单调栈 &#x1f382;移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 关于swap #include <iostream> #include <vec…

Get Ready!这些 ALVA 应用即将上线 Vision Pro!

日前&#xff0c;苹果 Vision Pro 正式在美国上市&#xff0c;应用商店首批上线超过 600 款应用程序&#xff0c;出色的显示效果和交互体验&#xff0c;为更多应用提供了全新打开方式。 *图源&#xff1a;Apple 对此&#xff0c;作为全球领先的空间计算技术平台供应商&#xff…

1-3 动手学深度学习v2-线性回归的从零开始实现-笔记

手动创建训练数据集 根据带有噪声的线性模型构造一个人造数据集。我们使用线性模型参数 w [ 2 , − 3.4 ] T \pmb{w} [2,-3.4]^{T} w[2,−3.4]T、 b 4.2 b 4.2 b4.2和噪声项 ϵ \epsilon ϵ生成数据集及其标签&#xff1a; y X w b ϵ \pmb{y} \pmb{Xw}b\epsilon yXw…

Elasticsearch(二)

1、核心概念 1.1、索引&#xff08;Index&#xff09; 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字来标识&#xff08;必须全部是…

【开源】基于JAVA+Vue+SpringBoot的智慧社区业务综合平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 业务类型模块2.2 基础业务模块2.3 预约业务模块2.4 反馈管理模块2.5 社区新闻模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 业务类型表3.2.2 基础业务表3.2.3 预约业务表3.2.4 反馈表3.2.5 社区新闻表 四、系统展…

【51单片机】烧写教程:将代码下载到单片机中(图示&解析)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 这是LCD基本实验中的一部分&#xff0c;完整实验传送门如下&#xff1a;传送门 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是…

[office] excel表格怎么绘制股票的CCI指标- #媒体#学习方法#笔记

excel表格怎么绘制股票的CCI指标? excel表格怎么绘制股票的CCI指标&#xff1f;excel表格中想要绘制一个股票cci指标&#xff0c;该怎么绘制呢&#xff1f;下面我们就来看看详细的教程&#xff0c;需要的朋友可以参考下 CCI指标是一种在股票&#xff0c;贵金属&#xff0c;货…

HARRYPOTTER: FAWKES

攻击机 192.168.223.128 目标机192.168.223.143 主机发现 nmap -sP 192.168.223.0/24 端口扫描 nmap -sV -p- -A 192.168.223.143 开启了21 22 80 2222 9898 五个端口&#xff0c;其中21端口可以匿名FTP登录&#xff0c;好像有点说法,百度搜索一下发现可以用anonymous登录…

力扣热门100题- 10. 正则表达式匹配

力扣热门100题 - 10. 正则表达式匹配 题目描述&#xff1a;示例&#xff1a;提示&#xff1a;解题思路&#xff08;动态规划&#xff09;&#xff1a; 题目链接&#xff1a;10. 正则表达式匹配 题目描述&#xff1a; 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现…

【复现】Rebuild管理系统SSRF漏洞_44

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 REBUILD&#xff08;简称 RB&#xff09;是一款高度可配置化的 企业管理系统&#xff0c;旨在帮助企业快速完成信息化建设&#x…

【Kubernetes】在k8s1.24及以上版本基于containerd容器运行时测试pod从harbor拉取镜像

基于containerd容器运行时测试pod从harbor拉取镜像 1、安装高版本containerd2、安装docker3、登录harbor上传镜像4、从harbor拉取镜像 1、安装高版本containerd 集群中各个节点都要操作 yum remove containerd.io -y yum install containerd.io-1.6.22* -y cd /etc/containe…

正点原子-STM32通用定时器学习笔记(1)

目录 1. 通用定时器简介&#xff08;F1为例&#xff09; 2. 通用定时器框图 ①时钟源 ②控制器 ③时基单元 ④输入捕获 ⑤捕获/比较&#xff08;公共&#xff09; ⑥输出比较 3.时钟源配置 3.1 计数器时钟源寄存器设置方法 3.2 外部时钟模式1 3.3 外部时钟模式2 3…

专业课130+总分420+南京大学851信号与系统考研经验南大电子信息与通信系统

经过一年的复习&#xff0c;顺利上岸&#xff0c;被南京大学录取&#xff0c;今年专业课130&#xff0c;总分420&#xff0c;回忆这一年的复习还是有很多经验分享&#xff0c;希望对大家复习有帮助。 专业课&#xff1a; 南京大学851信号与系统难度这几年无论是范围还是难度都…

Mysql一行记录存储过程

Mysql一行记录存储过程 Mysql的文件架构 行&#xff08;row&#xff09; 数据库表中的记录都是行存放的&#xff0c;每行继续根据不同的行格式都有不同的存储结构。 页&#xff08;page&#xff09; 记录是按照行来存储的&#xff0c;但是数据库的读取是以页为单位的&…

《MySQL 简易速速上手小册》第9章:高级 MySQL 特性和技巧(2024 最新版)

文章目录 9.1 使用存储过程和触发器9.1.1 基础知识9.1.2 重点案例&#xff1a;使用 Python 调用存储过程实现用户注册9.1.3 拓展案例 1&#xff1a;利用触发器自动记录数据更改历史9.1.4 拓展案例 2&#xff1a;使用 Python 和触发器实现数据完整性检查 9.2 管理和查询 JSON 数…

【前端素材】bootstrap5实现通用果蔬商城网页模板Netta Food(电商适用,附源码)

一、需求分析 通用果蔬商城网页是指专门为销售各类果蔬产品而设计的在线商城网页。它提供了一个方便的平台&#xff0c;使用户能够浏览、选择和购买各种果蔬产品。 通用果蔬商城网页通常具有以下功能&#xff1a; 商品展示&#xff1a;网页上展示各类果蔬产品的图片、价格、产…

使用C#读取PDF中所有文本内容

先安装如下包 using iTextSharp.text.pdf; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text;namespace ReadPdfText {class Program{static void Main(string[] args){string path "0017_审判流程管理信息表2…

VMware17上安装centos7.9

一、下载安装包&#xff1a; 1、VMware安装 VMware 下载地址&#xff1a; https://www.vmware.com/cn/products/workstation-pro.html VMware下载后安装即可 安装教程可以参考VMware安装教程 2、CentOs7.9下载地址&#xff1a; http://mirrors.aliyun.com/centos/7.9.2009/iso…