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

兴诚

已于 2023-06-30 10:49:05 修改

阅读量2.5k

点赞数 2

分类专栏： cesium地图 Cesium 环保模型文章标签： java 算法 cesium

于 2023-06-27 11:54:05 首次发布

本文链接：https://blog.csdn.net/weixin_42496466/article/details/131413655

版权

cesium地图同时被 3 个专栏收录

14 篇文章 21 订阅

订阅专栏

Cesium

12 篇文章 5 订阅

订阅专栏

环保模型

9 篇文章 3 订阅

订阅专栏

代码实现运行效果

技术术语

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

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

三维建模：Mesh被用于创建三维模型，能够提供网格、曲面及多边形建模技术。
游戏开发：游戏开发者使用Mesh来构建游戏角色、场景和特效。
计算机辅助设计：在CAD中，Mesh用于建立几何模型，它提供了许多建模工具和技术，以便于设计师可以使用Mesh模型来创建复杂的几何形状。
数值分析：在数学、工程和物理等领域中，Mesh被用于数值分析、有限元模拟和计算流体动力学等计算应用程序中。
医学领域：在医学图像处理中，Mesh被用于生成三维重建的解剖结构。
建筑设计：在建筑设计中，Mesh被用于建立建筑外观、结构和平面图。
制造业：在制造业中，Mesh可以用于模拟非线性、动态和多物理场景下的部件行为，以提高制造效率和减少成本。
流体力学：Mesh格网可以用于流体力学领域中的数值模拟和计算流体力学等。
结构力学：Mesh格网可以用于结构力学中的有限元分析和结构优化等。
计算机动画：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){
            // debugger
            if (layersInfo[layerId] && layersInfo[layerId].floatLabelInfo) {
              this.popHoverScreenPoint.x = c.x + layersInfo[layerId].floatLabelInfo.offsetX
              this.popHoverScreenPoint.y = c.y + layersInfo[layerId].floatLabelInfo.offsetY
              this.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.content
              let 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.width
              this.popAspect.cHeight = layersInfo[layerId].CustomPopupTemplate.height
              this.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 = zjnCesium
          zjnCesium.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>
可视化运行效果(水质污染扩散)