cesium 实现瓦片地图贴模型、贴地

已于 2025-05-20 16:59:10 修改
阅读量225 收藏 1
点赞数 3
CC 4.0 BY-SA版权
文章标签： javascript 前端 开发语言
于 2025-05-19 12:07:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pengda63/article/details/148059979

实现效果：

实现步骤：

1、劫持cesium的瓦片销毁方法，实现资源回收

// 保存原始方法引用
const originalDestroyTile = Cesium.GlobeSurfaceTile.prototype.freeResources;

// 劫持瓦片销毁方法
Cesium.GlobeSurfaceTile.prototype.freeResources = function() {
    // 触发自定义销毁逻辑
    for (let imageInstance of this.imagery) {
        let texture = [imageInstance.readyImagery,imageInstance.loadingImagery]
        for (let tex of texture){
            const provider = tex?.imageryLayer?.imageryProvider;
            //查看源码referenceCount为0 才会立即释放
            if (provider?.onTileDestroy && tex.referenceCount == 1) {
                provider.onTileDestroy(
                    tex.x,
                    tex.y,
                    tex.level
                );
            }
        }

    }

    // 调用原始销毁方法
    originalDestroyTile.call(this);
};

2、劫持瓦片加载方法，实现瓦片展示

// 保存原始方法引用
const originalTileProvider = Cesium.GlobeSurfaceTileProvider.prototype.endUpdate;

Cesium.GlobeSurfaceTileProvider.prototype.endUpdate = function (frameState) {

    const tilesToRenderByTextureCount = this._tilesToRenderByTextureCount;

    for (const imageLayer of this._imageryLayers._layers){
        const provider = imageLayer.imageryProvider;
        if (provider?.clearAll){
            provider.clearAll();
        }
    }
    for (
        let textureCountIndex = 0,
            textureCountLength = tilesToRenderByTextureCount.length;
        textureCountIndex < textureCountLength;
        ++textureCountIndex
    ) {
        const tilesToRender = tilesToRenderByTextureCount[textureCountIndex];
        if (!tilesToRender) {
            continue;
        }

        for (
            let tileIndex = 0, tileLength = tilesToRender.length;
            tileIndex < tileLength;
            ++tileIndex
        ) {
            const tile = tilesToRender[tileIndex];
            const surfaceTile = tile.data;
            const tileImageryCollection = surfaceTile.imagery;
            let imageryIndex = 0;
            const imageryLen = tileImageryCollection.length;
            while (imageryIndex < imageryLen) {
                const tileImagery = tileImageryCollection[imageryIndex];
                const imagery = tileImagery.readyImagery;
                ++imageryIndex;
                if (!imagery){
                    continue;
                }

                const provider = imagery?.imageryLayer?.imageryProvider;
                if (provider?.onTileLoad) {
                    provider.onTileLoad(
                        imagery.x,
                        imagery.y,
                        imagery.level
                    );
                }

            }
        }
    }

    originalTileProvider.call(this, frameState);
}

3、自定义瓦片provider，实现瓦片转groundPrimitive

    requestImage(x, y, level) {
        console.log(`Loading tile x:${x}, y:${y}, level:${level}`);
        //替换URL模板参数
        if (level < this.minZoom || level > this.maxZoom){
            return new Promise((resolve, reject) => {
                resolve(null);
            });
        }
        let url;
        if (this._wmsParams) {
            const bbox = this._calculateWMSBBox(x, y, level);
            url = this._buildWMSUrl(x, y, level, bbox);
        } else {
            url = this._buildStandardUrl(x, y, level);
        }

        let _this = this;
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.crossOrigin = "anonymous"; // 处理跨域请求

            image.onload = () => {
                // 创建原始几何体并存储引用
                _this._createGroundPrimitive(x, y, level, image);
                resolve(image);
            };

            image.onerror = (e) => {
                //console.error(`Failed to load tile: ${url}`, e);
                reject(new Cesium.TileProviderError("Failed to load image", undefined, x, y, level));
            };

            image.src = url;
        });
    }

