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

展示效果,我们期待图标点是根据模型,在模型的上方展示在这里插入图片描述
实现思路:
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]);
    },

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

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

相关文章

314_C++_QT表格的撤销、恢复,可对多行、多item进行撤销、恢复操作

行–删除后的,撤销、恢复图示: 原图示 删除后 撤销操作 恢复操作 item修改后的撤销、恢复 原item 撤销修改 恢复修改 代码: --</

Python八股文:基础知识Part1

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

神经网络模型底层原理与实现8-BERT

首先介绍什么是自监督学习&#xff1a; 普通的有监督学习是每个x对应有个y&#xff0c;x训练得到y&#xff0c;将y与y作比较&#xff0c;而自监督是没有对应y&#xff0c;直接把一部分样本x作为训练目标x&#xff0c;训练得x后和x对比 bert中如何创造x&#xff1a;以文字处理为…

基于SSM“口腔助手”小程序

采用技术 基于SSM“口腔助手”小程序的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 小程序前台首页 注册 保健知识 我的 医生登录成功 后台管理员 …

C#如何用NPOI创建、读取、更新Excel文件

一.获取引用NPOI VS2017&#xff0c;通过Nuget工具包下载NPOI到指定的项目中&#xff0c;如下 二.添加如下命名空间,其中HSSF是操作*.xls文件&#xff0c;XSSF操作*.xlsx文件. using NPOI; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; using NPOI.HSSF.UserModel; …

【LeetCode】单调栈类题目详解

所有题目均来自于LeetCode&#xff0c;刷题代码使用的Python3版本 单调栈 通常针对一维数组的问题&#xff0c;如果需要寻找一个元素右边或者左边第一个比自己大或者小的元素的位置&#xff0c;就可以使用单调栈&#xff0c;时间复杂度为O(n) 单调栈的本质是空间换时间&#…

泽众Testone自动化测试平台,测试用例支持单个调试执行,同步查看执行日志

泽众Testone自动化测试平台之前版本&#xff0c;测试用例批量和单个执行&#xff0c;必须要通过测试集操作执行&#xff0c;操作略繁琐&#xff0c;我们通过本轮优化升级&#xff0c;测试用例直接可以单个调试执行&#xff0c;同步查看执行日志&#xff0c;操作上去繁就简&…

新能源汽车“价格战”之后,充电桩主板市场将会怎样?

2024年2月底&#xff0c;国内新能源汽车市场开启了一场前所未有的“价格战”↓ 比亚迪率先抛出“王炸”车型——秦PLUS荣耀版和驱逐舰05荣耀版&#xff0c;起售价低至7.98万元&#xff0c;打响了价格战的“第一枪”&#xff0c;引爆了平静的汽车市场。 “电比油低”就此拉开序…

常用API时间Arrays

常用API MATH 代表数学&#xff0c;是一个工具类&#xff0c;里面提供的都是对数据进行操作的一些静态方法。 方法名说明public static int abs(int a)获取参数绝对值public static double ceil(double a)向上取整public static double floor(double a)向下取整public stati…

Python零基础从小白打怪升级中~~~~~~~模块+异常+Pycharm的debug调试

第十节&#xff1a;模块异常Debug 一、Python模块 Python 模块(Module)&#xff0c;是一个 Python 文件&#xff0c;以 .py 结尾&#xff0c;模块能定义函数&#xff0c;类和变量&#xff0c;模块里也能包含可执行的代码。 1、导入模块 导入模块的5中方式 import 模块名fr…

计算机网络知识等汇总补充

计算机网络知识汇总补充 一、四次挥手1、为什么TCP要等待2MSL2、如果说一个系统中&#xff0c;有大量的time_wait和close_wait&#xff0c;会是什么原因&#xff1f; 二、你是怎么解决粘包问题&#xff1f;三、你觉得哪些场景适合redis四、redis的持久化策略五、你会怎么保证my…

Leetcode算法训练日记 | day23

一、修剪二叉搜索树 1.题目 Leetcode&#xff1a;第 669 题 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff…

huggingface连不上的解决方案

不能科学上网的同学们, 代码中加载AI模型的时候, 会有下面的报错 We couldnt connect to https://huggingface.co to load this file, couldnt find it in the cached files and it looks like OFA-Sys/chinese-clip-vit-base-patch16 is not the path to a directory containi…

Flask基于flask_login实现登录、验证码

flask_login 是一个 Flask 扩展&#xff0c;用于在 Flask web 应用中实现用户会话管理。它允许你跟踪哪些用户已经登录&#xff0c;并管理他们的登录状态。flask_login 提供了用户认证的基础结构&#xff0c;但具体的用户验证&#xff08;如用户名和密码检查&#xff09;和存储…

3D Web轻量引擎HOOPS Communicator装配制造流程演示

介绍 该演示介绍了使用HOOPS Communicator的独特工作流程&#xff0c;该工作流程从零件列表中加载零件&#xff0c;并使用自定义配合操作符&#xff08;例如共线、同心和共面&#xff09;构建装配模型。该工作流程可用于各种行业&#xff0c;例如维护手册、工作指令或电子商务…

Python中sort()函数、sorted()函数的用法深入讲解(具体实例:蓝桥杯数位排序)

前置知识&#xff1a; 可迭代对象的定义&#xff1a;可迭代对象是指可以被迭代或遍历的对象&#xff0c;即可以使用循环结构对其进行逐个访问的对象。 在Python中常见的可迭代对象有&#xff1a;列表(list)、元组&#xff08;tuple&#xff09;、字符串&#xff08;sting&…

[CTF]使用浏览器firefox插件伪装IP地址

来源&#xff1a;https://jingyan.baidu.com/article/ab0b56306d9890c15bfa7d6a.html 浏览器想必是大家再熟悉不过的东东了&#xff0c;我们会经常使用它访问下载一些页面或文件。但是对于它的更深层次的功能可能就陌生了。比如说一些网站后台会记录我们的IP地址&#xff0c;假…

【AI面试】FPN、PANet、SPP、ASPP、Adaptive feature pooling

经常可以看到各个论文发出来,加入的各种trick。这些改进点,一般都是在前人的基础上,进行了一些修改。比如FPN到PANet的改进,就是为了改进前者存在的一些问题。 这里就把这些trick,给汇集到一起,看看他们的发展历史,看看他们之间有什么区别,又是在哪些地方做的改进。这…

OpenHarmony 3.2 Release版本Codec HDI适配过程

简介 OpenHarmony Codec HDI&#xff08;Hardware Device Interface&#xff09;驱动框架基于 OpenMax 实现了视屏硬件编解码驱动&#xff0c;提供 Codec 基础能力接口供上层媒体服务调用&#xff0c;包括获取组件编解码能力、创建组件、参数设置、数据的轮转和控制、以及销毁…

uniapp h5项目实现多选按钮/多选标签/多选框

需求&#xff1a;实现简单多选功能&#xff0c;遍历数据&#xff0c;添加样式 1.效果图 2.以下代码粘贴到代码中&#xff0c;可直接运行&#xff0c;html代码 <view class"page index"><view class"list-box"><view v-for"(item,in…