cesium绘制三角网可视化及mesh网格数据解析

可视化运行效果(水质污染扩散)
在这里插入图片描述
实现运行效果
在这里插入图片描述
在这里插入图片描述

术语

Mesh网格数据解析

Mesh(网格)在不同领域有不同的应用和定义。在计算机网络中,Mesh网络指的是一种无中心的网状结构,每个节点都与其他节点相连。而在3D计算机图形学中,Mesh是一个由许多小而简单的三角形构成的3D模型。

Mesh网格的应用场景
  1. 三维建模:Mesh用于创建三维模型,提供网格、曲面及多边形建模技术。
  2. 游戏开发:构建游戏角色、场景和特效。
  3. 计算机辅助设计(CAD):建立几何模型,提供建模工具和技术。
  4. 数值分析:用于数值分析、有限元模拟和计算流体动力学等计算应用程序。
  5. 医学领域:生成三维重建的解剖结构。
  6. 建筑设计:建立建筑外观、结构和平面图。
  7. 制造业:模拟非线性、动态和多物理场景下的部件行为。
  8. 流体力学:用于数值模拟和计算流体力学。
  9. 结构力学:用于有限元分析和结构优化。
  10. 计算机动画:用于人物建模、环境建模和特效制作。
  11. 环境工程:水污染扩散模拟,水质模拟预测。
Cesium中的Mesh网格可视化

Cesium是一个强大的三维地理空间可视化平台,它支持对Mesh网格数据的解析和可视化。通过Cesium,可以将Mesh网格数据转化为可视化的三角网格模型,实现以下功能:

  • 数据解析:解析各种格式的Mesh网格数据。
  • 三角网格生成:将网格数据转换为三角网格,用于可视化。
  • 动态渲染:根据视角和光照条件动态渲染三角网格。
  • 交互操作:支持用户与三角网格模型的交互操作,如旋转、缩放和探索。
实现步骤
  1. 数据准备:收集并准备Mesh网格数据。
  2. 数据导入:将Mesh数据导入Cesium平台。
  3. 网格解析:解析网格数据,提取网格结构和属性。
  4. 三角网格构建:根据解析结果构建三角网格模型。
  5. 可视化设置:设置光照、材质和其他视觉效果参数。
  6. 用户交互:实现用户与三角网格模型的交互功能。

通过上述步骤,可以在Cesium中实现Mesh网格数据的解析及可视化,为用户提供直观、动态的三维网格模型展示。

解析接口关键代码编写

