02.cesium中模型和图标加载处理

news2024/11/27 0:44:50

展示效果,我们期待图标点是根据模型,在模型的上方展示在这里插入图片描述
实现思路:
1.在二维地图和三维地图的加载的高度计算不同,需要判断
2.创建一个BillboardCollection,用来存放图标
3.在三维地图中调用getPointPostion方法,来计算图标的高度

 addBillboardsPrimitivesPlush(list, dataType) {
   		
      let keyIs2D = "2D";
      if (this.curKey == "2D" || (this.curKey.key && this.curKey.key == "2D")) {
        keyIs2D = "2D";
      } else {
        keyIs2D = "3D";
      }
      // item = JSON.parse(JSON.stringify(item)); // 数据隔离
      if (list.length === 0) {
        return;
      }
      billboards[dataType] = null;
      if (billboards[dataType] == null) {
        billboards[dataType] = this.cesium_viewer.scene.primitives.add(
          new Cesium.BillboardCollection(),
          10
        );
      }
      list.forEach((item) => {
        // item.attrs.moid = item.moid;
        if (item.geometry && item.geometry.coordinates) {
          billboards[dataType].add({
            id: { baseInfo: item },
            position:
              keyIs2D == "2D"
                ? Cesium.Cartesian3.fromDegrees(
                    Number(item.geometry.coordinates[0]),
                    Number(item.geometry.coordinates[1]),
                    1
                  )
                : this.getPointPostion(
                    Number(item.geometry.coordinates[0]),
                    Number(item.geometry.coordinates[1])
                  ),
            image: item.imgSrc || this.getIcon(item),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 1,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0.0,
              1000000
            ),
          });
        } else {
          // console.log("数据错误", item)
        }
      });
      this.cesium_viewer.scene.primitives.raiseToTop(billboards[dataType]);
    },

getPointPostion方法
主要就是调用sence中的**sampleHeight**方法

sampleHeight (position, objectsToExclude , width )

返回给定制图位置的场景几何体的高度,如果没有场景几何体可从中采样高度,则返回 undefined 的高度。输入位置的高度被忽略。可用于将对象夹在地球、3D 瓷砖或场景中的图元上。
此函数仅从当前视图中渲染的地球图块和 3D 图块中采样高度。对所有其他基元的高度进行采样,无论其可见性如何。

    getPointPostion(longitude, latitude) {
      // 将经纬度坐标转为弧度坐标
      const cart = Cesium.Cartographic.fromDegrees(longitude, latitude);
      // 根据弧度坐标获取该弧度坐标在三维模型表面的高度值
      const height = this.cesium_viewer.scene.sampleHeight(cart);
      // console.log("heightheightheight", height);
      // 返回该经纬度带有高度的坐标值,跟根据计算出来的高度,再自定义加减高度值
      let heighttVal = height ? height + 0.5 : 2;
      return Cesium.Cartesian3.fromDegrees(longitude, latitude, heighttVal);
    },

针对于大量数据,就进行异步优化记载
runTask 方法是一个包装函数,它将一个普通的回调函数 task 转换为一个返回 Promise 的函数。这允许您以异步的方式执行任务,并能够在任务完成后使用 .then() 方法处理结果或进一步链接 Promise

    // 优化地图加载,异步执行耗时任务
    runTask(task) {
      return new Promise((resolve) => {
        this._runTask(task, resolve);
      });
    },
    _runTask(task, callback) {
      let start = Date.now();
      // 防止阻塞主线程
      requestAnimationFrame(() => {
        // 兼容saferi,改为手动计算
        if (Date.now() - start < 16.6) {
          task();
          callback();
        } else {
          this._runTask(task, callback);
        }
      });
    },