4、使用方法

 //html中引用js文件
<script src="/resource/scripts/GroundImageryProvider.js"></script>             

//添加代码
//wms图层
wmsImageryProvider = GroundImageryProvider.fromUrl(url+ 'geoserver/penghui/wms',{
                    wmsParams: {
                        transparent: true,
                        format: 'image/png',
                        srs: 'EPSG:4326',
                        styles: '',
                        CQL_FILTER: cqlfilter,
                        layers: 'xxx',
                    },
                    viewer: viewer
                })
viewer.imageryLayers.addImageryProvider(wmsImageryProvider );
//瓦片
provider = GroundImageryProvider.fromUrl(url, {viewer: viewer});
viewer.imageryLayers.addImageryProvider(provider);

完整代码：

// 保存原始方法引用
const originalDestroyTile = Cesium.GlobeSurfaceTile.prototype.freeResources;

// 劫持瓦片销毁方法
Cesium.GlobeSurfaceTile.prototype.freeResources = function() {
    // 触发自定义销毁逻辑
    for (let imageInstance of this.imagery) {
        let texture = [imageInstance.readyImagery,imageInstance.loadingImagery]
        for (let tex of texture){
            const provider = tex?.imageryLayer?.imageryProvider;
            //查看源码referenceCount为0 才会立即释放
            if (provider?.onTileDestroy && tex.referenceCount == 1) {
                provider.onTileDestroy(
                    tex.x,
                    tex.y,
                    tex.level
                );
            }
        }

    }

    // 调用原始销毁方法
    originalDestroyTile.call(this);
};

// 保存原始方法引用
const originalTileProvider = Cesium.GlobeSurfaceTileProvider.prototype.endUpdate;

Cesium.GlobeSurfaceTileProvider.prototype.endUpdate = function (frameState) {

    const tilesToRenderByTextureCount = this._tilesToRenderByTextureCount;

    for (const imageLayer of this._imageryLayers._layers){
        const provider = imageLayer.imageryProvider;
        if (provider?.clearAll){
            provider.clearAll();
        }
    }
    for (
        let textureCountIndex = 0,
            textureCountLength = tilesToRenderByTextureCount.length;
        textureCountIndex < textureCountLength;
        ++textureCountIndex
    ) {
        const tilesToRender = tilesToRenderByTextureCount[textureCountIndex];
        if (!tilesToRender) {
            continue;
        }

        for (
            let tileIndex = 0, tileLength = tilesToRender.length;
            tileIndex < tileLength;
            ++tileIndex
        ) {
            const tile = tilesToRender[tileIndex];
            const surfaceTile = tile.data;
            const tileImageryCollection = surfaceTile.imagery;
            let imageryIndex = 0;
            const imageryLen = tileImageryCollection.length;
            while (imageryIndex < imageryLen) {
                const tileImagery = tileImageryCollection[imageryIndex];
                const imagery = tileImagery.readyImagery;
                ++imageryIndex;
                if (!imagery){
                    continue;
                }

                const provider = imagery?.imageryLayer?.imageryProvider;
                if (provider?.onTileLoad) {
                    provider.onTileLoad(
                        imagery.x,
                        imagery.y,
                        imagery.level
                    );
                }

            }
        }
    }

    originalTileProvider.call(this, frameState);
}

