cesium在线加载3DTileset

本文展示了如何使用Cesium.js库在一个HTML页面中创建一个3D地图视图,通过CesiumIon获取数据并加载CBD_D.json文件,实现地图的动态缩放和定位。

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />

    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="cesiumContainer" class="fullSize"></div>

    <script>
      // Get your token from https://cesium.com/ion/tokens
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqR
### 如何提高Cesium加载CESIUM3DTILESET的速度 #### 合理配置和优化参数 为了提升 `Cesium3DTileset` 的加载速度,可以通过调整其初始化选项来达到更好的性能表现。例如,在创建实例时指定合适的缓存大小和其他参数有助于改善整体响应时间[^1]。 ```javascript const tileset = new Cesium.Cesium3DTileset({ url: &#39;path/to/tileset.json&#39;, maximumScreenSpaceError: 8, preloadWhenHidden: false, preloadWhenClipped: false, }); ``` 上述代码片段展示了如何通过降低最大屏幕空间误差 (`maximumScreenSpaceError`) 来加快近处模型的细化过程;同时关闭预加载隐藏或裁剪部分(`preloadWhenHidden`, `preloadWhenClipped`) 可以减少不必要的资源请求次数。 #### 利用层级细节(LOD) 利用好层级细节(Level of Detail),即根据不同视角自动选择适当分辨率的数据层进行展示,对于加速大范围场景下的初次加载至关重要。当观察者远离物体时采用较低精度版本表示对象,而靠近时再逐步增加精细度,这样既节省带宽又提高了用户体验流畅性[^3]。 #### 减少网络延迟影响 考虑到实际应用环境中可能存在较高的网络延时情况,建议提前做好以下几方面工作: - **压缩传输文件**:确保服务器端已开启Gzip/Brotli等常见压缩算法; - **启用CDN服务**:将静态资源托管至内容分发网络(Content Delivery Network),使得全球各地用户都能享受到较快访问速度; - **异步加载策略**:按照需求顺序依次发起HTTP GET 请求而非一次性全部获取所需素材,减轻瞬间流量压力的同时也允许浏览器尽早呈现部分内容给访客查看[^4]。 #### 使用Web Workers处理复杂计算任务 如果涉及到大量几何变换或其他耗时操作,则考虑将其移交给后台线程执行——借助于JavaScript中的 Web Worker API 实现多核CPU并行运算能力的最大化发挥,进而间接促进前端页面的整体运行效率得到显著增强[^2]。 ```javascript // 创建worker.js 文件用于放置耗时逻辑 self.onmessage = function(e){ let result; // 执行密集型任务... postMessage(result); }; // 主线程调用 worker 进行并发处理 let myWorker = new Worker(&#39;worker.js&#39;); myWorker.postMessage(data); myWorker.onmessage = function(event){ /* 处理返回的结果 */ }; ``` 以上措施综合运用可有效缓解因数据量庞大而导致的地图加载缓慢现象,并为用户提供更加顺滑自然的操作感受。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值