改造代码:

 addBillboardsPrimitivesPlush(list, dataType) {
      if (list.length === 0) return;

      const keyIs2D =
        this.curKey == "2D" || (this.curKey.key && this.curKey.key == "2D");

      const sign = Symbol(dataType);
      billboardsAdding[dataType] = sign;
      billboards[dataType] = null;
      if (billboards[dataType] == null) {
        billboards[dataType] = this.cesium_viewer.scene.primitives.add(
          new Cesium.BillboardCollection(),
          10
        );
      }
      const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
        0.0,
        1000000
      );

      const verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
      const disableDepthTestDistance = Number.POSITIVE_INFINITY;
      const listLength = list.length;
      for (let index = 0; index < listLength; index++) {
        const item = list[index];
        if (item.geometry && item.geometry.coordinates) {
          this.runTask(() => {
            const [lng, lat] = item.geometry.coordinates;
            if (billboardsAdding[dataType] !== sign) return;
            billboards[dataType].add({
              id: { baseInfo: item },
              position: keyIs2D
                ? Cesium.Cartesian3.fromDegrees(lng, lat, 1)
                : this.getPointPostion(lng, lat),
              image: item.imgSrc || this.getIcon(item),
              scale: 1,
              verticalOrigin,
              disableDepthTestDistance,
              distanceDisplayCondition,
            });
          });
        } else {
      
        }
      }
      this.cesium_viewer.scene.primitives.raiseToTop(billboards[dataType]);
    },

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

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

相关文章

挖掘未来:私有LTE/5G网络驱动智慧矿山的自动化

私有LTE/5G网络为世界上一些最偏远的角落提供无线连接。如果没有无线通信网络&#xff0c;各行业就无法满足增加产量、降低运营成本和减少环境破坏的需求。 在本案例研究中&#xff0c;我们着眼于自动化如何改变无线网络的动态。智慧矿山要求运营商无缝集成多个系统和应用程序…

02 SQL基础 -- 初识SQL

