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

代码实现运行效果

技术术语

Mesh通常指网络拓扑中的网状结构。在计算机网络中，Mesh是指每个节点都与其他节点相连，形成一个无中心的网状结构。Mesh网络常见于分布式计算、传感器网络、互联网等场景中。另外，在3D计算机图形学中，Mesh是一个表示3D模型的网络，由许多小而简单的三角形构成；

Mesh（格网）是一种排列成规则网格状的结构，其中的每个单元格都是相同大小和形状的。在计算机图形学、数值分析、计算机辅助设计（CAD）和计算机辅助制造（CAM）等领域，Mesh广泛应用于以下应用场景：

  1. 三维建模：Mesh被用于创建三维模型，能够提供网格、曲面及多边形建模技术。

  2. 游戏开发：游戏开发者使用Mesh来构建游戏角色、场景和特效。

  3. 计算机辅助设计：在CAD中，Mesh用于建立几何模型，它提供了许多建模工具和技术，以便于设计师可以使用Mesh模型来创建复杂的几何形状。

  4. 数值分析：在数学、工程和物理等领域中，Mesh被用于数值分析、有限元模拟和计算流体动力学等计算应用程序中。

  5. 医学领域：在医学图像处理中，Mesh被用于生成三维重建的解剖结构。

  6. 建筑设计：在建筑设计中，Mesh被用于建立建筑外观、结构和平面图。

  7. 制造业：在制造业中，Mesh可以用于模拟非线性、动态和多物理场景下的部件行为，以提高制造效率和减少成本。

  8. 流体力学：Mesh格网可以用于流体力学领域中的数值模拟和计算流体力学等。

  9. 结构力学：Mesh格网可以用于结构力学中的有限元分析和结构优化等。

  10. 计算机动画：Mesh格网可以用于计算机动画中的人物建模、环境建模和特效制作等。

  11. 环境工程：水污染扩散模拟，水质模拟预测。

解析接口关键代码编写

//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：2401315930

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

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

相关文章

MATLAB 之 Simulink 系统仿真实例和 S 函数的设计与应用

MATLAB 之 Simulink 系统仿真实例和 S 函数的设计与应用

这里写目录标题 一、Simulink 系统仿真实例1. 方法一2. 方法二3. 方法三 二、S 函数的设计与应用1. 用 MATLAB 语言编写 S 函数1.1 主程序1.2 子程序 2. S 函数的应用 一、Simulink 系统仿真实例 下面的应用实例我们将分别采用不同建模方法为系统建模并仿真。例如&#xff0c;…
阅读更多...
【AUTOSAR】BMS开发实际项目讲解（三十一）----电池管理系统电池热管理功能

【AUTOSAR】BMS开发实际项目讲解（三十一）----电池管理系统电池热管理功能

电池热管理功能 关联的系统需求 Sys_Req_4101、Sys_Req_4102、Sys_Req_4103、Sys_Req_4104、Sys_Req_4105; 功能实现描述 为保证电池系统的热安全&#xff0c;以及电池系统不同温度环境下的工作性能&#xff0c;本车型具备热管理功能。 表-热管理功能配置 功能 功能描述 …
阅读更多...
vim多文件切换快捷键设置

vim多文件切换快捷键设置

1、基本切换指令 vim中在打开多个文件时&#xff0c;会有多个文件进行切换的需求。按:bn切换到下一个文件&#xff0c;按:bp切换到上一个文件。 2、快捷键设置 为了便捷操作&#xff0c;将切换命令设置成快捷键。 进入/home/yys个人目录下&#xff0c;vim .vimrc进入vimrc文…
阅读更多...
java新特性stream

java新特性stream

stream Java 8 是一个非常成功的版本&#xff0c;这个版本新增的Stream&#xff0c;配合同版本出现的 Lambda &#xff0c;给我们操作集合&#xff08;Collection&#xff09;提供了极大的便利。 Stream将要处理的元素集合看作一种流&#xff0c;在流的过程中&#xff0c;借助…
阅读更多...
Linux性能瓶颈分析之TOP指标分析

