Cesium中实现仿ArcGIS三维的动态图层加载方式

Cesium 加载 ArcGIS 动态图层的方式

如果你在 Cesium 中加载过 ArcGIS 的动态图层,你会发现,Cesium 对于动态图层仍然采用类似切片图层的逻辑进行加载。也就是每个固定的瓦片 export 一张图片。

这样会造成一些问题:

  1. 请求量大,如果访问人数多,后端服务容易崩溃
  2. 如果动态图层中含有标注,会造成标注文字变多(ArcGIS 动态图层如果一个大图形被分割在多个 export 中,那么每个 export 回来的图片都会含有大图形对应的标注)

没找到合适的带标注的动态图层数据,这里用 ps 简单模拟一个效果

请添加图片描述

ArcGIS 4.x 三维场景加载动态图层的方式

通过查看 ArcGIS 三维场景发送的请求可以发现,ArcGIS 每次相机停止运动时,会首先给动态图层服务发送两个范围大小不一样的 export 请求。再根据请求回来的两张图片进行叠加显示。

效果大概如下(同样用 ps 模拟)
请添加图片描述

当然,如果同一个面被分割在了两个服务,一样会出现标注多的问题

请添加图片描述

在 Cesium 中实现仿 ArcGIS 三维的动态图层加载方式

要实现仿 ArcGIS 三维的动态图层加载方式,首先当然是得先获取 ArcGIS 是如何计算两个 export 参数的。

这一步没什投机取巧的办法,只能去翻 ArcGIS 的源码,把这段逻辑抽离出来。(npm 包里的 arcgis 源码,代码经过了压缩,不过大致逻辑还是能看出来的)

如果抽离的逻辑正确,那么请求的范围应该类似下面这样

请添加图片描述

请添加图片描述

抽离出两个 export 参数的计算方法之后,就该考虑如何展示了。

利用 GroundPrimitive 展示

将请求回来的两张图片通过 GroundPrimitive 展示是最简单的办法,需要做的额外操作只有在第二张大的图片中,挖去和小图片相交的部分

优点:实现简单,性能高,能实现影像贴模型的效果

缺点:无法和其他通过 ImageryLayer 方式加载的图层交换图层顺序

编写 ImageryLayer 展示

ImageryLayer 请求方式就是 Cesium 原生的方式。它能够解决 GroundPrimitive 无法和其他图层交换顺序的问题,但是会有一些性能问题

性能问题源自于 ImageryLayer 会按切片方案将展示的内容切割成一个个小的瓦片。而我们 export 回来的两张图片并不是严格按照切片方案请求的。

请添加图片描述

因此, 每次请求回来的图片, 都需要根据当前正在显示的瓦片进行切割, 并将切割出来的内容更新至瓦片的缓存中。( ImageryLayer 内置缓存机制,一旦当前瓦片请求成功,则后续直接读取缓存不会再请求。实际渲染时,也是读取缓存中的内容渲染的。如果不更新缓存,那么当重新显示已缓存的瓦片时,其内容会和当前的图片对应不上 )

更新瓦片缓存这一步相当耗时和耗内存,并且如果瓦片多,甚至会出现阻塞主线程的情况。

有的同学可能会说,是不是可以考虑采用 WebWorker 来计算每张瓦片的内容?

事实上,我尝试过,但是由于需要同时更新的瓦片比较多,就会导致 export 请求回来的两张图片都需要复制一份到各自的 WebWorker 中,这样会导致更严重的内存问题。

采用 SharedArrayBuffer 让图片在 WebWorker 之间共享?

事实上,我也尝试过,但是 SharedArrayBuffer 似乎存在一些兼容性问题,最后还是放弃了 😑。

如果各位大佬有解决方案,欢迎提供!

修改源码的方式展示

在编写 ImageryLayer 方案时,我想到,实际上我可以只向着色器传入两张纹理,和对应的四至范围。在计算 Globe 上的影像纹理时,单独为动态图层进行切割即可。

就目前而言,这个可能是最理想的方案,只是需要去对 Globe 和 ImagerLayer 相关的源码进行修改。

这个方案还有待尝试,累了…晚点再试…😑

原文链接

Cesium中实现仿ArcGIS三维的动态图层加载方式

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

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

相关文章

zerotier实现内网穿透(访问内网服务器)

moo 内网穿透工具 实用工具:zerotier 目录 内网穿透工具 Windows下zerotier安装 ubuntu系统下的zerotier安装 使用moon加速 Windows下zerotier安装 有了网络之后,会给你一个网络id,这个网络id是非常重要的,其它设备要加入…

selenium自动爬虫工具

一、介绍selenium爬虫工具 selenium 是一个自动化测试工具,可以用来进行 web 自动化测试、爬虫 selenium 本质是通过驱动浏览器,完全模拟浏览器的操作,比如跳转、输入、点击、下拉等,来拿到网页渲染之后的结果,可支持…

软考-软件设计师-基础知识Chapter01-计算机系统

第一章 计算机系统 计算机系统基础知识 计算机系统硬件基本组成 计算器的基本硬件系统由运算器、控制器、存储器、输入设备、输出设备的5大部件组成。 中央处理单元 中央处理单元(CPU) 是计算机系统的核心部件,它负责获取程序指令、对指…

蓝桥杯新年题解 | 第15届蓝桥杯迎新篇