//http://localhost:8085/ReadMesh/getMeshDataFiltered?FileName=A.mesh@RequestMapping(value = "/getMeshDataFiltered",method = RequestMethod.GET)
public @ResponseBody Map getMeshDataFiltered(String FileName) {//! 获取传入的参数,存在传入的文件名,则替换默认的文件名String defaultfilename = "A.mesh";String filename = FileName;if (!filename.isEmpty()){defaultfilename = filename;}String Meshpath = defaultfilename;String fileTyle = Meshpath.substring(Meshpath.lastIndexOf("."),Meshpath.length());Map map = new HashMap();if (fileTyle.equals(".mesh")){map = GenDataFromMesh(Meshpath);}if (fileTyle.equals(".msh")){map = GenDataFromMsh(Meshpath);}return  map;
}
前端可视化关键代码编写primitiveTriangle:{isRLayerPanel: true,primitives:[],url: '/static/data/trangles.json',dataPath: '',dataIdField: 'code',options:{id:'primitiveTriangle',name:'三角格网',type:'triangles',isShow: false},location: {"destination":{"x":-2194142.1719457568,"y":4477352.104342483,"z":3981503.0453665117},"orientation":{"heading":6.283185231778362,"pitch":-0.6090220537393618,"roll":7.622047348831984e-8},duration: 2},entityType:'primitive'
}
<template><div class="container"><div id="cesiumContainer1" style="height: 85%"><div id="tooltippop" class="ol-popup-tip" style="display:none; z-index:120; height:30px;"><div id="tooltip-title"></div><div id="tooltip-content"></div></div><div id="gisToolPopoup"><GisTool :zjnCesium="zjnCesium" @setLayerVisible="setLayerVisible"  @zoomToC="zoomToC"></GisTool></div><div id="layersPanel"><layerPanel :layersInfo="layersInfo" @setLayerVisible="setLayerVisible"  @zoomToC="zoomToC"></layerPanel></div></div><popHover :popHoverInfo="popHoverInfo" :popHoverScreenPoint="popHoverScreenPoint" :popHoverVisible="popHoverVisible"></popHover><popClick :popAspect="popAspect" :popClickScreenPoint="popClickScreenPoint" :popClickVisible="popClickVisible" :popClickTitleInfo="popClickTitleInfo" :popClickContentInfo="popClickContentInfo"></popClick><div class="CoordinateLabel"><p><label id="lon"></label></p><p><label id="lat"></label></p><p><label id="cdem"></label></p><p><label id="cvInfo"></label></p></div><div><input value="获取当前视图" type="button" style="height: 50px;width:100px" @click="getCv()"></div></div></template><script>// import { Viewer,createWorldTerrain,Cesium3DTileset,WebMapTileServiceImageryProvider,ImageryLayer,Cartesian3,HeadingPitchRange,Math} from 'cesium/Cesium'import  'cesium/Widgets/widgets.css'import './renderStyle/index.css'import GisTool from "./gisTool"import ZJNCesium from './ZJNCesium.js'import layerPanel from './widgets/layerPanel/index'import popHover from './widgets/popHover/index'import popClick from './widgets/popClick/index'import {layersInfo} from './store/LayersInfo'import {LayersRenderSet} from './renderSet/LayersRenderSet'import {LayersRenderLabelSet} from './renderSet/LayersRenderLabelSet'import {layerMsgClick} from "./layerMsg/LayerMsgClick";import {CommonDrawEntities,CommonDrawEntitiesByLayerID,CommonDrawWallEntities,CommonDrawPolylineEntities,setLayerVisible,CommonDrawPolygonEntities,CommonDrawPointEntitiesByUrl,CommonDrawWallEntitiesByUrl,CommonDrawPolylineEntitiesByUrl,CommonDrawPolygonEntitiesByUrl,CommonDrawCorridorEntitiesByUrl,CommonDrawByGeojson,CommonDrawPolylineVolumeEntitiesByUrl,CommonDrawWindyEntitiesByUrl,CommonDrawHeatmapByUrl,CommonDrawPrimitiveEntitiesByUrl,CommonCreateMeshGrid,CommonCreateMeshTriangle} from './MapCommon'import {carDatas} from "../../common/api/carRoad"import {linedata,polygondata} from "./data/pointlinepolygon"import {TransferSimUtil} from "./utils/TransferSimUtil"var zjnCesium;export default {name: "earth",components: {layerPanel,GisTool,popHover,popClick},data() {return {zjnCesium: null,popHoverScreenPoint: {x: null, y: null},popHoverInfo: '',popHoverVisible: false,popClickScreenPoint: {x: null, y: null},popAspect:{cWidth: 600, cHeight: 400},popClickPoint: null,popClickTitleInfo: '',popClickContentInfo: '',popClickVisible: false,transferSimUtil: null,buttondaohe:"道合",layersInfo:layersInfo,modelList:{daohe:{x: -2412207.790025016,y: 4418038.146476992,z: 3904021.2752170297},daoheOrientation:{heading : 0,pitch : -0.3,roll : 0},caike:{x: -2399848.645912107,y: 4425276.703809752,z: 3903524.9361700616},caikeOrientation:{heading : 0,pitch : -0.3,roll : 0},dairuike:{x: -2398945.254669891,y: 4426231.6794353435,z: 3903000.9872286734},dairuikeOrientation:{heading : 0,pitch : -0.3,roll : 0},guangyue:{x: -2410663.34105633, y: 4417042.059943647, z: 3905962.3976926757},guangyueOrientation:{heading: 3.282430123199906,pitch: -0.20432213919653686,roll: 7.223571873993251e-7}},};},methods:{setPosition:function (key){zjnCesium.viewer.camera.flyTo({destination : this.modelList[key],orientation : this.modelList[key+'Orientation'],duration: 2});},getCv:function (){let cp=zjnCesium.getCurrentViewPosition();document.getElementById('cvInfo').innerText=JSON.stringify(cp);// this.transferSimUtil.RemoveTrack()// this.setViewType(1)},MousemoveCallback(data,layerId,c){// debuggerif (layersInfo[layerId] && layersInfo[layerId].floatLabelInfo) {this.popHoverScreenPoint.x = c.x + layersInfo[layerId].floatLabelInfo.offsetXthis.popHoverScreenPoint.y = c.y + layersInfo[layerId].floatLabelInfo.offsetYthis.popHoverInfo = data[layersInfo[layerId].floatLabelInfo.floatLabelField]this.popHoverVisible = true} else {this.popHoverVisible = false}},MouseclickCallback(data,layerId){if (layersInfo[layerId].CustomPopupTemplate) {this.popClickTitleInfo = data[layersInfo[layerId].CustomPopupTemplate.titleField]this.popClickContentInfo = layersInfo[layerId].CustomPopupTemplate.contentlet attrs = Object.keys(data)for (let i = 0; i < attrs.length; i++) {this.popClickContentInfo = this.popClickContentInfo.replaceAll('{' + attrs[i] + '}', data[attrs[i]])}this.popAspect.cWidth = layersInfo[layerId].CustomPopupTemplate.widththis.popAspect.cHeight = layersInfo[layerId].CustomPopupTemplate.heightthis.popClickVisible = true}if(layerMsgClick[layerId] !== undefined){for(var i = 0; i < layerMsgClick[layerId].length; i++){var mcmd = layerMsgClick[layerId][i].method+'(';for(var j = 0; j < layerMsgClick[layerId][i].params.length; j++){mcmd += layerMsgClick[layerId][i].params[j];if(j < layerMsgClick[layerId][i].params.length - 1){mcmd += ',';}}mcmd += ')';eval(mcmd);}}},setLayerVisible(layerId, visible){setLayerVisible(layersInfo,layerId,visible)var testdata = [[115.66560745239256,34.41760191899927],[115.67530632019043,34.41795594404557],[115.685133934021,34.4180621512672],[115.69406032562254,34.4180621512672],[115.69509029388428,34.41700007298082],[115.69547653198244,34.416079594221465],[115.69607734680174,34.414769664672725],[115.69620609283447,34.41186650444182],[115.69624900817871,34.41048569775086],[115.69612026214601,34.40917568058836],[115.69067001342772,34.409211086727375],[115.69071292877196,34.402412833257614]]// this.transferSimUtil.SimulateTansfer(testdata)},zoomToC(location){zjnCesium.viewer.camera.flyTo(location);},testClick(re,layerId){debugger},setViewType(viewType){//0二维,1三维zjnCesium.setViewType(viewType)},// setLayerOpacity (layerId, opacity) {//   // getLayerByCode(this.smap, layerId).setOpacity(opacity)// }},mounted() {zjnCesium = new ZJNCesium("cesiumContainer1");this.zjnCesium = zjnCesiumzjnCesium.initMap()for (let key in layersInfo){if(layersInfo[key].entityType == 'rectangle'){CommonDrawEntitiesByLayerID(zjnCesium,layersInfo,key)}else if((layersInfo[key].entityType == 'point' || layersInfo[key].entityType == 'billboard' || layersInfo[key].entityType == 'ellipse' || layersInfo[key].entityType == 'cylinder' || layersInfo[key].entityType == 'box' || layersInfo[key].entityType == 'ellipsoid') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawPointEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if(layersInfo[key].entityType == 'heatmap'){CommonDrawHeatmapByUrl(zjnCesium,layersInfo,key)}else if((layersInfo[key].entityType == 'wall') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawWallEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'line') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawPolylineEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'corridor') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawCorridorEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'polylineVolume') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawPolylineVolumeEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'polygon') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawPolygonEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'primitive') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawPrimitiveEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else if((layersInfo[key].entityType == 'windy') && layersInfo[key].url != undefined && layersInfo[key].url != ""){CommonDrawWindyEntitiesByUrl(zjnCesium,layersInfo,key)}else if(layersInfo[key].entityType == 'glb'){zjnCesium.CommonCreateGlbEntityModel(layersInfo[key])}else if(layersInfo[key].entityType == 'geojson'){CommonDrawByGeojson(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)}else{zjnCesium.commonAddProviderLayer(layersInfo,key)}}// CommonCreateMeshTriangle(undefined,zjnCesium,layersInfo,'')// CommonCreateMeshGrid(zjnCesium,layersInfo,'')// CommonCreateMesh(undefined,zjnCesium,layersInfo,'')// CommonDrawEntities(outputData,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'outPutPoint','lng','lat','outPutId')// // setLayerVisible(layersInfo,'outPutPoint',false)// CommonDrawWallEntities(roadData,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'roadWall','positions','minimumHeights','code')// CommonDrawPolylineEntities(linedata,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'rline','positions','code')// CommonDrawPolygonEntities(polygondata,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'rpolygon','positions','code')// carDatas().then((res)=>{//   // CommonDrawWallEntities(res.data,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'roadWall','positions','minimumHeights','code')// })// setLayerVisible(layersInfo,'roadwall',false)// zjnCesium.createGltfEntityModel('/static/model/bingdundun.glb','gltf','xmf',115.650964712670241,34.44454369992611,{heading: 90, pitch: 0, roll: 0})//绑定鼠标移动,点击等事件zjnCesium.bindMousemoveDefault(this.MousemoveCallback);zjnCesium.bindLonLatOnMouseMove("lon", "lat", "cdem");//地图点击zjnCesium.bindClickDefault(this.MouseclickCallback);//设置初始视野zjnCesium.Home();this.transferSimUtil = new TransferSimUtil(zjnCesium)}};
</script>
<style>
#layersPanel{position: absolute;top: 50px;right: 300px;z-index: 999;
}
#gisToolPopoup{position: absolute;top: 50px;left: 20px;z-index: 999;
}
</style>

