一、处理河道转换为geojson数据
以淮河为例处理示例数据：
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"coordinates": [
[
[
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,
34.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.7892,
34.1635
],
[
115.7948,
34.1493
],
[
115.8023,
34.1338
],
[
115.8142,
34.1242
],
[
115.8275,
34.1182
],
[
115.8306,
34.1052
],
[
115.8326,
34.0793
],
[
115.8503,
34.0502
],
[
115.8622,
34.0441
],
[
115.8691,
34.034
],
[
115.8678,
34.0194
],
[
115.8701,
33.999
],
[
115.8841,
33.9864
],
[
115.8855,
33.9814
]
]
],
"type": "MultiLineString"
},
"id": "huaiheSq.1",
"type": "Feature",
"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": "包河"
}
}
]
}
二、后端模拟程序接口编写
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");
} catch (IOException e) {
e.printStackTrace();
}
JSONObject obj = JSON.parseObject(riverGeojson);
JSONArray datalist = (JSONArray)obj.get("features");
String geoStr=((com.alibaba.fastjson.JSONObject)datalist.get(0)).get("geometry").toString();
JSONObject objGeo = JSON.parseObject(geoStr);
JSONArray coords = (JSONArray)objGeo.get("coordinates");
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");
}
三、前端配置可视化展示
ShangQiuRegion: {
layerCode:'ShangQiuRegion',
isRLayerPanel: true,
sourceType:'GeoVector',
url:'/static/geojson/henan/shangqiu/shangqiu.json',
title:'商丘',
style:Layersymbols.areaRegionSymbol,
format: new GeoJSON(),
wrapX: false,
opacity: 1,
location: {longitude: 115.783878, latitude: 34.308761, level: 8},
visible:true
},
geoJsonFeLine: {
layerCode: 'geoJsonFeLine',
isRLayerPanel: true,
sourceType: 'Vector',
title: '淮河',
url: '/static/geojson/huaihe.json',
dataPath:'',
// labelField: 'NAME',
geoType: 'geojson',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
visible: true
},
point1: {
layerCode: 'point1',
isRLayerPanel: true,
sourceType: 'Vector',
title: '排污口',
url: '/static/geojson/station1.json',
dataPath: 'data/stationList/list',
dataLongitudeField: 'longitude',
dataLatitudeField: 'latitude',
dataIdField: 'stationId',
geoType: 'point',
maxZoom: Infinity,
minZoom: 7,
wrapX: false,
opacity: 1,
location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
visible: true
},
geoJsonFeP: {
layerCode: 'geoJsonFeP',
isRLayerPanel: true,
sourceType: 'Vector',
title: '污染河道节点',
url: '/api/WaterPollutionDiffuse/WaterPollutionDiffusePointVec?riverCode=huaiheSq&polluteC=300&d=0.8&deltX=500',
dataPath:'',
floatLabelInfo: {floatLabelField: 'val', offsetX: 8, offsetY: -16},
geoType: 'geojson',
maxZoom: Infinity,
minZoom: -Infinity,
wrapX: false,
opacity: 1,
location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
visible: true
}
四、实现模拟计算组件
<template>
<div>
<div id="map" style="width: 100%;">
<popHover :popHoverInfo="popHoverInfo" :popHoverScreenPoint="popHoverScreenPoint" :popHoverVisible="popHoverVisible"></popHover>
<popClick :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>
五、可视化运行展示效果
如果对您有帮助
感谢支持技术分享，请点赞支持：
技术合作交流qq:2401315930