可視化運行效果(水質污染擴散)
實現運行效果
術語
Mesh網格數據解析
Mesh(網格)在不同領域有不同的應用和定義。在計算機網絡中,Mesh網絡指的是一種無中心的網狀結構,每個節點都與其他節點相連。而在3D計算機圖形學中,Mesh是一個由許多小而簡單的三角形構成的3D模型。
Mesh網格的應用場景
- 三維建模:Mesh用于創建三維模型,提供網格、曲面及多邊形建模技術。
- 游戲開發:構建游戲角色、場景和特效。
- 計算機輔助設計(CAD):建立幾何模型,提供建模工具和技術。
- 數值分析:用于數值分析、有限元模擬和計算流體動力學等計算應用程序。
- 醫學領域:生成三維重建的解剖結構。
- 建筑設計:建立建筑外觀、結構和平面圖。
- 制造業:模擬非線性、動態和多物理場景下的部件行為。
- 流體力學:用于數值模擬和計算流體力學。
- 結構力學:用于有限元分析和結構優化。
- 計算機動畫:用于人物建模、環境建模和特效制作。
- 環境工程:水污染擴散模擬,水質模擬預測。
Cesium中的Mesh網格可視化
Cesium是一個強大的三維地理空間可視化平臺,它支持對Mesh網格數據的解析和可視化。通過Cesium,可以將Mesh網格數據轉化為可視化的三角網格模型,實現以下功能:
- 數據解析:解析各種格式的Mesh網格數據。
- 三角網格生成:將網格數據轉換為三角網格,用于可視化。
- 動態渲染:根據視角和光照條件動態渲染三角網格。
- 交互操作:支持用戶與三角網格模型的交互操作,如旋轉、縮放和探索。
實現步驟
- 數據準備:收集并準備Mesh網格數據。
- 數據導入:將Mesh數據導入Cesium平臺。
- 網格解析:解析網格數據,提取網格結構和屬性。
- 三角網格構建:根據解析結果構建三角網格模型。
- 可視化設置:設置光照、材質和其他視覺效果參數。
- 用戶交互:實現用戶與三角網格模型的交互功能。
通過上述步驟,可以在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>
如果對恁有幫助,請點贊打賞支持,多謝!