class GroundImageryProvider {
    constructor(url, options = {}) {
        console.log('Initializing GroundImageryProvider');

        // 基础配置
        this.tilingScheme = this._tilingScheme = options.tilingScheme || new Cesium.WebMercatorTilingScheme();
        this.rectangle = this._rectangle = this._tilingScheme.rectangle;
        this.tileSize = this._tileSize = options.tileSize || 256;
        this.tileWidth = this._tileWidth = this._tileSize;
        this.tileHeight = this._tileHeight = this._tileSize;
        this.maxZoom = this._maximumLevel = options.maximumLevel || 27;
        this.minZoom = options.minimumLevel || 13;
        this._height = options.height || 0;
        this.hasAlphaChannel = true;
        this._viewer = options.viewer;
        this._wmsParams = options.wmsParams;
        this._rendered = false;

        // 状态标识
        this.ready = this._ready = true;
        this.destroyed = this._destroyed = false;
        this._url = url;
        this._tilePrimitives = new Map();

        // 直接标记为就绪
        this.readyPromise = this._readyPromise = Promise.resolve(true);
    }

    static fromUrl(url, options) {
        const provider = new GroundImageryProvider(url, options);
        return provider;
    }

    // 新增WMS BBOX计算
    _calculateWMSBBox(x, y, level) {
        const tilingScheme = this._tilingScheme;
        const rectangle = tilingScheme.tileXYToRectangle(x, y, level);

        // 根据CRS版本处理坐标顺序
        if (this._wmsParams.version === '1.3.0' && this._wmsParams.crs === 'EPSG:4326') {
            return `${rectangle.south * 180 / Math.PI},${rectangle.west * 180 / Math.PI},` +
                `${rectangle.north * 180 / Math.PI},${rectangle.east * 180 / Math.PI}`;
        } else {
            return `${rectangle.west * 180 / Math.PI},${rectangle.south * 180 / Math.PI},` +
                `${rectangle.east * 180 / Math.PI},${rectangle.north * 180 / Math.PI}`;
        }
    }

    // 构建WMS请求URL
    _buildWMSUrl(x, y, level, bbox) {
        const params = {
            service: 'WMS',
            request: 'GetMap',
            width: this._tileSize,
            height: this._tileSize,
            bbox: bbox,
            ...this._wmsParams
        };

        const query = Object.entries(params)
            .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
            .join('&');

        return `${this._url}?${query}`;
    }

    // 标准URL构建（原有逻辑）
    _buildStandardUrl(x, y, level) {
        return this._url
            .replace('{x}', x)
            .replace('{y}', y)
            .replace('{z}', level);
    }

