The code realizes the running effect
technical terms
Mesh usually refers to the mesh structure in the network topology. In computer networks, Mesh means that each node is connected to other nodes to form a non-centered network structure. Mesh networks are commonly used in distributed computing, sensor networks, and the Internet. In addition, in 3D computer graphics, Mesh is a network representing a 3D model, consisting of many small and simple triangles;
A Mesh is a structure arranged in a regular grid, where each cell is the same size and shape. In the fields of computer graphics, numerical analysis, computer-aided design (CAD) and computer-aided manufacturing (CAM), Mesh is widely used in the following application scenarios:
-
3D modeling: Mesh is used to create 3D models and can provide mesh, surface and polygon modeling techniques.
-
Game development: Game developers use Mesh to build game characters, scenes and special effects.
-
Computer-aided design: In CAD, Mesh is used to establish geometric models, which provides many modeling tools and techniques so that designers can use Mesh models to create complex geometric shapes.
-
Numerical Analysis: In fields such as mathematics, engineering, and physics, Mesh is used in computational applications such as numerical analysis, finite element simulation, and computational fluid dynamics.
-
Medical field: In medical image processing, Mesh is used to generate 3D reconstructed anatomical structures.
-
Architectural design: In architectural design, Mesh is used to establish building appearance, structure and floor plan.
-
Manufacturing: In manufacturing, Mesh can be used to simulate the behavior of components in nonlinear, dynamic and multi-physics scenarios to improve manufacturing efficiency and reduce costs.
-
Fluid mechanics: Mesh grids can be used for numerical simulation and computational fluid dynamics in the field of fluid mechanics.
-
Structural mechanics: Mesh grid can be used for finite element analysis and structural optimization in structural mechanics.
-
Computer animation: Mesh grid can be used for character modeling, environment modeling and special effects production in computer animation.
-
Environmental engineering: water pollution diffusion simulation, water quality simulation and prediction.
Analysis interface key code writing
//http://localhost:8085/ReadMesh/getMeshDataFiltered?FileName=A.mesh
@RequestMapping(value = "/getMeshDataFiltered",method = RequestMethod.GET)
public @ResponseBody Map getMeshDataFiltered(String FileName) {
//! If there is an incoming file name, replace the default file name
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;
}
Front-end visualization key code writing
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>
可视化运行效果(水质污染扩散)
如果对恁有帮助，请点赞打赏支持，多谢！
技术合作交流qq：2401315930