1. 강 수로를 geojson 데이터로 변환
샘플 데이터를 처리하기 위해 Huai River를 예로 들어 보겠습니다.
{
"유형": "FeatureCollection",
"기능": [
{
"형상": {
"좌표": [ [
[
115.5803
,
34.4982
],
[
115.5922,
34.498
],
[
115.6061,
34.4994
],
[
115.6203,
34.5009
] ,
[
115.6295,
34.4931
],
[
115.6364,
34.4929
],
[
115.6442,
34.4913
],
[
115.649,
34.4792
],
[
115.6512,
34.4655
] ,
[
115.659,
34.457
],
[
115.6666,
34. 4486
],
[
115.6639,
34.4346
],
[
115.6673,
34.422
],
[
115.6734,
34.4044
],
[
115.6882,
34.3928
],
[
115.7007
,
34.3795 ], [ 115.7063, 34.3637
]
,
[
115.7036
,
34
.349
],
[
115.7051,
],
[
34.3291
115.7137,
34.3104
],
[
115.7105,
34.2973
],
[
115.7069,
34.2794
],
[
115.7156
,
34.2629 ]
,
[ 115.7278,
34.2426
],
[
115.7254, 3
4.2336
],
[
],
[
115.7241,
34.2217
115.7352,
34.206
],
[
115.7358,
34.1952
],
[
115.7452,
34.1796
],
[
115.7577,
34.1749 ]
,
[
115.774,
34.1719
],
[
115.7 892,
34.1635
],
[
115.7948,
34.1493
115.8622,
],
[
115.8023,
34.1338
],
[
115.8142,
34.1242
],
[
115.8275,
34.1182
],
[
115.8306
,
34.1052 ]
,
[ 115.8326,
34.0793
],
[
115.8503, 3
4.0502
],
[
34.0441
],
[
115.8691,
34.034
],
[
115.8678,
34.0194
],
[
115.8701,
33.999
],
[
115.8841,
33.9864
],
[
115.8855,
33.9814
]
]
,
"유형" : "MultiLineString"
},
"id": "huaiheSq.1" ,
"유형": "특징",
"properties": {
"Shape_Le_1": 0,
"Shape_Le_2": 0,
"Shape_Le_3": 0,
"Shape_Le_4": 0,
"NAME": "包河",
"Shape_Leng": 0,
"OBJECTID": 0,
"SHAPE_STLe": 0,
"UserID": 0,
"User_LEVEL": 0,
"RL_CODE": "1113130",
"Lev": 0,
"RL_NAME": "包河"
}
}
]
}
2. 백엔드 시뮬레이션 프로그램 인터페이스 작성
1. 인터페이스 호출 효과
2. 부분 인터페이스 코드 구현
//riverCode:河道编号
//http://localhost:8945/api/WaterPollutionDiffuse/WaterPollutionDiffusePointVec?riverCode=huaiheSq&polluteC=300&d=0.8&deltX=500
@ApiOperation(value = "WaterPollutionDiffuse")
@GetMapping(value = "/WaterPollutionDiffusePointVec" )
// @Scheduled(cron = "0 10 * * * ?")
public String WaterPollutionDiffusePointVec(String riverCode,double polluteC,double d,double deltX) {
// String riverGeojson = FileFormat.shape2Geojson("D:\\gis\ \huaiheriver\\" + riverCode + ".shp");
String riverGeojson = null;
try {
riverGeojson = new String(Files.readAllBytes(Paths.get(riverCode + ".json")), "utf-8");
}
} 잡기(IOException e) {
e.printStackTrace();
JSONObject obj = JSON.parseObject(riverGeojson);
JSONArray datalist = (JSONArray)obj.get("기능");
String geoStr=((com.alibaba.fastjson.JSONObject)datalist.get(0)).get("형상").toString();
JSONObject objGeo = JSON.parseObject(geoStr);
JSONArray 좌표 = (JSONArray)objGeo.get("좌표");
int rSize=0;
for(int i = 0; i < 1; i++){
JSONArray coordsi=(JSONArray)coords.get(i);
rSize += coordsi.size();
}
double[][] trainData = new double[rSize][3];
int rSize1=0;
for(int i = 0; i < 1; i++){
JSONArray coordsi=(JSONArray)coords.get(i);
// if(i>0){
// rSize1 += ((JSONArray)coords.get(i-1)).size();
// }
for (int j = 0; j < coordsi.size(); j++) {
// StationWithData data = datalist.get(i);
trainData[rSize1+j][0] = TransferDouble(((JSONArray)coordsi.get(j)).get(0).toString());
trainData[rSize1+j][1] = TransferDouble(((JSONArray)coordsi.get(j)).get(1).toString());
trainData[rSize1+j][2] = 0;
};
}
String strJson = InterpolationWaterUtils.calWaterPollutionDiffusePointsFick(trainData,polluteC,d,deltX);
return strJson.replaceAll("NaN","0");
}
3. 프런트 엔드 구성의 시각적 표시
ShangQiuRegion: {
layerCode:'ShangQiuRegion',
isRLayerPanel: 참,
sourceType:'GeoVector',
url:'/static/geojson/henan/shangqiu/shangqiu.json',
제목:'商丘',
스타일:Layersymbols.areaRegionSymbol,
형식: new GeoJSON(),
wrapX: false,
불투명도: 1,
위치: {경도: 115.783878, 위도: 34.308761, 레벨: 8},
visible:true
},
geoJsonFeLine: {
layerCode: 'geoJsonFeLine',
isRLayerPanel: 참,
sourceType: ' Vector',
제목: '淮河',
url: '/static/geojson/huaihe.json',
dataPath:'',
// labelField: 'NAME',
지리 유형: 'geojson',
maxZoom: 무한대,
minZoom:-무한대,
wrapX: 거짓,
불투명도: 1,
위치: {경도: 116.11704458402367, 위도: 34.25804927841997, 수준: 9.808516864898834},
표시: 참
},
point1: {
layerCode: 'point1',
isRLayerPanel: 참,
sourceType: '벡터',
제목: '排污口',
url: '/static/geojson/station1.json',
dataPath: 'data/stationList/list',
dataLongitudeField: '경도',
dataLatitudeField: '위도',
dataIdField: 'stationId',
geoType: '포인트 ',
maxZoom: 무한대,
minZoom: 7,
wrapX: 거짓,
불투명도: 1,
위치: {경도: 116.11704458402367, 위도: 34.25804927841997, 레벨: 9.808516864898834},
보이는: 사실
},
geoJsonFeP: {
layerCode: 'geoJsonFeP',
isRLayerPanel: 참,
sourceType: '벡터',
제목: '污染河道节点',
url: '/api/WaterPollutionDiffuse/WaterPollutionDiffusePointVec?riverCode=huaiheSq&polluteC=300&d=0.8&deltX=500',
dataPath:'',
floatLabelInfo: {floatLabelField: 'val', offsetX: 8, offsetY: -16},
geoType: 'geojson',
maxZoom: 무한대,
minZoom: -무한대,
wrapX: 거짓,
불투명도: 1,
위치: {경도: 116.11704458402367, 위도: 34.25804927841997, 수준:9.808516864898834},
보이는: 사실
}
4. 시뮬레이션 컴퓨팅 구성요소 실현
<template>
<div>
<div id="map" style="width: 100%;">
<popHover :popHoverInfo="popHoverInfo" :popHoverScreenPoint="popHoverScreenPoint" :popHoverVisible="popHoverVisible"></popHover>
<팝클릭 :popAspect="popAspect" :popClickScreenPoint="popClickScreenPoint" :popClickVisible="popClickVisible" :popClickTitleInfo="popClickTitleInfo" :popClickContentInfo="popClickContentInfo"></popClick> </div> <div id="gisToolPopoup">
<
GisTool
:sMap="smap" @tdtSwitchBase="tdtSwitchBase"></GisTool>
</div>
<div id="layersPanel">
<layerPanel :layersInfo="layersInfo" @setLayerVisible="setLayerVisible" @setLayerOpacity="setLayerOpacity" @zoomToC ="zoomToC"></layerPanel>
</div>
<div id="GaussPlumeCalculate">
<simWaterPanel :startLonLat="startLonLat" @zoomToC="zoomToC" @WaterDiffSimulation="WaterDiffSimulation"></simWaterPanel>
</div>
</div>
</template>
5. 시각적 작동 표시 효과
도움이 된다면
기술 공유를 지원해 주셔서 감사합니다. 좋아요와 지원을 부탁드립니다.
기술 협력 및 교류 qq: 2401315930