|
|
@@ -13,115 +13,306 @@ import {useRoute} from "vue-router";
|
|
|
|
|
|
const route = useRoute();
|
|
|
const mapRef = ref(null);
|
|
|
-const mapConfig = ref({
|
|
|
- zoom: 9,
|
|
|
- center: [116.397428, 39.90923],
|
|
|
- layers: [
|
|
|
- {
|
|
|
- id: 'weather-stations',
|
|
|
- type: 'vector', // 指定为矢量图层
|
|
|
- name: '行政区划面图层',
|
|
|
- source: {
|
|
|
- type: 'api', // 数据源类型为API
|
|
|
- url: 'http://localhost:8082/SCSSFM/getCalResultsByStation',
|
|
|
- method: 'POST',
|
|
|
- body: [
|
|
|
- {key: 'projectId', value: '230103', type: 'string'},
|
|
|
- {key: 'forecastSchemeId', value: '2301031', type: 'string'},
|
|
|
- {key: 'calSchemeIds', value: ["20421b55-5383-4ef0-a"], type: 'array'},
|
|
|
- ],
|
|
|
- headers: [
|
|
|
- {
|
|
|
- key: 'authorization',
|
|
|
- value: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBhOTE3ZDdhLTUwODktNDg1MC05YTUyLTk1NzRjZWUzYWU5ZSJ9.QuFdSq-_mLFwOlM249-ledRlM4U2_qIRVfdOzGIOnf38XY-QXyaP0k-me2gT1wf5LCjOW0z-zJnO-SnNo78eOg',
|
|
|
- type: 'string'
|
|
|
+const mapConfig = ref(null);
|
|
|
+const bizDataShowConfigList = ref([]);
|
|
|
+
|
|
|
+const maps = {
|
|
|
+ "25": {
|
|
|
+ zoom: 9,
|
|
|
+ center: [116.397428, 39.90923],
|
|
|
+ layers: [
|
|
|
+ {
|
|
|
+ id: 'weather-stations',
|
|
|
+ type: 'vector', // 指定为矢量图层
|
|
|
+ name: '行政区划面图层',
|
|
|
+ source: {
|
|
|
+ type: 'api', // 数据源类型为API
|
|
|
+ url: 'http://localhost:8082/SCSSFM/getCalResultsByStation',
|
|
|
+ method: 'POST',
|
|
|
+ body: [
|
|
|
+ {key: 'projectId', value: '230103', type: 'string'},
|
|
|
+ {key: 'forecastSchemeId', value: '2301031', type: 'string'},
|
|
|
+ {key: 'calSchemeIds', value: ["20421b55-5383-4ef0-a"], type: 'array'},
|
|
|
+ ],
|
|
|
+ headers: [
|
|
|
+ {
|
|
|
+ key: 'authorization',
|
|
|
+ value: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBhOTE3ZDdhLTUwODktNDg1MC05YTUyLTk1NzRjZWUzYWU5ZSJ9.QuFdSq-_mLFwOlM249-ledRlM4U2_qIRVfdOzGIOnf38XY-QXyaP0k-me2gT1wf5LCjOW0z-zJnO-SnNo78eOg',
|
|
|
+ type: 'string'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ responseResolution: "$.data",
|
|
|
+ // 定义数据映射规则
|
|
|
+ mapping: {
|
|
|
+ // 指定哪些字段包含几何信息(经度、纬度)
|
|
|
+ geometry: {
|
|
|
+ type: 'Point', // 几何类型
|
|
|
+ coordinates: {
|
|
|
+ longitude: 'lgtd', // 接口中的经度字段名
|
|
|
+ latitude: 'lttd' // 接口中的纬度字段名
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textField: 'stationName',
|
|
|
+ // 定义要保留的属性字段
|
|
|
+ properties: {
|
|
|
+ '测站编码': 'stationCode', // 目标属性名: 源数据字段名
|
|
|
+ '测站名称': 'stationName',
|
|
|
+ '预报最大水位': 'calSchemeInfos[0].results[0].maxData.value',
|
|
|
+ '预报最大水位时间': 'calSchemeInfos[0].results[0].maxData.tm',
|
|
|
+ '预报最小水位': 'calSchemeInfos[0].results[0].minData.value',
|
|
|
+ '预报最小水位时间': 'calSchemeInfos[0].results[0].minData.tm',
|
|
|
+ '预报平均水位': 'calSchemeInfos[0].results[0].average',
|
|
|
+ '警戒水位': 'alarmValue',
|
|
|
+ '预报潮位': 'calSchemeInfos[0].results[0].datas',
|
|
|
+ }
|
|
|
},
|
|
|
- ],
|
|
|
- responseResolution: "$.data",
|
|
|
- // 定义数据映射规则
|
|
|
- mapping: {
|
|
|
- // 指定哪些字段包含几何信息(经度、纬度)
|
|
|
- geometry: {
|
|
|
- type: 'Point', // 几何类型
|
|
|
- coordinates: {
|
|
|
- longitude: 'lgtd', // 接口中的经度字段名
|
|
|
- latitude: 'lttd' // 接口中的纬度字段名
|
|
|
+ // 轮询更新(可选)
|
|
|
+ refreshInterval: 30000 // 30秒刷新一次
|
|
|
+ },
|
|
|
+ visible: true,
|
|
|
+ zIndex: 1000,
|
|
|
+ style: {
|
|
|
+ // 点要素样式
|
|
|
+ point: {
|
|
|
+ image: {
|
|
|
+ type: 'icon', // circle|icon
|
|
|
+ // type: 'circle', // circle|icon
|
|
|
+ name: 'red_trangle',
|
|
|
+ radius: 8,
|
|
|
+ fill: {color: '#FF5722'},
|
|
|
+ stroke: {color: '#fff', width: 2}
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ field: 'stationName',
|
|
|
+ font: '12px Arial',
|
|
|
+ fill: {color: '#000000'},
|
|
|
+ stroke: {color: '#ffffff', width: 2},
|
|
|
+ offsetY: -20
|
|
|
}
|
|
|
},
|
|
|
- textField: 'stationName',
|
|
|
- // 定义要保留的属性字段
|
|
|
- properties: {
|
|
|
- '测站编码': 'stationCode', // 目标属性名: 源数据字段名
|
|
|
- '测站名称': 'stationName',
|
|
|
- '预报最大水位': 'calSchemeInfos[0].results[0].maxData.value',
|
|
|
- '预报最大水位时间': 'calSchemeInfos[0].results[0].maxData.tm',
|
|
|
- '预报最小水位': 'calSchemeInfos[0].results[0].minData.value',
|
|
|
- '预报最小水位时间': 'calSchemeInfos[0].results[0].minData.tm',
|
|
|
- '预报平均水位': 'calSchemeInfos[0].results[0].average',
|
|
|
- '警戒水位': 'alarmValue',
|
|
|
- '预报潮位': 'calSchemeInfos[0].results[0].datas',
|
|
|
+ // 线要素样式
|
|
|
+ line: {
|
|
|
+ stroke: {
|
|
|
+ color: '#0066ff',
|
|
|
+ width: 3,
|
|
|
+ lineDash: [5, 5]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 面要素样式
|
|
|
+ polygon: {
|
|
|
+ fill: {color: 'rgba(0, 102, 255, 0.2)'},
|
|
|
+ stroke: {color: '#0066ff', width: 2}
|
|
|
}
|
|
|
},
|
|
|
- // 轮询更新(可选)
|
|
|
- refreshInterval: 30000 // 30秒刷新一次
|
|
|
+ events: {
|
|
|
+ click: {
|
|
|
+ action: 'popup', // 点击触发弹窗
|
|
|
+ popupConfig: {
|
|
|
+ // 弹窗模板ID
|
|
|
+ template: 'SCSSFM_POPUP',
|
|
|
+ offset: [0, -20]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // hover: {
|
|
|
+ // action: 'highlight' // 悬停高亮
|
|
|
+ // }
|
|
|
+ }
|
|
|
},
|
|
|
- visible: true,
|
|
|
- zIndex: 1000,
|
|
|
- style: {
|
|
|
- // 点要素样式
|
|
|
- point: {
|
|
|
- image: {
|
|
|
- type: 'icon', // circle|icon
|
|
|
- // type: 'circle', // circle|icon
|
|
|
- name: 'red_trangle',
|
|
|
- radius: 8,
|
|
|
- fill: {color: '#FF5722'},
|
|
|
- stroke: {color: '#fff', width: 2}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "26": {
|
|
|
+ zoom: 11,
|
|
|
+ center: [121.52720881780915, 31.297834087410234],
|
|
|
+ layers: [
|
|
|
+ {
|
|
|
+ id: 'weather-stations',
|
|
|
+ type: 'vector', // 指定为矢量图层
|
|
|
+ name: '行政区划面图层',
|
|
|
+ source: {
|
|
|
+ type: 'api', // 数据源类型为API
|
|
|
+ url: 'http://localhost:8081/sh_data_platform/service/api/service/api/fxt/getPlanGridMaxWaterDepth?client_id=a8f4f426a8684caf8a63051385aa1836&planId=34046&includeGeom=true&pageNumber=1&pageSize=1000',
|
|
|
+ method: 'GET',
|
|
|
+ responseResolution: "$.result",
|
|
|
+ // 定义数据映射规则
|
|
|
+ mapping: {
|
|
|
+ // 指定哪些字段包含几何信息(经度、纬度)
|
|
|
+ geometry: {
|
|
|
+ type: 'MultiPolygon', // 几何类型
|
|
|
+ coordinates: {
|
|
|
+ geometry: 'geometry', // 接口中的经度字段名
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textField: 'gridName',
|
|
|
+ // 定义要保留的属性字段
|
|
|
+ properties: {
|
|
|
+ '名称': 'gridName', // 目标属性名: 源数据字段名
|
|
|
+ '地区': 'district',
|
|
|
+ '所属村镇': 'town',
|
|
|
+ '预报最大水深': 'maxWaterDepth',
|
|
|
+ '预报最大水深时间': 'maxWaterDepthTime',
|
|
|
+ }
|
|
|
},
|
|
|
- text: {
|
|
|
- field: 'stationName',
|
|
|
- font: '12px Arial',
|
|
|
- fill: {color: '#000000'},
|
|
|
- stroke: {color: '#ffffff', width: 2},
|
|
|
- offsetY: -20
|
|
|
- }
|
|
|
+ // 轮询更新(可选)
|
|
|
+ refreshInterval: 30000 // 30秒刷新一次
|
|
|
},
|
|
|
- // 线要素样式
|
|
|
- line: {
|
|
|
- stroke: {
|
|
|
- color: '#0066ff',
|
|
|
- width: 3,
|
|
|
- lineDash: [5, 5]
|
|
|
+ visible: true,
|
|
|
+ zIndex: 1000,
|
|
|
+ style: {
|
|
|
+ // 点要素样式
|
|
|
+ point: {
|
|
|
+ image: {
|
|
|
+ type: 'icon', // circle|icon
|
|
|
+ // type: 'circle', // circle|icon
|
|
|
+ name: 'red_trangle',
|
|
|
+ radius: 8,
|
|
|
+ fill: {color: '#FF5722'},
|
|
|
+ stroke: {color: '#fff', width: 2}
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ field: 'stationName',
|
|
|
+ font: '12px Arial',
|
|
|
+ fill: {color: '#000000'},
|
|
|
+ stroke: {color: '#ffffff', width: 2},
|
|
|
+ offsetY: -20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 线要素样式
|
|
|
+ line: {
|
|
|
+ stroke: {
|
|
|
+ color: '#0066ff',
|
|
|
+ width: 3,
|
|
|
+ lineDash: [5, 5]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 面要素样式
|
|
|
+ polygon: {
|
|
|
+ fill: {color: 'rgba(0, 102, 255, 0.2)'},
|
|
|
+ stroke: {color: '#0066ff', width: 2}
|
|
|
+ },
|
|
|
+ multipolygon: {
|
|
|
+ fill: {color: 'rgba(0, 102, 255, 0.2)'},
|
|
|
+ stroke: {color: '#0066ff', width: 2}
|
|
|
}
|
|
|
},
|
|
|
- // 面要素样式
|
|
|
- polygon: {
|
|
|
- fill: {color: 'rgba(0, 102, 255, 0.2)'},
|
|
|
- stroke: {color: '#0066ff', width: 2}
|
|
|
+ events: {
|
|
|
+ click: {
|
|
|
+ action: 'popup', // 点击触发弹窗
|
|
|
+ popupConfig: {
|
|
|
+ // 弹窗模板ID
|
|
|
+ template: 'FLOOD_GRID_POPUP',
|
|
|
+ offset: [0, -20]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // hover: {
|
|
|
+ // action: 'highlight' // 悬停高亮
|
|
|
+ // }
|
|
|
}
|
|
|
},
|
|
|
- events: {
|
|
|
- click: {
|
|
|
- action: 'popup', // 点击触发弹窗
|
|
|
- popupConfig: {
|
|
|
- // 弹窗模板ID
|
|
|
- template: 'SCSSFM_POPUP',
|
|
|
- offset: [0, -20]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ "27": {
|
|
|
+ zoom: 10,
|
|
|
+ center: [121.49574023547144, 31.084153451834073],
|
|
|
+ layers: [
|
|
|
+ {
|
|
|
+ id: 'weather-stations',
|
|
|
+ type: 'vector', // 指定为矢量图层
|
|
|
+ name: '行政区划面图层',
|
|
|
+ source: {
|
|
|
+ type: 'api', // 数据源类型为API
|
|
|
+ url: 'http://localhost:8081/hpj_api/swzz/SWZZ_MODE_DD_SOLUTION/SWZZ_MODELSINGRESULT',
|
|
|
+ method: 'POST',
|
|
|
+ body: [
|
|
|
+ {key: 'SOLUTIONID', value: '20251101102203557131', type: 'string'},
|
|
|
+ {key: 'DATA_TYPE', value: '1', type: 'string'},
|
|
|
+ ],
|
|
|
+ headers: [
|
|
|
+ {key: 'Username', value: 'swzzswhy', type: 'string'},
|
|
|
+ {key: 'Content-Type', value: 'application/json; charset=UTF-8', type: 'string'},
|
|
|
+ ],
|
|
|
+ responseResolution: "$.data",
|
|
|
+ // 定义数据映射规则
|
|
|
+ mapping: {
|
|
|
+ // 指定哪些字段包含几何信息(经度、纬度)
|
|
|
+ geometry: {
|
|
|
+ type: 'Point', // 几何类型
|
|
|
+ coordinates: {
|
|
|
+ longitude: 'LGTD', // 接口中的经度字段名
|
|
|
+ latitude: 'LTTD' // 接口中的纬度字段名
|
|
|
+ },
|
|
|
+ },
|
|
|
+ textField: 'STNM',
|
|
|
+ // 定义要保留的属性字段
|
|
|
+ properties: {
|
|
|
+ '测站编码': 'STCD', // 目标属性名: 源数据字段名
|
|
|
+ '测站名称': 'STNM',
|
|
|
+ '预报最大水位': 'MAXZ',
|
|
|
+ '预报最大水位时间': 'MAXTM',
|
|
|
+ '预报最小水位': 'MINZ',
|
|
|
+ '预报最小水位时间': 'MINTM',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 轮询更新(可选)
|
|
|
+ refreshInterval: 30000 // 30秒刷新一次
|
|
|
+ },
|
|
|
+ visible: true,
|
|
|
+ zIndex: 1000,
|
|
|
+ style: {
|
|
|
+ // 点要素样式
|
|
|
+ point: {
|
|
|
+ image: {
|
|
|
+ type: 'icon', // circle|icon
|
|
|
+ // type: 'circle', // circle|icon
|
|
|
+ name: 'red_trangle',
|
|
|
+ radius: 8,
|
|
|
+ fill: {color: '#FF5722'},
|
|
|
+ stroke: {color: '#fff', width: 2}
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ field: 'STNM',
|
|
|
+ font: '12px Arial',
|
|
|
+ fill: {color: '#000000'},
|
|
|
+ stroke: {color: '#ffffff', width: 2},
|
|
|
+ offsetY: -20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 线要素样式
|
|
|
+ line: {
|
|
|
+ stroke: {
|
|
|
+ color: '#0066ff',
|
|
|
+ width: 3,
|
|
|
+ lineDash: [5, 5]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 面要素样式
|
|
|
+ polygon: {
|
|
|
+ fill: {color: 'rgba(0, 102, 255, 0.2)'},
|
|
|
+ stroke: {color: '#0066ff', width: 2}
|
|
|
}
|
|
|
},
|
|
|
- // hover: {
|
|
|
- // action: 'highlight' // 悬停高亮
|
|
|
- // }
|
|
|
- }
|
|
|
- },
|
|
|
- ]
|
|
|
-});
|
|
|
-const bizDataShowConfigList = ref([]);
|
|
|
+ events: {
|
|
|
+ click: {
|
|
|
+ action: 'popup', // 点击触发弹窗
|
|
|
+ popupConfig: {
|
|
|
+ // 弹窗模板ID
|
|
|
+ template: 'HPJ_POPUP',
|
|
|
+ offset: [0, -20]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // hover: {
|
|
|
+ // action: 'highlight' // 悬停高亮
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
function getBizDataConfigList() {
|
|
|
getBizDataShowConfigList({appId: route.params.id}).then(res => {
|
|
|
bizDataShowConfigList.value = res.data;
|
|
|
})
|
|
|
+ mapConfig.value = maps[route.params.id]
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|