Implementación de visualización y análisis de datos de cuadrícula de malla de la red de triangulación de cuadrícula de dibujo de cesio

El código se da cuenta del efecto de ejecución.

términos técnicos

Malla generalmente se refiere a la estructura de malla en la topología de red. En las redes informáticas, Mesh significa que cada nodo está conectado a otros nodos para formar una estructura de red no centrada. Las redes de malla se usan comúnmente en computación distribuida, redes de sensores e Internet. Además, en los gráficos por computadora en 3D, Mesh es una red que representa un modelo en 3D, que consta de muchos triángulos pequeños y simples;

Una malla es una estructura dispuesta en una cuadrícula regular, donde cada celda tiene el mismo tamaño y forma. En los campos de gráficos por computadora, análisis numérico, diseño asistido por computadora (CAD) y fabricación asistida por computadora (CAM), Mesh se usa ampliamente en los siguientes escenarios de aplicación:

1. Modelado 3D: Mesh se utiliza para crear modelos 3D y puede proporcionar técnicas de modelado de mallas, superficies y polígonos.

2. Desarrollo de juegos: los desarrolladores de juegos usan Mesh para crear personajes, escenas y efectos especiales.

3. Diseño asistido por computadora: en CAD, Mesh se usa para establecer modelos geométricos, lo que proporciona muchas herramientas y técnicas de modelado para que los diseñadores puedan usar modelos Mesh para crear formas geométricas complejas.

4. Análisis numérico: en campos como las matemáticas, la ingeniería y la física, Mesh se utiliza en aplicaciones computacionales como el análisis numérico, la simulación de elementos finitos y la dinámica de fluidos computacional.

5. Campo médico: en el procesamiento de imágenes médicas, Mesh se utiliza para generar estructuras anatómicas reconstruidas en 3D.

6. Diseño arquitectónico: en el diseño arquitectónico, Mesh se utiliza para establecer la apariencia, la estructura y el plano del edificio.

7. Fabricación: en la fabricación, Mesh se puede utilizar para simular el comportamiento de los componentes en escenarios no lineales, dinámicos y multifísicos para mejorar la eficiencia de fabricación y reducir los costes.

8. Mecánica de fluidos: las rejillas de malla se pueden utilizar para simulación numérica y dinámica de fluidos computacional en el campo de la mecánica de fluidos.

9. Mecánica estructural: la rejilla de malla se puede utilizar para el análisis de elementos finitos y la optimización estructural en mecánica estructural.

10. Animación por computadora: la cuadrícula de malla se puede utilizar para el modelado de personajes, el modelado de entornos y la producción de efectos especiales en la animación por computadora.

11. Ingeniería ambiental: simulación de difusión de la contaminación del agua, simulación y predicción de la calidad del agua.

Escritura de código clave de la interfaz de análisis

//http://localhost:8085/ReadMesh/getMeshDataFiltered?FileName=A.mesh 
   @RequestMapping(value = "/getMeshDataFiltered",method = RequestMethod.GET) 
public @ResponseBody Map getMeshDataFiltered(String FileName) { 

       //! Si existe es un nombre de archivo entrante, reemplace el nombre de archivo predeterminado 
   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 .es igual(".msh")){
      mapa = GenDataFromMsh(Meshpath); 
   } 

   devolver mapa; 
}

Escritura de código clave de visualización front-end

