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

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

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

2、自定义纹理贴图,包括按建筑高度贴图、mipmap多级纹理;

3、自定义批处理表,支持显示控制和鼠标交互。

效果

部分代码

<!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() + timelet 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876073.shtml

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

相关文章

PHP商城案例

http://www.e9933.com/

使用DuiLib进行UI开发的虚函数解析及控件绑定、响应与消息处理

DuiLib是一个开源的基于DirectUI思想的Windows界面库&#xff0c;提供了灵活且易用的UI界面开发能力。在使用DuiLib进行开发时&#xff0c;我们常常会遇到一些虚函数&#xff0c;它们在不同的阶段被调用&#xff0c;以完成各种初始化和消息处理工作。本文将详细介绍DuiLib中的一…

DVWA中命令执行漏洞细说

在攻击中&#xff0c;命令注入是比较常见的方式&#xff0c;今天我们细说在软件开发中如何避免命令执行漏洞 我们通过DVWA中不同的安全等级来细说命令执行漏洞 1、先调整DVWA的安全等级为Lower,调整等级在DVWA Security页面调整 2、在Command Injection页面输入127.0.0.1&…

手把手教你入门vue+springboot开发(十)--springboot集成WebSocket

文章目录 前言一、springboot集成WebSocket二、后端代码实现1.WebSocket服务端实现2.业务逻辑实现3.ObjectMapper的作用三、前端代码实现四、postman调试总结前言 在B/S开发的有些业务场景中后端需要向前端上报一些事件消息,比如某个用户登录或者退出时,后端需要将此事件通知…

线程安全的艺术:在Perl中实现线程安全的编程

线程安全的艺术&#xff1a;在Perl中实现线程安全的编程 在多线程编程中&#xff0c;确保程序的线程安全性是至关重要的。Perl&#xff0c;作为一种支持多线程的高级编程语言&#xff0c;提供了多种机制来帮助开发者编写线程安全的代码。本文将深入探讨如何在Perl中实现线程安…

AI在Facebook的应用:预见智能化社交的新前景

在数字化时代&#xff0c;社交媒体平台已成为我们生活的重要组成部分&#xff0c;而人工智能&#xff08;AI&#xff09;的快速发展正推动着这些平台向更智能、更个性化的方向发展。Facebook&#xff0c;作为全球最大的社交网络平台之一&#xff0c;正不断探索和应用AI技术&…

mysql面试(七)

前言 本章节列出了mysql在增删改查的时候&#xff0c;分别会涉及到哪些锁类型&#xff0c;又是如何交互的。 这个章节也是mysql面试基础系列的最后一章&#xff0c;后面准备更新redis数据类型和分布式锁相关问题。如果各位看官有什么问题的话&#xff0c;可以留言。 锁 之前…

【MySQL进阶之路 | 高级篇】MVCC三剑客:隐藏字段,Undo Log,ReadView

1. 再谈隔离级别 我们知道事务有四个隔离级别&#xff0c;可能存在三种并发问题&#xff1a; 在MySQL中&#xff0c;默认的隔离级别是可重复读&#xff0c;可以解决脏读和不可重复读的问题&#xff0c;如果仅从定义的角度来看&#xff0c;它并不能解决幻读问题。如果我们想要解…

C++设计模式PIMPL模式

Pimpl是“Pointer to implementation”的缩写&#xff0c;它是一种常用的C设计模式。这种模式的核心思想是将类的实现细节从其接口中分离出来。想象一下&#xff0c;我们生活的世界中充满了这种分离&#xff1a;我们不需要知道电视是如何工作的&#xff0c;只需要知道如何使用遥…

2024年jupyter notebook如何复制单元格cell输出的图片

背景 之前使用jupyter notebook复制图片一直是正常&#xff0c;右键就行&#xff0c;可以找到复制图片或者另存为的选项。 但是最近重新安装了anaconda&#xff0c;发现jupyter notebook升级了&#xff0c;和原来的界面不一样了。 如果有一个图片&#xff0c;我们右键&#x…

【Linux】—管理、设置防火墙规则(firewalld详解)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

[OJ]平均串问题,存在超时问题未解决

众所周知&#xff0c;两个数a和b的平均数计算公式为(ab)/2。 实际上平均数也可以描述为&#xff1a;从较小的数依次遍历到较大的数&#xff0c;将遍历的数放入一个列表中&#xff0c;该列表的中心元素。例如&#xff1a;求 3和7的平均数&#xff0c;列表为{3,4,5,6,7}&#xff…

使用Java和Hazelcast实现分布式数据存储

使用Java和Hazelcast实现分布式数据存储 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在分布式系统中&#xff0c;实现高效的数据存储和管理是非常重要的。Hazelcast作为一个内存数据网格(IMDG)&…

2024-06学习笔记

1.事务与数据库链接的占用 如果用Transactional注解&#xff0c;那在第一次与数据库交互的时候&#xff0c;就会打开数据库链接&#xff0c;再整个方法执行完&#xff0c;才会关闭数据库链接。 即使后边用的事务传播是required_new,那之前的事务也是被挂起&#xff0c;不会被…

计算机网络408考研 历年真题解析

计算机网络408考研 历年真题解析&#xff08;有字幕无背景音乐版&#xff09;_哔哩哔哩_bilibili 网络工程师历年真题大汇总 【软考中级】网络工程师历年真题大汇总&#xff01;&#xff01;&#xff01;含电子版||备考必刷||软考真题||逐题精讲||通关上岸||免费分享&#…

静态路由学习笔记

1. 静态路由应用场景 &#xff08;1&#xff09;静态路由由网络管理员手动配置&#xff0c;配置方便&#xff0c;对系统要求低&#xff0c;适用于拓扑结构简单并且稳定的小型网络。 &#xff08;2&#xff09;缺点是不能自动适应网络拓扑的变化&#xff0c;需要人工干预过多。…

day05 Router、vuex、axios

配置 router和vuex需要在创建vue项目的时候&#xff0c;开始的时候选择Manually select features&#xff0c;于是就可以在下一个创建配置讯问中选择router和vuex。 axios则需要执行命令行&#xff1a; npm install axios -S 之后再在需要发送请求的view导入即可。 router…

研发(RD)注意事项 / 复杂项目规划、控制方法 PERT 和 CPM

注&#xff1a;机翻&#xff0c;未校对&#xff0c;去掉了原文中广告。 What Is Research and Development (R&D)? 什么是研发&#xff08;R&D&#xff09;&#xff1f; Investopedia / Ellen Lindner Research and Development An ongoing effort to develop or impr…

springboot中使用knife4j访问接口文档的一系列问题

springboot中使用knife4j访问接口文档的一系列问题 1.个人介绍 &#x1f389;&#x1f389;&#x1f389;欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的…

Hive3:Centos7环境部署Hive服务

一、安装说明 1、Hadoop集群情况 3台机器&#xff1a;4G2C、2G2C、2G2C 安装教程&#xff1a;Centos7环境安装Hadoop集群 2、安装MySQL&#xff0c;用于存储Hive的元数据 在102机器上安装MySQL 安装MySQL使用服务器的root账号 3、最后安装Hive 安装hive过程使用服务器的atgu…