ランニング効果を実現するコード
技術用語
メッシュは通常、ネットワーク トポロジのメッシュ構造を指します。コンピュータ ネットワークにおいて、メッシュとは、各ノードが他のノードに接続されて非中心のネットワーク構造を形成することを意味します。メッシュ ネットワークは、分散コンピューティング、センサー ネットワーク、インターネットで一般的に使用されます。さらに、3D コンピュータ グラフィックスでは、メッシュは 3D モデルを表すネットワークであり、多くの小さくて単純な三角形で構成されます。
メッシュは規則的なグリッドに配置された構造であり、各セルは同じサイズと形状です。コンピューター グラフィックス、数値解析、コンピューター支援設計 (CAD)、コンピューター支援製造 (CAM) の分野では、メッシュは次のアプリケーション シナリオで広く使用されています。
-
3D モデリング: メッシュは 3D モデルの作成に使用され、メッシュ、サーフェス、およびポリゴンのモデリング技術を提供できます。
-
ゲーム開発: ゲーム開発者は、メッシュを使用してゲームのキャラクター、シーン、特殊効果を構築します。
-
コンピュータ支援設計: CAD では、メッシュを使用して幾何学的モデルを確立します。これにより、設計者がメッシュ モデルを使用して複雑な幾何学的形状を作成できるように、多くのモデリング ツールとテクニックが提供されます。
-
数値解析: 数学、工学、物理学などの分野では、メッシュは数値解析、有限要素シミュレーション、数値流体力学などの計算アプリケーションで使用されます。
-
医療分野: 医療画像処理では、メッシュは 3D 再構成された解剖学的構造の生成に使用されます。
-
建築設計: 建築設計では、メッシュは建物の外観、構造、平面図を確立するために使用されます。
-
製造: 製造では、メッシュを使用して非線形、動的、およびマルチフィジックス シナリオでコンポーネントの動作をシミュレートし、製造効率を向上させ、コストを削減できます。
-
流体力学: メッシュ グリッドは、流体力学の分野における数値シミュレーションと数値流体力学に使用できます。
-
構造力学: メッシュ グリッドは、構造力学における有限要素解析と構造の最適化に使用できます。
-
コンピュータ アニメーション: メッシュ グリッドは、コンピュータ アニメーションにおけるキャラクター モデリング、環境モデリング、および特殊効果の制作に使用できます。
-
環境工学：水質汚濁拡散シミュレーション、水質シミュレーションと予測。
分析インターフェースのキーコードの書き込み
//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());
マップマップ = new HashMap();
if (fileTyle.equals(".mesh")){
マップ = GenDataFromMesh(Meshpath );
}
if (fileTyle 。等しい(".msh")){
マップ = GenDataFromMsh(メッシュパス);
マップを返します
。
}
フロントエンド可視化キーコードの記述
primitiveTriangle:{
isRLayerPanel: true,
primitives:[],
url: '/static/data/trangles.json',
dataPath: '',
dataIdField: 'code',
options:{
id:'primitiveTriangle',
name:'三角格网'、
タイプ:'三角形'、
isShow: false
}、
場所: {
"destination":{"x":-2194142.1719457568,"y":4477352.104342483,"z":3981503.0453665117},
"orientation":{"Heading" :6.283185231778362,"ピッチ":-0.6090220537393618,"ロール":7.622047348831984e-8}、
期間: 2
}、
entityType:'primitive'
}
<テンプレート>
<div class="container">
<div id="cesiumContainer1" style="高さ: 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="レイヤー情報" @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="CooperativeLabel">
<p><label id="lon"></label></p> <p>
<label id="lat"></ラベル></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>100px" @click="getCv()"> </div> </div> </template>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」から GisTool を
インポート ZJNCesium を './ZJNCesium.js' から
インポート LayerPanel を './widgets/layerPanel/index' から
インポート PopHover を './widgets/popHover/index' から
インポート PopClick を './widgets/popClick からインポート/index'
import {layersInfo} from './store/LayersInfo'
import {LayersRenderSet} from './renderSet/LayersRenderSet'
'./renderSet/LayersRenderLabelSet' から {LayersRenderLabelSet} をインポートします
{layerMsgClick} を「./layerMsg/LayerMsgClick」からインポートします。
CommonDrawPrimitiveEntitiesByUrl、/layerMsg/LayerMsgClick";
import {
CommonDrawEntities、
CommonDrawEntitiesByLayerID、
CommonDrawWallEntities、
CommonDrawPolylineEntities、
setLayerVisible、
CommonDrawPolygonEntities、
CommonDrawPointEntitiesByUrl、CommonDrawWallEntitiesByUrl、
CommonDrawPolylineEntitiesByUrl、
CommonDrawPolygonEntitiesByUrl
、
CommonDrawCorridorEntitiesByUrl 、
CommonDrawByGeojson 、 CommonDrawPolylineVolumeEntitiesByUrl
、 CommonDrawWindyEntitiesByUrl
、
CommonDrawHeatmapByUrl、
CommonCreateMeshGrid,CommonCreateMeshTriangle
} from './MapCommon'
popHoverInfo: '',
import {carDatas} from "../../common/api/carRoad"
import {linedata,polygondata} from "./data/pointlinepolygon"
import {TransferSimUtil} from "./utils/TransferSimUtil"
var zjnCesium;
エクスポートデフォルト {
name: "earth"、
コンポーネント: {
layerPanel、
GisTool、
popHover、
popClick
}、
data() {
return {
zjnCesium: null、
popHoverScreenPoint: {x: null、y: null}、
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:{
見出し : 0,
ピッチ : -0.3,
ロール : 0
},
caike:{x: -2399848.645912107,y: 4425276.703809752,z: 3903524.9361700616},
caikeOrientation:{
ヘディング : 0,
ピッチ : -0.3,
ロール : 0
},
dairuike:{x: -2398945.25466 9891,y: 4426231.6794353435,z: 3903000.9872286734} ,
dairuikeOrientation:{
見出し : 0,
ピッチ : -0.3,
ロール : 0
},
guangyue:{x: -2410663.34105633, y: 4417042.059943647, z: 3905962.3976926757},
guangyueOrientation:{見出し : 3.282430123199906,ピッチ : -0.20432213919653686,ロール : 7.223571873993251e-7}
},
};
}、
メソッド:{
setPosition:function (key){
zjnCesium.viewer.camera.flyTo({
destination : this.modelList[キー]、
方向: this.modelList[key+'Orientation']、
期間: 2
});
getCv:function (){ let cp=zjnCesium.getCurrentViewPosition
(
);
document.getElementById('cvInfo').innerText=JSON.stringify(cp);
// this.transferSimUtil.RemoveTrack()
// this.setViewType(1)
},
MousemoveCallback(data,layerId,c){
this.popClickTitleInfo = data[layersInfo[layerId] ].CustomPopupTemplate.titleField]
// デバッガー
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.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]])
}
これ。 PopAspect.cWidth =layersInfo[layerId].CustomPopupTemplate.width
this.popAspect.cHeight =layersInfo[layerId].CustomPopupTemplate.height
this.popClickVisible = true
}
if(layerMsgClick[layerId] !== 未定義){
for(var i = 0 ; i < レイヤーMsgClick[レイヤーId].length; i++){
var mcmd = LayerMsgClick[layerId][i].method+'(';
for(var j = 0; j < レイヤーMsgClick[レイヤーId][i].params.length; j++){
mcmd += レイヤーMsgClick[レイヤーId][i].params[ j];
if(j < レイヤーMsgClick[レイヤーId][i].params.length - 1){
mcmd += ',';
mcmd +
=
')';
eval(mcmd);
}
}
},
setLayerVisible(layerId,visible){
setLayerVisible(layersInfo,layerId,visible)
var testdata = [
[115.66560745239256,
34.41760191899927],
[115.67530632019043,
34.4179559440] 4557]、
[115.685133934]
021、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){
デバッガー
},
setViewType(viewType){
//0二维，1三维
zjnCesium.setViewType(viewType)
},
// setLayerOpacity (layerId, opacity) {
// // getLayerByCode(this. smap,layerId).setOpacity(opacity)
// }
},
mounted() {
zjnCesium = new ZJNCesium("cesiumContainer1");
this.zjnCesium = zjnCesium
else if(layersInfo[key].entityType == 'ヒートマップ'){
zjnCesium.initMap()
for (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' | |layerInfo[key].entityType == 'ellipsoid') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){ CommonDrawPointEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key
)
}
CommonDrawHeatmapByUrl (zjnセシウム、層情報、キー)
}
else if((layersInfo[key].entityType == 'wall') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){ CommonDrawWallEntitiesByUrl(
zjnCesium ,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)
}
else if((layersInfo[key].entityType == 'line') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){
CommonDrawPolylineEntitiesByUrl (zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)
}
else if((layersInfo[key].entityType == 'corridor') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){
CommonDrawCorridorEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)
}
else if((layersInfo[key].entityType == 'polylineVolume') &&layersInfo[key].url != unknown &&layersInfo[key].url != ""){ CommonDrawPolylineVolumeEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,
key )
}
else if((layersInfo[key].entityType == 'polygon') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){ CommonDrawPolygonEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,
LayersRenderLabelSet ,key)
}
else if((layersInfo[key].entityType == 'プリミティブ') &&layersInfo[key].url != 未定義 &&layersInfo[key].url != ""){
CommonDrawPrimitiveEntitiesByUrl(zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,key)
}
else if((layersInfo[key].entityType == 'windy') &&layersInfo[key].url != 未定義 &&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(unknown,zjnCesium,layersInfo,'')
// CommonCreateMeshGrid(zjnCesium,layersInfo,'')
// CommonCreateMesh(unknown,zjnCesium,layersInfo,'')
// CommonDrawEntities (outputData,zjnCesium,layersInfo,LayersRenderSet,LayersRenderLabelSet,'outPutPoint','lng','lat','outPutId') // // setLayerVisible(layersInfo,'outPutPoint',
false)
// CommonDrawWallEntities(roadData,zjnCesium,layersInfo) ,LayersRenderSet,LayersRenderLabelSet,'道路壁','位置','最小高さ','コード')
// 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,{見出し: 90、ピッチ: 0、ロール: 0}){見出し: 90、ピッチ: 0、ロール: 0})
//マウスの動き、クリック、その他のイベントをバインドします
zjnCesium.bindMousemoveDefault(this.MousemoveCallback);
zjnCesium.bindLonLatOnMouseMove("lon", "lat", "cdem");
//地图点击
zjnCesium.bindClickDefault(this.MouseclickCallback);
//設置初見野
zjnCesium.Home();
this.transferSimUtil = new TransferSimUtil(zjnCesium)
}
};
</script>
<style>
#layersPanel{
位置: 絶対;
上: 50ピクセル;
右: 300ピクセル。
z インデックス: 999;
#gisToolPopup{
位置
: 絶対;
上: 50ピクセル;
左: 20ピクセル;
z インデックス: 999;
}
</スタイル>
運用効果の見える化（水質汚濁の拡散）
お役にたてましたら、「いいね！」やサポートにご褒美をあげてください、ありがとうございます!
技術協力交換qq: 2401315930