Triángulo primitivo:{ 
  isRLayerPanel: verdadero, 
  primitivos:[], 
  url: '/static/data/trangles.json', 
  dataPath: '', 
  dataIdField: 'code', 
  options:{ 
    id:'primitiveTriangle', 
    name:'三角格网', 
    tipo:'triángulos', 
    isShow: false 
  }, 
  ubicación: { 
    "destino":{"x":-2194142.1719457568,"y":4477352.104342483,"z":3981503.0453665117}, "orientación":{"encabezado 
    " :6.283185231778362,"tono":-0.6090220537393618,"rollo":7.622047348831984e-8}, 
    duración: 2 
  }, 
  tipo de entidad: 'primitivo' 
}

<template> 
  <div class="container"> 
    <div id="cesiumContainer1" style="height: 85%"> 
      <div id="tooltippop" class="ol-popup-tip" style="display:none; índice z: 120; altura: 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 :layerInfo="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><id de etiqueta="lon"></label></p> 
      <p><id de etiqueta="lat"></ etiqueta></p> 
      <p><etiqueta id="cdem"></etiqueta></p> 
      <p><etiqueta id="cvInfo"></etiqueta></p> 
    </div> 
    <div > 
      <input value="获取当前视图" type="button" style="height: 50px;width:100px" @click="getCv()"> 
    </div> 
  </div> 

</template>100px" @click="getCv()"> </div> </div> </plantilla>100px" @click="getCv()"> </div> </div> </plantilla>

<script> 
    // importar { Viewer,createWorldTerrain,Cesium3DTileset,WebMapTileServiceImageryProvider,ImageryLayer,Cartesian3,HeadingPitchRange,Math} from 'cesium/Cesium' import ' 
    cesium/Widgets/widgets.css' 
    import './renderStyle/index.css' 
    import GisTool desde "./gisTool" 
    importar ZJNCesium desde './ZJNCesium.js' 
    importar layerPanel desde './widgets/layerPanel/index' 
    importar popHover desde './widgets/popHover/index' 
    importar popClick desde './widgets/popClick /index' 
    importa {layersInfo} desde './store/LayersInfo' 
    importa {LayersRenderSet} desde './renderSet/LayersRenderSet' 
    importa {LayersRenderLabelSet} desde './renderSet/LayersRenderLabelSet'
    importar {layerMsgClick} desde "./layerMsg/LayerMsgClick";  
      CommonDrawPrimitiveEntitiesByUrl,/layerMsg/LayerMsgClick"; 
    importar {
      CommonDrawEntities, 
      CommonDrawEntitiesByLayerID, 
      CommonDrawWallEntities, 
      CommonDrawPolylineEntities, 
      setLayerVisible, 
      CommonDrawPolygonEntities, CommonDrawPointEntitiesByUrl, 
      CommonDrawWallEntitiesByUrl, 
      CommonDrawPolylineEntitiesByUrl, 
      CommonDrawPolygonEntitiesByUrl 
      , 
      CommonDrawCorridorEntitiesByUrl, 
      Common DrawByGeojson 
      , CommonDrawPolylineVolumeEntitiesByUrl 
      , 
      CommonDrawWindyEntitiesByUrl, CommonDrawHeatmapByUrl, 
      CommonCreateMeshGrid,CommonCreateMeshTriangle 
    } from './MapCommon'
    importar {carDatas} desde "../../common/api/carRoad" 
    importar {linedata,polygondata} desde "./data/pointlinepolygon" 
    importar {TransferSimUtil} desde "./utils/TransferSimUtil" 

    var zjnCesium; 
    exportar predeterminado { 
        nombre: "tierra", 
        componentes: { 
          layerPanel, 
          GisTool, 
          popHover, 
          popClick 
        }, 
        data() { 
            return { 
              zjnCesium: null, 
              popHoverScreenPoint: {x: null, y: null}, 
              popClickScreenPoint: { x: nulo, y: nulo}, 
              popHoverInfo: '',
              popHoverVisible: false, 
              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.25466989 1,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:{título: 3.282430123199906,pitch: -0.20432213919653686,roll: 7.223571873993251e-7} 
              }, 
        métodos:{ 
          setPosition:function (key){ 
            zjnCesium.viewer.camera.flyTo({ 
              destino : this.modelList[key ], 
              orientación : this.modelList[clave+'Orientación'], 
              duración: 2 
            }); 
          }, 
          getCv:function (){ 
            let cp=zjnCesium.getCurrentViewPosition(); 
            document.getElementById('cvInfo').innerText=JSON.stringify(cp); 
            // this.transferSimUtil.RemoveTrack() 
            // this.setViewType(1)
          }, 
          MousemoveCallback(data,layerId,c){  
            // depurador 
            if (layersInfo[layerId] && LayersInfo[layerId].floatLabelInfo) {
              this.popHoverScreenPoint.x = cx + LayersInfo[layerId].floatLabelInfo.offsetX 
              this.popHoverScreenPoint.y = cy + 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] !== indefinido){ 
              for(var i = 0; i < layerMsgClick[layerId].length; i++){ 
                var mcmd = layerMsgClick[layerId][i].method+'('; 
                for(var j = 0; j < capaMsgClick[layerId][i].params.length; j++){ 
                  mcmd += capaMsgClick[layerId][i].params[ j]; 
                  if(j < layerMsgClick[layerId][i].params.length - 1){ 
                    mcmd += ','; 
                  } 
                } 
                mcmd += ')'; 
                evaluar(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] 
          zjnCesium = new ZJNCesium("cesiumContainer1");
            ]
            // this.transferSimUtil.SimulateTansfer(testdata) 
          }, 
          zoomToC(ubicación){ 
            zjnCesium.viewer.camera.flyTo(ubicación); 
          }, 
          testClick(re,layerId){ 
            debugger 
          }, 
          setViewType(viewType){ 
            //0二维，1三维
            zjnCesium.setViewType(viewType) 
          }, 
          // setLayerOpacity (layerId, opacity) { 
          // // getLayerByCode(this. smap, layerId).setOpacity(opacidad) 
          // } 
        }, 
        mounted() { 
          this.zjnCesium = zjnCesium 
          zjnCesium.initMap()
          for (let key in layersInfo){ 
            if(layersInfo[key].entityType == 'rectángulo'){ 
              CommonDrawEntitiesByLayerID(zjnCesium,layersInfo,key) 
            }else if((layersInfo[key].entityType == 'point' || LayersInfo [clave].entityType == 'cartel' || LayersInfo[clave].entityType == 'elipse' || LayersInfo[clave].entityType == 'cilindro' || LayersInfo[clave].entityType == 'caja' | | LayersInfo[clave].entityType == 'elipsoide') && LayersInfo[clave].url != indefinido && LayersInfo[clave].url != ""){ CommonDrawPointEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key 
              ) 
            }clave) 
            } 
            else if(layersInfo[clave].entityType == 'mapa de calor'){
              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 == 'corredor') && 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[clave].entityType == 'polígono') && LayersInfo[clave].url != undefined && LayersInfo[clave].url != ""){ CommonDrawPolygonEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet, 
              LayersRenderLabelSet ,clave) 
            } 
            else if((layersInfo[clave].entityType == 'primitivo') && LayersInfo[clave].url != indefinido && LayersInfo[clave].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,{título: 90, tono: 0, rollo: 0}){heading: 90, pitch: 0, roll: 0}) 
          // Vinculación del movimiento del mouse, clic y otros eventos
          zjnCesium.bindMousemoveDefault(this.MousemoveCallback); 
          zjnCesium.bindLonLatOnMouseMove("lon", "lat", "cdem"); 
          //地图点击
          zjnCesium.bindClickDefault(this.MouseclickCallback); 
          //设置初始视野
          zjnCesium.Home(); 
          this.transferSimUtil = new TransferSimUtil(zjnCesium) 
        } 
    }; 
</script> 
<estilo> 
#layersPanel{ 
  posición: absoluta; 
  arriba: 50px; 
  derecha: 300px; 
  índice z: 999; 
} 
#gisToolPopoup{ 
  posición: absoluta; 
  arriba: 50px; 
  izquierda: 20px; 
  índice z: 999; 
} 
</estilo>
Efecto de operación visualizado (difusión de la contaminación del agua )

Si te es útil, dale me gusta y premia el apoyo, ¡gracias!

Intercambio de cooperación técnica qq: 2401315930