如果对恁有帮助,请点赞打赏支持,多谢!

技术合作交流qq:2945853209

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

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

相关文章

云原生Kubernetes: K8S 1.26版本 部署KubeSphere

目录 一、实验 1.环境 2.K8S 1.26版本部署HELM 3.K8S 1.26版本 部署KubeSphere 4.安装KubeSphere DevOps 二、问题 1.如何安装Zadig 2.扩展插件Zadig安装失败 3.calico 如何实现不同node通信 4.如何清除docker占用的磁盘空间 5.如何强制删除资源 6.namespace删除不…

宿舍管理系统--毕业设计

毕业设计&#x1f4bc;MD5加密&#x1f512;SSM框架&#x1f3a8;Layui框架&#x1f384; 实现功能 管理员的登录与登出 管理员,班级,学生,宿舍&#xff0c;卫生&#xff0c;访客各模块增删改查 个别模块关联查询 各个模块数据导出Excel 一些截图

[4]CUDA中的向量计算与并行通信模式

CUDA中的向量计算与并行通信模式 本节开始&#xff0c;我们将利用GPU的并行能力&#xff0c;对其执行向量和数组操作讨论每个通信模式&#xff0c;将帮助你识别通信模式相关的应用程序&#xff0c;以及如何编写代码 1.两个向量加法程序 先写一个通过cpu实现向量加法的程序如…

