一、处理河道转换为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