Linux性能瓶颈分析之TOP指标分析

Linux性能瓶颈分析之TOP指标分析 文章目录 Linux性能瓶颈分析之TOP指标分析一、查看CPU二、监控CPU总结 一、查看CPU 1.查看cpu基础信息 lscpu2.查看cpu详细信息 cat /proc/cpuinfo3.统计cpu信息 cat /proc/cpuinfo |grep "physical id" |sort |uniq |wc -l 查看…
阅读更多...
Go语言使用net/http实现简单登录验证和文件上传功能

Go语言使用net/http实现简单登录验证和文件上传功能

最近再看Go语言web编程&#xff0c;go语言搭建Web服务器&#xff0c;既可以用go原生的net/http包&#xff0c;也可以用gin/fasthttp/fiber等这些Web框架。本博客使用net/http模块编写了一个简单的登录验证和文件上传的功能&#xff0c;在此做个简单记录。 目录 1.文件目录结构…
阅读更多...
Spring bean 生命周期

Spring bean 生命周期

在互联网领域中&#xff0c;Spring框架扮演着重要的角色。作为一个开源的Java应用程序开发框架&#xff0c;Spring提供了一种灵活而强大的方式来构建可扩展的应用程序。Spring框架中的一个重要概念是Bean&#xff0c;它是Spring应用程序的基本构建块之一。了解Spring Bean的生命…
阅读更多...
多元分类预测 | Matlab粒子群算法(PSO)优化混合核极限学习机(HKELM)分类预测，多特征输入模型，PSO-HKELM分类预测

多元分类预测 | Matlab粒子群算法(PSO)优化混合核极限学习机(HKELM)分类预测，多特征输入模型，PSO-HKELM分类预测

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元分类预测 | Matlab粒子群算法(PSO)优化混合核极限学习机(HKELM)分类预测，多特征输入模型，PSO-HKELM分类预测 多特征输入单输出的二分类及多分类模型。程序内注释详细，直接替换数据就可以用。程序语言为matl…
阅读更多...
Unity UGUI Canvas Overlay模式获取屏幕坐标

Unity UGUI Canvas Overlay模式获取屏幕坐标

UGUI Canvas Overlay模式获取屏幕坐标 &#x1f354;效果&#x1f371;获取 &#x1f354;效果 &#x1f371;获取 ui的position就是屏幕坐标(●’◡’●) var screenPos new Vector2(transform.position.x, transform.position.y);
阅读更多...
力扣 112. 路径总和

力扣 112. 路径总和

题目来源&#xff1a;https://leetcode.cn/problems/path-sum/description/ C题解1&#xff1a;递归法&#xff0c;前序遍历。先把当前节点加入sumtmp&#xff0c;再判断是不是叶子节点&#xff0c;如果是则判断sumtmp与targetSum的大小&#xff0c;不是则对其左右子树再次进行…
阅读更多...
React解决setState异步带来的多次修改合一和修改后立即使用没有变化问题

React解决setState异步带来的多次修改合一和修改后立即使用没有变化问题

我们编写这样一段代码 import React from "react" export default class App extends React.Component {constructor(props){super(props);this.state {cont: 0}}componentDidMount() {this.setState({cont: this.state.cont1})}render(){return (<div>{ thi…
阅读更多...
【前端｜CSS系列第2篇】CSS零基础入门之常用样式属性

【前端｜CSS系列第2篇】CSS零基础入门之常用样式属性

欢迎来到CSS零基础入门系列的第二篇博客&#xff01;作为前端开发的关键技术之一&#xff0c;CSS&#xff08;层叠样式表&#xff09;能够为网页添加各种样式和布局效果。对于前端零基础的小白来说&#xff0c;了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023