Cesium 计算level

最新推荐文章于 2025-06-23 15:36:28 发布

原创

最新推荐文章于 2025-06-23 15:36:28 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍如何使用Cesium.js获取地图当前层级及范围，包括获取渲染切片的层级、实现鹰眼功能以及计算当前Extent的方法。适用于需要根据不同地图层级加载不同服务的场景。

文章目录

TL;DR

前因

因为三维本身大多数情况是一个有倾斜角度的场景，所以存在不同视距加载不同级别瓦片的情况，结合Q1和Q3可以得到官方或者level的方法，当然这里也并不是准确的说法，简单的说就是因为三维场景跟二维场景的差异，造成了在倾斜角会存在不同级别切片的问题，这里可以去看法克鸡丝的文章，而现实存在的问题是我们需要判断不同级别显示不同的服务，比如影像、倾斜摄影、模型以便减轻前端的数据加载量加快显示的速度，让用户看到当前级别的数据。

结果

    // get rendered tiles
    viewer.camera.moveEnd.addEventListener(function() {
   
   
        var tilesToRender = viewer.scene.globe._surface._tilesToRender;
        var level;
        if(tilesToRender.length != 0){
   
   
        	level = tilesToRender[0].level
        }
    });

前言

不知道有没有更好的方法，后续再补充

From

https://stackoverflow.com/questions/33502620/cesium-js-how-to-get-each-tiles-level

Q1 Cesium.js How to get each tiles’ level?

I am trying to get each tiles’ rectangle and level in current view, and use these information to do some ajax request.

Now I have already got all rectangles through:

var tileRecangles = [];
var tilesToRender = viewer.scene.globe._surface.tileProvider._tilesToRenderByTextureCount;
    if (Cesium.defined(tilesToRender)) {
   
   
        for (var j = 0, len = tilesToRender.length; j < len; j++) {
   
   
            var quadTrees = tilesToRender[j];
            if (Cesium.defined(quadTrees)) {
   
   
                for (var i = 0; i < quadTrees.length; i++) {
   
   
                    tileRecangles.push(quadTrees[i].rectangle);
                }
            }
        }
    }

The question is how to get the level for each tiles? The value in red circles of this screenshot
Thanks.

A1
I think it’s just quadTrees[i].level in the same place where you have quadTrees[i].rectangle.

Q2 Cesium随笔：鹰眼功能

https://www.jianshu.com/p/e6f3d171a2d1

A2 有一个同步的层级计算方法

//计算地图缩放等级
import Cesium from 'Cesium';
//启动鹰眼功能
function bindMinimap(cesiumViewer, funcWithCursorPos,windowWidth,windowHeight) {
   
   
    var handler = new Cesium.ScreenSpaceEventHandler(cesiumViewer.scene.canvas);
    handler.setInputAction(function(movement) {
   
   
        let dynamicPosition = undefined;
        let ray = cesiumViewer.camera.getPickRay(movement.endPosition);
        dynamicPosition = cesiumViewer.scene.globe.pick(ray, cesiumViewer.scene);
        let corners=getViewRect(cesiumViewer,cesiumViewer.scene.camera,windowWidth,windowHeight);
        if (Cesium.defined(dynamicPosition)) {