蓝桥杯新年题解 | 第15届蓝桥杯迎新篇 2024年的蓝桥杯即将拉开序幕!对于许多编程爱好者来说,这不仅是一次展示自我能力的舞台,更是一次学习和成长的机会。作为一名大一新生的小蓝,对蓝桥杯充满了期待,但面对初次参赛的…

【漫话机器学习系列】005.神经网络的结构(architecture on the neural network)

神经网络(Neural Network)是一种模拟人脑神经系统的计算模型,由大量相互连接的神经元(节点)组成,广泛应用于深度学习和机器学习领域。以下是神经网络的基本结构及关键组成部分。 1. 神经网络的基本组成 一…

Python使用Selenium库获取 网页节点元素、名称、内容的方法

我们要用到一些网页源码信息,例如获取一些节点的class内容, 除了使用Beautifulsoup来解析,还可以直接用Selenium库打印节点(元素)名称,用来获取元素的文本内容或者标签名。 例如获取下面的class的内容&am…

数字化招聘系统如何帮助企业实现招聘效率翻倍提升?

众所周知,传统的招聘方式已经难以满足现代企业对人才的需求,而数字化招聘系统的出现,为企业提供了全新的解决方案。通过数字化招聘系统,企业可以自动化处理繁琐的招聘流程,快速筛选合适的候选人,从而大幅提…

(笔记)解决select下拉框默认选中selected属性不起作用问题

在 vue3 中使用 HTML原生开发,想给 select 下拉框选中 selected 属性不起作用。这是因为 vue3中使用了 Composition API(组合式 api),而 Composition API 中的响应式数据是独立的,不会自动更新到 DOM 中。可以使用 v-m…

iPhone苹果相册视频怎么提取音频?

在数字时代,视频已成为我们记录生活、分享故事的重要方式。然而,有时候我们只想保留视频中的音频部分,比如一段动人的背景音乐或是一段珍贵的对话。那么,苹果相册视频怎么提取音频呢?本文将介绍三种简单且实用的方法&a…

若依实现图片上传时自动添加水印

文章目录 总体思路1. 修改通用上传方法2. 去除文件路径前两级目录3. 添加水印方法运行效果总结 为了解决图盗用,并有效保护图片版权,若依项目需要实现一个功能:上传图片时,自动在图片上添加水印。这不仅可以有效防止盗用&#xff…

ctfshow-web 151-170-文件上传

151. 我们首先想到就是上传一句话木马。但是看源代码限制了png。 (1)改前端代码。 这里是前端限制了上传文件类型,那我们就改一下就好了嘛,改成php。 这里直接修改不行,给大家推荐一篇简短文章,大家就会了&#xff08…

数据库同步中间件DBSyncer安装配置及使用

1、介绍 DBSyncer(英[dbsɪŋkɜː],美[dbsɪŋkɜː 简称dbs)是一款开源的数据同步中间件,提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务&#xf…

SpringBoot左脚进门之常用注解

类级别注解 SpringBootApplication Configuration //表明这是一个配置类 EnableAutoConfiguration //开启自动配置 ComponentScan() //开启组件扫描1、Configuration: 当一个类被 Configuration 注解…

CNCF云原生生态版图

CNCF云原生生态版图 概述什么是云原生生态版图如何使用生态版图 项目和产品(Projects and products)会员(Members)认证合作伙伴与提供商(Certified partners and providers)无服务(Serverless&a…

电子应用设计方案-50:智能牙刷系统方案设计

智能牙刷系统方案设计 一、引言 随着人们对口腔健康的重视程度不断提高,智能牙刷作为一种创新的口腔护理工具,能够更有效地帮助用户改善刷牙习惯和清洁效果。本方案旨在设计一款功能丰富、智能化程度高的智能牙刷系统。 二、系统概述 1. 系统目标 - 准…

遗传算法与深度学习实战(27)——进化卷积神经网络

遗传算法与深度学习实战(27)——进化卷积神经网络 0. 前言1. 自定义交叉算子2. 自定义突变操作符3. 进化卷积神经网络小结系列链接 0. 前言 DEAP toolbox 中提供的标准遗传操作符对于自定义的网络架构基因序列来说是不够的。这是因为任何标准的交叉算子…

希迪智驾持续亏损8.2亿:毛利率下滑,冲刺“自动驾驶矿卡第一股”

《港湾商业观察》黄懿 近日,希迪智驾(湖南)股份有限公司(下称“希迪智驾”)向港交所主板递交上市申请,联席保荐人为中金公司、中信建投国际、中国平安资本(香港)。 资料显示&#…

【0x0008】HCI_Create_Connection_Cancel命令详解

目录 一、命令概述 二、命令格式及参数说明 2.1. HCI_Create_Connection_Cancel 命令格式 2.2. BD_ADDR 三、返回事件及参数说明 3.1. HCI_Command_Complete 事件 3.2. HCI_Connection_Complete 事件 四、命令执行流程梳理 4.1. 命令发起 4.2. 命令接收与初步判断 4…

Elasticsearch Serverless 中的数据流自动分片

作者:来自 Elastic Andrei Dan 在 Elastic Cloud Serverless 中,我们根据索引负载自动为数据流配置最佳分片数量,从而使用户无需摆弄分片。 传统上,用户会更改数据流的分片配置,以处理各种工作负载并充分利用可用资源。…

Pytest-Bdd-Playwright 系列教程(15):背景(Background)

Pytest-Bdd-Playwright 系列教程(15):背景(Background) 前言一、什么是背景(Background)二、特性文件三、测试脚本四、运行测试总结 前言 在测试的过程中,我们往往会遇到这样的问题&…