软件设计:基于 python 代码快速生成 UML 图

1. 官方文档 PlantUML Language Reference Guide Comate | 百度研发编码助手 百度 Comate (Coding Mate Powered by AI) 是基于文心大模型的智能代码助手&#xff0c;结合百度积累多年的编程现场大数据和外部优秀开源数据&#xff0c;可以生成更符合实际研发场景的优质代码。…

GBDT、XGBoost、LightGBM算法详解

文章目录 一、GBDT (Gradient Boosting Decision Tree) 梯度提升决策树1.1 回归树1.2 梯度提升树1.3 Shrinkage1.4 调参1.5 GBDT的适用范围1.6 优缺点 二、XGBoost (eXtreme Gradient Boosting)2.1 损失函数2.2 正则项2.3 打分函数计算2.4 分裂节点2.5 算法过程2.6 参数详解2.7…

oracle中insert all的用法

1、简述 使用insert into语句进行表数据行的插入&#xff0c;但是oracle中有一个更好的实现方式&#xff1a;使用insert all语句。 insert all语句是oracle中用于批量写数据的 。insert all分又为 无判断条件插入有判断条件插入有判断条件插入分为 Insert all when... 子句 …

利用 MongoDB Atlas 进行大模型语义搜索和RAG

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学. 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总合集&…

基于英飞凌BGT60LTR11AIP E6327芯片具低功耗的脉冲多普勒操作模式常用于汽车应用的雷达上

