Cesium高性能渲染海量矢量建筑

已于 2024-08-30 16:11:36 修改
阅读量192 收藏
点赞数 2
文章标签： webgl 图形渲染
于 2024-07-26 16:42:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014556081/article/details/140719259
版权

0、数据输入为类似Geojson的压缩文件和纹理图片，基于DrawCommand命令绘制；

1、自定义建筑几何，包括顶点、法线、纹理等；

2、自定义纹理贴图，包括按建筑高度贴图、按距离贴图，mipmap多级纹理；

3、自定义批处理表和ID纹理，支持单个显示控制和鼠标交互。

效果

部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>北京建筑</title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css" />
    <script type="text/javascript" src="./scripts/element.index.js"></script>
    <link rel="stylesheet" href="./scripts/element.index.css">
    <!-- <script src="https://cdn.jsdelivr.net/npm/pbf"></script> -->
</head>

<body>
    <div id="global"></div>
    <script type="module">
        import CustomPrimitive from './html/performance/CustomPrimitive.js';
        import CustomTexture from './html/performance/CustomTexture.js';
        import CustomWallGeometry from './html/performance/CustomWallGeometry.js';
        import { showLoading, hideLoading, setText } from './html/performance/loadingUtil.js';
        new Vue({
            el: "#global",
            template: `<div id="cesiumContainer"></div>`,
            mounted() {
                this.init3D();
                this.addTestPrimitive();
                setTimeout(() => {
                    showLoading();
                    this.creatWall();
                }, 1000);
                setTimeout(() => {
                    console.log('viewer.scene.frameState.commandList', viewer.scene.frameState.commandList);
                }, 5000);
            },
            methods: {
                init3D() {
                    window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
                        contextOptions: {
                            id: "cesiumCanvas",
                            webgl: {
                                preserveDrawingBuffer: false,
                            },
                            showRenderLoopErrors: true,
                        },
                        geocoderType: ANOVGIS.GeocoderType.TIANDITU,
                        vrButton: false,
                        baseLayerPicker: true,
                        fullscreenButton: true,
                        homeButton: true,
                        sceneModePicker: true,
                        navigationHelpButton: true,
                        copyRight: false,
                        showMapInfo: true,
                        drillPick: false,
                    });
                    top.viewer = window.viewer;
                    viewer.setOptions({
                        enableFxaa: true,
                    });
                    viewer.nativeObjCesium.shadowMap.maximumDistance = 1300;
                    let time = 0;
                    setInterval(() => {
                        // 改变时间设置光照效果
                        let date = new Date().getTime() + time
                        let utc = Cesium.JulianDate.fromDate(new Date(date))
                        //北京时间
                        viewer.nativeObjCesium.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate())
                        time = time + 5000 * 60
                    }, 100)
                },

                

                locate() {
                    ANOVGIS.LocateUtil.flyToPosition(viewer, '116.4244631,39.8453427', 0, -35, 5000, 2, null);
                },

                creatWall() {
                    
                    this.addBuildingWallsToViwer(0, datasArr);
                },
                async addBuildingWallsToViwer(indexB, arr) {
                    // 模拟异步操作
                   
                },
                getFile(path, callback) {
                    return fetch(path, {
                        responseType: 'arraybuffer'
                    }).then(res => {
                        return res.arrayBuffer();
                    }).then(data => {
                        let geojson = geobuf.decode(new Pbf(data))
                        callback(geojson);
                    })
                },
                addWallPrimitive(buildingMaterial) {
                    const buildsArr = buildingMaterial.buildingdatas;
                    const customWallGeometry = new CustomWallGeometry({
                        buildsArr,
                        textureWidth: buildingMaterial.textureWidth
                    });
                    const geometryCombined = customWallGeometry.createGeometry(buildsArr);
                    const attributeLocations = {
                        position3DHigh: 0,
                        position3DLow: 1,
                        normal: 2,
                        st: 3
                    };
                    let texture;
                    const customTexture = new CustomTexture();
                    customTexture.getMipmapTexture(viewer.scene.context, '../modelData/building/' + buildingMaterial.material[0], (t) => {
                        texture = t;
                    });
                    const customPrimitive = new CustomPrimitive({
                        geometry: geometryCombined,
                        attributeLocations: attributeLocations,
                        receiveShadows: true,
                        castShadows: true,
                    })
                    return viewer.scene.primitives.add(customPrimitive);
                },
                addBuildTops(buildingMaterial) {
                    const buildsArr = buildingMaterial.buildingdatas;
                    const topsInstancesArr = [];
                    for (let index = 0; index < buildsArr.length; index++) {
                        const element = buildsArr[index];
                        const positionsCartesian3 = element.positions;
                        const buildingHeight = element.height;
                        const topInstance = new Cesium.GeometryInstance({
                            geometry: Cesium.PolygonGeometry.createGeometry(new Cesium.PolygonGeometry({
                                polygonHierarchy: new Cesium.PolygonHierarchy(
                                    positionsCartesian3
                                ),
                                height: buildingHeight
                            }))
                        });
                        topsInstancesArr.push(topInstance);
                    }
                    const geometryCombined = Cesium.GeometryPipeline.combineInstances(topsInstancesArr)[0];
                    const attributeLocations = {
                        position3DHigh: 0,
                        position3DLow: 1,
                        normal: 2,
                        st: 3
                    };
                    let texture;
                    const customTexture = new CustomTexture();
                    customTexture.getMipmapTexture(viewer.scene.context, '../modelData/building/' + buildingMaterial.topMaterial[0], (t) => {
                        texture = t;
                    })
                    const topsPrimitive = new CustomPrimitive({
                        geometry: geometryCombined,
                        attributeLocations: attributeLocations,
                        receiveShadows: true,
                        castShadows: false,
                        uniformMap: {
                            myImage: () => {
                                if (Cesium.defined(texture)) {
                                    return texture;
                                } else {
                                    return viewer.scene.context.defaultTexture;
                                }
                            }
                        },
                    })
                    return viewer.scene.primitives.add(topsPrimitive);
                },
            }
        })
    </script>