一、初识 SQL 1.1 概念介绍 数据库中存储的表结构类似于 excel 中的行和列,在数据库中,行称为记录,它相当于一条结论,列称为字段,它代表了表中存储的数据项目 行和列交汇的地方称为单元格,一个单元格只能输入一条记录 SQL是为操作数据库而开发的语言。国际标准化组织(…

Linux/October

October Enumeration Nmap 扫描发现对外开放了22和80端口&#xff0c;使用nmap详细扫描这两个端口 ┌──(kali㉿kali)-[~/vegetable/HTB/October] └─$ nmap -sC -sV -p 22,80 -oA nmap 10.10.10.16 Starting Nmap 7.…

MobX原理剖析:基于可观察状态和自动依赖追踪的响应式状态管理

我们用代码示例来说明 MobX 的核心原理。 首先,我们定义一个简单的 Store 类,其中包含一个可观察的计数器状态: import { observable, action } from mobx;class CounterStore {observable count 0;actionincrement () > {this.count;};actiondecrement () > {this.…

spring快速搭建聊天AI

官网url: https://spring.io/projects/spring-ai 本文演示的是open AI 1创建java项目 2.拿到AI的key&#xff08;没有的话可以去淘宝花几块钱买一个&#xff09; //YOUR_API_KEY写你自己的open AI的key spring.ai.openai.api-keyYOUR_API_KEY spring.ai.openai.chat.options.…

《前端防坑》- JS基础 - 你觉得Boolean(‘false‘) === false吗?

问题 你觉得Boolean(false) false吗&#xff0c; Boolean([]) false吗&#xff1f; 答案 Boolean(false) true, Boolean([]) true 验证 原因 Boolean 对象表示两个值&#xff1a;"true" 或 "false" 但是能使Boolean为flase的只有6种情况&#xff…

Python八股文:基础知识Part1

1. 不用中间变量交换 a 和 b 这是python非常方便的一个功能可以这样直接交换两个值 2. 可变数据类型字典在for 循环中进行修改 这道题在这里就是让我们去回答输出的内容&#xff0c;这里看似我们是在for循环中每一次加入了都在list中加入了一个字典&#xff0c;然后字典的键值…

如何发现高危的PoC和EXP?漏洞检测方法 示例,实战应急实战举例,包括:SQLi、XSS、SSTI/ELI、文件哈希、SSRF、命令执行/命令注入等等

如何发现高危的PoC和EXP?漏洞检测方法 & 示例,实战应急实战举例,包括:SQLi、XSS、SSTI/ELI、文件哈希、SSRF、命令执行/命令注入等等。 在网络安全领域,发现高危的PoC(Proof of Concept)和EXP(Exploit)对于防范和应对潜在的安全威胁至关重要。以下是关于如何发现高…

【springCloud】版本学习

Spring Cloud介绍 官网地址&#xff1a;https://spring.io/projects/spring-cloud Spring Cloud 是一个基于 Spring Boot 的微服务架构解决方案&#xff0c;它提供了一系列工具和模式来帮助开发者构建分布式系统。Spring Cloud 的组件和模式包括配置管理、服务发现、断路器、…

为什么要部署IP SSL证书?怎么申请?

我们需要知道什么是IP SSL证书。SSL&#xff0c;全称为Secure Sockets Layer&#xff0c;即安全套接层&#xff0c;是为网络通信提供安全及数据完整性的一种安全协议。而IP SSL证书就是基于SSL协议的一种证书&#xff0c;它能够为网站和用户的数据传输提供加密处理&#xff0c;…

专科学习嵌入式合适吗?

专科学习嵌入式是完全合适的&#xff0c;但确实需要注意一些因素以确保你的学习之路更加顺利。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信2…

Python数据可视化:同时展示两个变量之间的双变量(联合)关系以及每个变量的单变量(边缘)分布seaborn.jointplot

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 Python数据可视化&#xff1a; 同时展示两个变量之间的 双变量&#xff08;联合&#xff09;关系以及 每个变量的单变量(边缘)分布 seaborn.jointplot 选择题 jointplot可以画出什么样的图标?…

Python生成图片和音频验证码

captcha是pyhton的一个模块&#xff0c;用来生成图片和音频验证码。 安装 pip install captcha使用 from captcha.audio import AudioCaptcha from captcha.image import ImageCaptcha# 加载声音和字体 audio AudioCaptcha(voicedir/path/to/voices) image ImageCaptcha(…

JSONP是跨域资源共享的古老技术吗

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

计算机网络——抓取icmp包

前言 本博客是博主用于记录计算机网络实验的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 抓包 我们是用Wireshark工具来进行抓包的。 ​在安装时候一路打勾安装即可&#xff0c;不过最后那个因为是英文&#xff0c;一定要看清&#xff0c;点了立即重启&am…

Oracle 21c 数据库迁移到DM8(达梦)数据库

一、环境准备 1、创建脚本 执行dmCreateUser.sql脚本创建GLJ用户&#xff08;注意&#xff1a;需要与需要迁移的oracle用户名一样&#xff09;&#xff0c;如&#xff0c;脚本内容如下&#xff1a; -- 开始将输出重定向到指定的日志文件 spool start /home/dmdba/dmdbms/sql/…

【探索Linux】P.28(网络编程套接字 —— 简单的UDP网络程序模拟实现)

阅读导航 引言一、UDP协议二、UDP网络程序模拟实现1. 预备代码⭕makefile文件⭕打印日志文件⭕打开指定的终端设备文件&#xff0c;并将其作为标准错误输出的目标文件描述符 2. UDP 服务器端实现&#xff08;UdpServer.hpp&#xff09;3. UDP 客户端实现&#xff08;main函数&a…

【QT学习】6.控件进阶,C与C++的强制类型转换,自定义控件,qt制作一个简易播放器

1.C与C的强制类型转换 2.自定义控件 要求&#xff1a;制作一个登录页面 1.使用控件拖拽一个页面出来 使用水平布局&#xff0c;垂直布局&#xff0c;网格布局 2.建立自定义控件 1.为项目添加自定义的类 自己写一个控件 2. &#xff08;1&#xff09;创建一个Group Box容器 &a…

Shenandoah GC算法

概述 最早由Red Hat公司发起&#xff0c;目标是利用现代多核CPU的优势&#xff0c;减少大堆内存在GC时产生的停顿时间。随OpenJDK 12一起发布&#xff0c;暂停时间不依赖于堆的大小&#xff1b;这意味着无论堆的大小如何&#xff0c;暂停时间都是差不多的。 Shenandoah最初的…

服务器感染了.rmallox勒索病毒,如何确保数据文件完整恢复?

引言&#xff1a; 随着网络技术的发展&#xff0c;勒索病毒已经成为当今数字时代的一大威胁。近期出现的.rmallox勒索病毒更是引发了广泛关注。本文将深入探讨.rmallox勒索病毒的特点&#xff0c;并提供一系列应对这一威胁的高效策略。如果受感染的数据确实有恢复的价值与必要…