    requestImage(x, y, level) {
        console.log(`Loading tile x:${x}, y:${y}, level:${level}`);
        //替换URL模板参数
        if (level < this.minZoom || level > this.maxZoom){
            return new Promise((resolve, reject) => {
                resolve(null);
            });
        }
        let url;
        if (this._wmsParams) {
            const bbox = this._calculateWMSBBox(x, y, level);
            url = this._buildWMSUrl(x, y, level, bbox);
        } else {
            url = this._buildStandardUrl(x, y, level);
        }

        let _this = this;
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.crossOrigin = "anonymous"; // 处理跨域请求

            image.onload = () => {
                // 创建原始几何体并存储引用
                _this._createGroundPrimitive(x, y, level, image);
                resolve(image);
            };

            image.onerror = (e) => {
                //console.error(`Failed to load tile: ${url}`, e);
                reject(new Cesium.TileProviderError("Failed to load image", undefined, x, y, level));
            };

            image.src = url;
        });
    }

    onTileDestroy(x, y, level) {
        const key = `${level}/${x}/${y}`;
        const primitive = this._tilePrimitives.get(key);
        if (primitive) {
            //to do 网络请求取消，提升性能
            console.log(`Destroy tile ${key}`);
            this.destroyPrimitive(primitive);
            this._tilePrimitives.delete(key);
        }
    }

    onTileLoad(x, y, level) {
        const key = `${level}/${x}/${y}`;
        const primitive = this._tilePrimitives.get(key);
        if (primitive) {
            //to do 网络请求取消，提升性能
            primitive.show = true;
        }else{
            console.log(key +"---error");
        }
    }

    clearAll(){
        this._tilePrimitives.forEach((primitive) => {
            primitive.show = false;
        });
    }

    destroyPrimitive(primitive) {
        const scene = this._viewer.scene;
        if (!scene || !primitive) return;
        // 分阶段销毁
        try {
            // 1. 移除原始对象
            scene.primitives.remove(primitive);
        } catch (e) {
            console.warn('Primitive销毁异常:', e);
        }
    }

    _createGroundPrimitive(x, y, level, image) {
        const scene = this._viewer.scene;
        if (!scene) {
            console.error('No active scene found');
            return null;
        }

        const key = `${level}/${x}/${y}`;
        if (this._tilePrimitives.get(key)){
            return;
        }


        const primitive = new Cesium.GroundPrimitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(
                        x * 1.0 / Math.pow(2, level) * 360 - 180,
                        Math.atan(Math.sinh(Math.PI * (1 - 2 * (y + 1) / Math.pow(2, level)))) * 180 / Math.PI,
                        (x + 1) * 1.0 / Math.pow(2, level) * 360 - 180,
                        Math.atan(Math.sinh(Math.PI * (1 - 2 * y / Math.pow(2, level)))) * 180 / Math.PI,
                    ),
                    height: 0.0
                })
            }),
            appearance: new Cesium.MaterialAppearance({  // 改用 MaterialAppearance
                material: new Cesium.Material({
                    fabric: {
                        type: 'Image',
                        uniforms: {
                            image: image,  // 使用传入的图片资源
                            //depthOffsetFactor: 1.0
                        }
                    },
                    translucent: true  // 根据图片透明度需要设置
                }),
                flat: true,          // 保持平面着色
                closed: true,        // 是否闭合几何体
            }),
            asynchronous: false,
            classificationType: Cesium.ClassificationType.BOTH,
            // 重要参数：启用释放控制
            releaseGeometryInstances: true, // 允许释放几何实例
            allowPicking: false,            // 禁用拾取减少引用
            _zIndex: Math.ceil(this._height * 10),
        });

        scene.primitives.add(primitive);
        this._tilePrimitives.set(key, primitive);
        return primitive;
    }


    pickFeatures(x, y, level, longitude, latitude) {
        console.log(`Pick features at x:${x}, y:${y}, level:${level}`);
        const key = `${level}/${x}/${y}`;
        const primitive = this._tilePrimitives.get(key)

        return undefined; // 禁用要素拾取
    }

    destroy() {
        console.log('Destroying provider');
        // 清理所有原始几何体
        this._tilePrimitives.forEach((primitive) => {
            this.destroyPrimitive(primitive);
        });
        this._tilePrimitives.clear();
        this._destroyed = true;
    }

    get isDestroyed() {
        return this._destroyed;
    }
}

