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

news2024/12/12 12:39:03

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.coloradmin.cn/o/2258240.html

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

相关文章

Tablesaw封装Plot.ly实现数据可视化

上文介绍tablesaw的数据处理功能,本文向你展示其数据可视化功能,并通过几个常用图表示例进行说明。 Plot.ly包装 可视化是数据分析的重要组成部分,无论你只是“查看”新数据集还是验证机器学习算法的结果。Tablesaw是一个开源、高性能的Java…

智慧商城项目2(vue核心技术与实战)

页面访问拦截了解 router/index.js import Vue from vue import VueRouter from vue-router import Login from /views/login import Layout from /views/layout import Search from /views/search import SearchList from /views/search/list import Prodetail from /views/…

第一个C++程序--(蓝桥杯备考版)

第一个C程序 基础程序 #include <iostream>//头⽂件 using namespace std;//使⽤std的名字空间 int main()//main函数 {cout << "hello world!" << endl; //输出&#xff1a;在屏幕打印"hello world!" return 0;}main函数 main 函数是…

华为云域名网站,域名切换到Cloudflare CDN出现访问报错:DNS 重定向次过多

网站域名切换到Cloudflare出现访问报错&#xff1a;重定向次过多&#xff0c;应该如何处理&#xff1f; 最近我自己已经遇到很多次这个情况了&#xff0c;将网站域名DNS切换到Cloudflare之后&#xff0c;网站会打不开&#xff0c;出现重定向次数过多报错。 网站域名切换到Clo…

颜色的基本处理

数码相机能够获取彩色图像&#xff0c;但相机的色彩处理是一个非常复杂的过程&#xff0c;是非常重要的。 此过程生产制造商在细节方面都是不公布的&#xff0c;但是基本的概念是相同的。当相机捕捉一个真实场景时&#xff0c;是怎么还原成人眼所看到的图像呢&#xff1f; 1.R…

与 Cursor AI 对话编程:2小时开发报修维修微信小程序

本文记录了如何通过与 Cursor AI 对话&#xff0c;全程不写一行代码的情况下&#xff0c;完成一个完整的报修小程序。整个过程展示了 AI 如何帮助我们&#xff1a; 生成代码 、解决问题、优化实现、完善细节。 先看一下效果图&#xff1a; 一、项目配置 首先我是这样和 AI 对…

System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本

问题1&#xff1a;“/”应用程序中的服务器错误。 System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本。 说明: 执行当前 Web 请求期间&#xff0c;出现未经处理的异常。请检查堆栈跟踪信息&#xff0c;以了解有关该错误以及代码中导致错误的出处的详细…

leetcode909:蛇梯棋

给你一个大小为 n x n 的整数矩阵 board &#xff0c;方格按从 1 到 n2 编号&#xff0c;编号遵循 转行交替方式 &#xff0c;从左下角开始 &#xff08;即&#xff0c;从 board[n - 1][0] 开始&#xff09;的每一行改变方向。 你一开始位于棋盘上的方格 1。每一回合&#xf…

【特殊子序列 DP】力扣552. 学生出勤记录 II

可以用字符串表示一个学生的出勤记录&#xff0c;其中的每个字符用来标记当天的出勤情况&#xff08;缺勤、迟到、到场&#xff09;。记录中只含下面三种字符&#xff1a; ‘A’&#xff1a;Absent&#xff0c;缺勤 ‘L’&#xff1a;Late&#xff0c;迟到 ‘P’&#xff1a;Pr…

Datawhale AI 冬令营(第一期)定制你的第一个专属模型-学习笔记

最近我报名参加了Datawhale组织的主题为“动手学系列&#xff0c;人人都能应用的AI”的Datawhale AI冬令营&#xff08;第一期&#xff09;。 本次学习一共12天&#xff0c;从12月10日-12月21日&#xff0c;学习会包含【跑通速通手册】&#xff0c;【学习大模型微调&数据集…

【GL009】C/C++总结(一)

自查目录 1. typedef 和 #define 的区别 2. const 、volatile 和 static 的区别 3. const修饰指针 4. 数组指针和指针数组 5. 函数指针和指针函数 6. C/C内存管理 6.1 内存分布图解 6.2 C语言中的内存分配方式 6.3 堆&#xff08;Heap&#xff09;和栈&#xff08;Sta…

opencv库中的函数应用

opencv库中的函数应用 二值化函数功能参数返回值应用例子 自适应二值化函数功能参数返回值应用例子 腐蚀函数功能参数返回值应用例子 膨胀函数功能参数返回值例子 仿射变换函数功能参数返回值例子 透视变换函数功能参数返回值例子 二值化函数 函数&#xff1a;cv2.threshold(i…

HBuilderX(uni-app)Vue3路由传参和接收路由参数!!

uni-app搭建小程序时候Vue3语法接收路由参数&#xff0c;去官方文档查看&#xff0c;是onLoad的option接收参数&#xff0c;我试过&#xff0c;接收不到&#xff0c;上网查各种方法也是不太行&#xff0c;最后自己琢磨出来了&#xff0c;这参数藏得还挺深&#xff01;&#xff…

设置docker镜像加速器

阿里云镜像中心 https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 登陆阿里云账号后&#xff0c;可以看到镜像加速器的配置&#xff0c;如下图所示 参考文章地址 Docker 镜像库国内加速的几种方法_docker 加速-CSDN博客

前端成长之路:HTML(3)

在HTML中&#xff0c;有列表标签。列表最大的特点是整齐、简洁、有序&#xff0c;用列表进行布局会更加自由方便。根据使用的情景不同&#xff0c;可以将列表分为三大类&#xff1a;无序列表、有序列表和自定义列表。 无序列表 在HTML中使用<ul>标签定义一个无序列表&a…

【C语言】fscanf 和 fprintf函数

【C语言】fscanf 和 fprintf函数 文章目录 [TOC](文章目录) 前言一、定义二、代码例程三、实验结果四、参考文献总结 前言 使用工具&#xff1a; 1.编译器&#xff1a;DEVC 2.C Primer Plus 第六版-1 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一…

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。 时序约束 创建生成时钟 参考链接&#xff1a; Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟&#xff08;MMCM或…

从小学题到技术选型哲学:以智能客服系统为例,解读相关AI技术栈20241211

&#x1f9e0;&#x1f4a1;从小学题到技术选型哲学&#xff1a;以智能客服系统为例&#xff0c;解读相关AI技术栈 引言&#xff1a;从小学数学题到技术智慧 &#x1f4da;✨ 在小学数学题中&#xff0c;有这样一道问题&#xff1a; “一个长方形变成平行四边形后&#xff0c…

遥感图像处理二(ENVI5.6 Classic)

1 实验目的和内容 1.1 实验目的 本次上机旨在继续深入了解ENVI软件的基本使用&#xff0c;并对提供的实验数据进行基本的图像分割和地物分类等操作并分析结果。 1.2 实验内容 1.2.1 图像分割 对教材示例数据“C7图像分割”中的风景图、兰花图和娃娃图分别进行图像分割操作…

Xilinx LVDS 接口中的时钟对齐模块的RTL编写

本人写的一个时钟对齐的模块&#xff0c;仅供参考 主要原因&#xff1a; 由于 FPGA 内部布局布线所带来的延时&#xff0c;到达 ISERDESE2 相应管脚的帧时钟、位时 钟与数据信号可能不再保持初始的相位关系&#xff0c;从而导致无法得到正确的串并转换数据&#xff0c;所以需 …