芯片特征&#xff1a; 60 GHz收发器MMIC&#xff0c;带一个发射器和一个接收器单元封装天线&#xff08;AIP&#xff09;&#xff08;6.73.30.56 mm3)低功耗的脉冲多普勒操作模式自主模式用于运动和运动方向的集成检测器运动检测信号的直接输出目标检测范围的15个可配置阈值检测…

Android14之Binder调试(二百一十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

2024年5月20日优雅草蜻蜓API大数据服务中心v2.0.4更新

v2.0.4更新 v2.0.4更新 2024年5月20日优雅草蜻蜓API大数据服务中心v2.0.4更新-增加ai绘画接口增加淘宝联想词接口底部增加联系方式 更新日志 底部增加联系方式 增加ai绘画接口 增加淘宝联想词接口 增加用户中心充值提示 用户中心内页颜色改版完成 截图 部分具体更新接口信…

【NLP】词性标注

词 词是自然语言处理的基本单位&#xff0c;自动词法分析就是利用计算机对词的形态进行分析&#xff0c;判断词的结构和类别。 词性&#xff08;Part of Speech&#xff09;是词汇最重要的特性&#xff0c;链接词汇和句法 词的分类 屈折语&#xff1a;形态分析 分析语&#…

k8s 1.24.x之后如果rest 访问apiserver

1.由于 在 1.24 &#xff08;还是 1.20 不清楚了&#xff09;之后&#xff0c;下面这两个apiserver的配置已经被弃用 了&#xff0c;简单的说就是想不安全的访问k8s是不可能了&#xff0c;所以只能走安全的访问方式也就是 https://xx:6443了&#xff0c;所以需要证书。 - --ins…

Git系列:git rm 的高级使用技巧

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

【go项目01_学习记录15】

重构MVC 1 Article 模型1.1 首先创建 Article 模型文件1.2 接下来创建获取文章的方法1.3 新增 types.StringToUint64()函数1.4 修改控制器的调用1.5 重构 route 包1.6 通过 SetRoute 来传参对象变量1.7 新增方法&#xff1a;1.8 控制器将 Int64ToString 改为 Uint64ToString1.9…

【数据结构】栈和队列的相互实现

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; 1.用栈实现队列 当队列中进入这些元素时&#xff0c;相应的栈1中元素出栈顺序与出队列相反&#xff0c;因此我们可以使用两个栈来使元素的出栈顺序相同&#xff1b; 通过将栈1元素出栈&#xff0c;再…

Databend 倒排索引的设计与实现

倒排索引是一种用于全文搜索的数据结构。它的主要功能是将文档中的单词作为索引项&#xff0c;映射到包含该单词的文档列表。通过倒排索引&#xff0c;可以快速准确地定位到与查询词相匹配的文档列表&#xff0c;从而大幅提高查询性能。倒排索引在搜索引擎、数据库和信息检索系…

前端 CSS 经典:3D 渐变轮播图

前言&#xff1a;无论什么样式的轮播图&#xff0c;核心 JS 实现原理都差不多。所以小伙伴们&#xff0c;还是需要了解一下核心 JS 实验原理的。 效果图&#xff1a; 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta chars…

MySQL —— 复合查询

一、基本的查询回顾练习 前面两章节整理了许多关于查询用到的语句和关键字&#xff0c;以及MySQL的内置函数&#xff0c;我们先用一些简单的查询练习去回顾之前的知识 1. 前提准备 同样是前面用到的用于测试的表格和数据&#xff0c;一张学生表和三张关于雇员信息表 雇员信息…

优化数据查询性能:StarRocks 与 Apache Iceberg 的强强联合

Apache Iceberg 是一种开源的表格格式&#xff0c;专为在数据湖中存储大规模分析数据而设计。它与多种大数据生态系统组件高度兼容&#xff0c;相较于传统的 Hive 表格格式&#xff0c;Iceberg 在设计上提供了更高的性能和更好的可扩展性。它支持 ACID 事务、Schema 演化、数据…

leetcode-设计LRU缓存结构-112

题目要求 思路 双链表哈希表 代码实现 struct Node{int key, val;Node* next;Node* pre;Node(int _key, int _val): key(_key), val(_val), next(nullptr), pre(nullptr){} };class Solution { public: unordered_map<int, Node*> hash; Node* head; Node* tail; int …