pengda63
关注
Cesium模型贴地、贴地画线
祁_z
10-17 645
cesium模型贴地的两种处理方法 第一种：将代码中的【polyline】改为【corridor】 第二种：添加 clampToGround: true
37.（cesium篇）cesium加载gltf模型（贴地）
GIS之家家长
03-30 1550
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 该示例运行需要下载“完整代码包” 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></scri
【Cesium解读】Cesium中primitive/entity贴地
警警的博客
05-14 3615
Cesium中primitive/entity贴地
Cesium使用primitive添加点线面(贴地)
最新发布
胡萝卜先生的进阶之路
06-02 455
面贴地显示：为面图元设置了classificationType属性。
Cesium12-Cesium绘制实体贴地图形
m0_56492004的博客
03-15 3251
绘制的实体(通常是指平面图形而不是立体几何图形)贴合在地形表面或者倾斜摄影模型表面。
Cesium贴地线实现
09-03
Cesium-1.35 下测试通过，通过逐点计算高程完成贴地，效率比较低，也算一种实现方式。
Cesium实现贴地线
Baker的博客
09-03 952
顾名思义就是贴着地画一条线，用到的组件是polyline，这里和Threejs的用法不大相同，cesium通常都用类似json的方式设置组件属性，类似百度echarts里设置图表的用法。下这里给线设置点，点是有经纬度组成，组件会根据点的顺序连接成一条线。并且可以设置线的宽度，颜色等。下面是源码： <!DOCTYPE ...
cesiumjs瓦片数据 3dtiles
07-14
通过利用现代浏览器的强大图形处理能力，CesiumJS可以实现在网页上进行复杂的三维地形渲染、模型加载、动态交互等功能。它被广泛应用于地理信息系统（GIS）、地球科学可视化、虚拟现实（VR）等领域。 #### 二、3D ...
Cesium：Billboard贴地&细节参数调整
席木木的博客
03-27 2523
Cesium：Billboard贴地&细节参数调整，介绍存在&不存在地形服务两种情况下，Billboard的贴地处理方式，以及相关的细节参数调整。
Cesium 实体、3d瓦片、鼠标事件、三维模型、粒子效果、点聚合、数据加载
zhushanlin的博客
05-26 514
1.3 由Geometry(几何形状)、(Appearance)外观组成…1.1 更接近底层,性能消耗较小，要素很多时使用primitive。7、加载 load3dtiles。1、实体 primitive。1.2 可以绘制高级图形。
cesium让模型贴地
02-22
### 实现Cesium模型贴地效果 在Cesium中实现模型贴地效果涉及几个关键步骤。通过调整模型的位置和高度，可以确保模型紧密贴近地形表面。 #### 设置模型位置 为了使模型紧贴地面，需要计算模型相对于地球表面的...
37.（cesium篇）cesium加载gltf模型（贴地）.zip
06-08
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“37.（cesium篇）cesium加载gltf模型（贴地）”。如下载有问题，可联系博主。 解压密码：cesium
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
05-21
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
cesium加载3dtiles格式的倾斜摄影模型数据
05-03
Cesium就是基于WebGL实现3D可视化，使3D地图可以在任何支持WebGL的设备上运行。 5. **数据加载与优化**：在Cesium中加载3DTiles数据时，会自动进行LOD（Level of Detail）优化，根据观察者的位置和视角，动态地加载...
Cesium中添加entitie模型，实现贴地。
webMinStudent的博客
03-20 5469
1.Cesium中添加entitie模型，实现贴地。 2. 添加模型 const createModel = (url) => { const entity = viewer.entities.add({ name: '这是一个模型', position: Cesium.Cartesian3.fromDegrees({ -123.0744619, 44.0503706, 100 }), model: { uri: url, minimumPixelSize: 128,
cesium 矢量面贴倾斜模型
pwl124的博客
07-25 1746
cesium 矢量面贴倾斜模型
cesium服务加载-wms贴模型加载
qq_33416536的博客
12-20 850
接上一篇，继续讲讲wms贴模型的事儿， 太久没更新了，有点惭愧，浑浑噩噩又一年。争取以后更新文章快一点…
Cesium给物体添加贴图
Baker的博客
09-07 1596
之前有讲过在Cesium的地球上放置一个正方体，这节在正方体上添加贴图，使他看起来更美观一点，贴图可以用哪个任何的图片，我这里就随便找一张放上去，主要演示实现效果和用法。步骤还是和之前一样，先在地球上放置一个正方体，然后再通过改变正方体的材质，添加材质的图片为选中的图片，最后将配置好的正方体加载到场景中。具体的步骤和代码如...
cesium编程入门(七)3D Tiles，模型旋转
weixin_30779691的博客
01-24 550
cesium编程入门（七）3D Tiles，模型旋转 上一节介绍了3D Tiles模型的位置移动，和贴地的操作，这一节来聊一聊模型的旋转， 参考《WebGl编程指南》的第四章 假设在X轴和Y轴构成的平面上，要让物体旋转角度为β，那么公式如下： 由此思路就出来了： 根据要旋转的角度，构建一个三阶旋转矩阵 获取3D tiles 的旋转矩阵modelMatrix，然后与旋转矩阵运算， 最后将计算结果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值