</body>

</html>

苹果园dog
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UE5、CesiumForUnreal实现建筑白模生成及白模美化功能
专注GIS开发
04-20 2237
UE5、CesiumForUnreal实现基于GeoJson生成建筑白模并美化功能
UE5、CesiumForUnreal实现建筑白模生长动画效果
weixin_39818775的博客
05-09 1179
利用UE5和CesiumForUnreal插件，可以实现建筑白模的生长动画效果，直观展示建筑的建设过程。
Cesium加载矢量数据探索——从geojson到矢量切片
wenyeqv的博客
02-27 1460
通常来说，对于简单的shp数据，最常规的处理方式是通过geojson格式在cesium中进行加载，而cesium也为加载geojson及后续操作提供了丰富的api。
Cesium深入浅出之3dtiles渲染
Helsing的专栏
09-05 1万+
引子 接触Cesium一年有余了，期间靠胡吃海塞吸收了很多有用的、没用的知识和技术，感觉有点消化不良，今天终于有时间来梳理一下了。之前一直搞二维的，对三维技术只能算是半路出家，所以我可不敢写法克鸡丝那般的文章，对三维原理理解平平，可不敢误人子弟，但写写心得还是可以的。我想写一个Cesium深入浅出系列，一说到深入浅出这个词大家肯定觉得非常熟悉，因为有太多的所谓深入浅出的技术类文章了，但我想有相当一部分人其实并不知道深入浅出这个词的意思，深入浅出即将深刻的道理用浅显的语言表述出来，纵观大部分的技术类文章，应
Cesium 100K数据加载 支持弹窗 动态更改位置
qq_41400354的博客
02-27 1618
添加（10k）聚合功能，首次加载时间延长，但是加载成功后流畅度显著提高，并且entity可以同时添加文字和图片。cesium官方未能提供primitive的聚合方法，但是可以用entity的聚合搭配着使用。加载PointPrimitiveCollection点集合，速度快且流畅，也是推荐的方式。不加载图片以及文字的时候20W的点都没问题，虽然帧数就10左右，但是流畅度还行。点击点位时在加载弹窗，及有效的减少加载量，优化性能。本质上还是利用的是entity加载，还是慢加载时间长。同上，只能加载图片。
Cesium是什么，简介
QY'UniverseSpace的博客
03-02 1494
Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 通过Cesium提供的JS API，可以实现以下功能： 全球级别的高精度的地形和影像服务 矢量以及模型数据 基于时态的数据可视化 多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化 1.35版推出3D Tiles规范，支持海量模型数据（..
cesium之3D tiles格式介绍
热门推荐
专注GIS开发
05-04 1万+
cesium子3D Tiles格式介绍
Cesium开发手册
Winn的程序世界
07-02 2942
Cesium开发手册 Cesium介绍 功能 支持数据格式 Cesium知识体系 Cesium在项目中的定位 Cesium学习路线 Cesium进阶之路 （3大方向） Cesium周边 AGI Cesium.com Cesium.github Cesium介绍 Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产...
Cesium开发基础篇 | 063D Tiles介绍及加载
暮紫月升
01-27 6290
上一节我们介绍了glTF的主要数据结构以及Cesium是如何对其进行加载的，这一节我们来介绍一下glTF的升级版3D Tiles ，也是目前 Cesium 在加载海量三维模型数据方面必须采用的一种数据格式。 3D Tiles介绍 3D Tiles 是在glTF的基础上，加入了分层LOD的概念（可以把3D Tiles简单地理解为带有 LOD 的 glTF ），专门为流式传输和渲染海量 3D 地理空间数据而设计的，例如倾斜摄影、3D 建筑、BIM/CAD、实例化要素集和点云。它定义了一种数据分层结构和一组切片格
22.（cesium篇）cesium城市建筑物（颜色表示高度）.zip
06-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“22.（cesium篇）cesium城市建筑物（颜色表示高度）”。如下载有问题，可联系博主。 解压密码：cesium
cesium加载mvt 矢量瓦片
03-06
在IT行业中，矢量瓦片...总结，通过Cesium加载MVT矢量瓦片，开发者可以构建具有高性能、交互性强的3D地图应用，这在GIS、导航、监控等领域有广泛应用。理解并熟练掌握这一技术，对于开发高质量的Web地图服务至关重要。
95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）.rar
07-07
该资源包的执行效果查看地址：...“地图之家”专栏中的“95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）”。如下载有问题，可联系博主。 解压密码：cesium
96.（cesium篇）cesium动态单体化-3D建筑物（楼层）.rar
07-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“96.（cesium篇）cesium动态单体化-3D建筑物（楼层）”。如下载有问题，可联系博主。 解压密码：cesium
23.（cesium篇）cesium城市建筑物光效.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“23.（cesium篇）cesium城市建筑物光效”。如下载有问题，可联系博主。 解压密码：cesium
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 1372
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
五、OpenTK图形渲染基础
仰望星空的博客
08-16 204
在图形渲染中，顶点是构成图形的基本元素。每个顶点可以包含多种属性，如坐标、颜色和纹理坐标。顶点坐标用于确定顶点在空间中的位置。在二维图形中，通常使用 (x, y) 坐标；在三维图形中，则是 (x, y, z)。顶点颜色定义了顶点的颜色值，可以使用 RGB 或 RGBA 格式来表示。纹理坐标用于将纹理图像映射到图形表面，通常在 (u, v) 范围内，其中 u 是水平方向的坐标，v 是垂直方向的坐标。
【Python控制台小游戏】剑与魔法,非对象版本
最新发布
08-29
初学者自制控制台小游戏
cesium 高性能billboard
03-28
1. 高性能：Cesium使用WebGL技术进行渲染，能够处理大量的Billboard对象而不影响性能。 2. 自定义样式：可以通过设置图像、颜色、大小、旋转等属性来自定义Billboard的外观。 3. 交互性：可以为Billboard添加鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苹果园dog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值