|
|
@@ -1,42 +1,42 @@
|
|
|
<template>
|
|
|
<div class="global-map">
|
|
|
- <MapLogical v-if="activeMap === 'logical'" :mapData="mapData" />
|
|
|
+ <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
|
|
|
<!--<YztMap v-else-if="activeMap === 'satellite2'" ref="map2Ref" :activeMap="activeMap" />-->
|
|
|
<YMap
|
|
|
v-else-if="activeMap === 'satellite2'"
|
|
|
ref="map2Ref"
|
|
|
v-model:drawing="mouseToolState.drawing"
|
|
|
:color="mouseToolState.color"
|
|
|
- :drawType="mouseToolState.drawType"
|
|
|
- :graphicsType="mouseToolState.graphicsType"
|
|
|
- :activeMap="activeMap"
|
|
|
+ :draw-type="mouseToolState.drawType"
|
|
|
+ :graphics-type="mouseToolState.graphicsType"
|
|
|
+ :active-map="activeMap"
|
|
|
/>
|
|
|
<Map
|
|
|
v-else
|
|
|
ref="mapRef"
|
|
|
v-model:drawing="mouseToolState.drawing"
|
|
|
:color="mouseToolState.color"
|
|
|
- :drawType="mouseToolState.drawType"
|
|
|
- :graphicsType="mouseToolState.graphicsType"
|
|
|
- :activeMap="activeMap"
|
|
|
- @selectGraphics="analysisSpatial"
|
|
|
+ :draw-type="mouseToolState.drawType"
|
|
|
+ :graphics-type="mouseToolState.graphicsType"
|
|
|
+ :active-map="activeMap"
|
|
|
+ @select-graphics="analysisSpatial"
|
|
|
/>
|
|
|
<!--左侧菜单-->
|
|
|
- <LeftMenu @addMarkers="addMarkers" @click-menu="clickMenu" style="position: absolute; top: 20px; left: 20px" />
|
|
|
+ <LeftMenu :menu-data="menuData" style="position: absolute; top: 20px; left: 20px" @add-markers="addMarkers" @click-menu="clickMenu" />
|
|
|
<!--更换地图类型-->
|
|
|
- <SwitchMapTool :activeMap="activeMap" @swtichMap="swtichMap" class="tool-box" />
|
|
|
+ <SwitchMapTool :active-map="activeMap" class="tool-box" @swtich-map="swtichMap" />
|
|
|
<!--时间轴-->
|
|
|
<TimeAxis />
|
|
|
<DrawTools
|
|
|
v-if="showDrawTools"
|
|
|
- class="absoluteTool"
|
|
|
v-model:drawing="mouseToolState.drawing"
|
|
|
v-model:color="mouseToolState.color"
|
|
|
v-model:drawType="mouseToolState.drawType"
|
|
|
v-model:graphicsType="mouseToolState.graphicsType"
|
|
|
+ class="absoluteTool"
|
|
|
@undo="undo"
|
|
|
/>
|
|
|
- <AnalyzeDataDialog :analysisSpatialData="analysisSpatialData" />
|
|
|
+ <AnalyzeDataDialog v-if="analysisSpatialDataShow" :analysis-spatial-data="analysisSpatialData" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -45,14 +45,16 @@ import Map from '@/components/Map/index.vue';
|
|
|
import YztMap from '@/components/Map/YztMap/index.vue';
|
|
|
import YMap from '@/components/Map/YMap.vue';
|
|
|
import MapLogical from '@/components/Map/MapLogical.vue';
|
|
|
-import { logicalData } from './data/mapData';
|
|
|
+import { iconList, logicalData } from './data/mapData';
|
|
|
import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
|
|
|
import LeftMenu from './LeftMenu.vue';
|
|
|
import TimeAxis from '@/components/TimeAxis/index.vue';
|
|
|
import DrawTools from '@/views/globalMap/DrawTools.vue';
|
|
|
import AnalyzeDataDialog from '@/views/globalMap/AnalyzeDataDialog.vue';
|
|
|
-import { countCircleArea, countRectangleArea } from "@/utils/geometryUtil";
|
|
|
-import { deepClone } from "@/utils";
|
|
|
+import { countCircleArea, countRectangleArea } from '@/utils/geometryUtil';
|
|
|
+import { deepClone } from '@/utils';
|
|
|
+import { getEmergencyExpertNum, getEmergencyExpertNumRound, getRescueMateria } from '@/api/globalMap';
|
|
|
+import { listMenu } from '@/api/system/menu';
|
|
|
|
|
|
const mapData = reactive(logicalData);
|
|
|
let mapRef = ref(null);
|
|
|
@@ -63,20 +65,50 @@ let activeMap = ref('vectorgraph');
|
|
|
const swtichMap = (key) => {
|
|
|
activeMap.value = key;
|
|
|
};
|
|
|
-
|
|
|
+let menuData = ref([]);
|
|
|
+const initData = () => {
|
|
|
+ listMenu().then((res: any) => {
|
|
|
+ const data = res.data[0]?.children;
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.show = true;
|
|
|
+ item.name = item.meta?.title;
|
|
|
+ item.children?.forEach((item2) => {
|
|
|
+ item2.show = true;
|
|
|
+ item2.name = item2.meta?.title;
|
|
|
+ item2.children?.forEach((item3) => {
|
|
|
+ item3.name = item3.meta?.title;
|
|
|
+ if (item3.component === '2' && !!item3.path) {
|
|
|
+ item3.active = true;
|
|
|
+ // addMarkers(item3);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ menuData.value = data;
|
|
|
+ console.log(menuData.value);
|
|
|
+ });
|
|
|
+};
|
|
|
const addMarkers = (item) => {
|
|
|
const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
|
|
|
if (dom) {
|
|
|
const markers = dom.getMarkers();
|
|
|
- if (markers[item.id]) {
|
|
|
- dom.clearMarker(item.id);
|
|
|
+ if (markers[item.path]) {
|
|
|
+ dom.clearMarker(item.path);
|
|
|
} else {
|
|
|
- let data = [{ id: item.id, label: '标注点1', center: [110.93154257997, 21.669064031332] },{ id: item.id, label: '标注点2', center: [110.93154257997, 21.969064031332] }];
|
|
|
- if (item.id === 2) {
|
|
|
- data = [{ id: item.id, label: '标注点3', center: [111.1315257997, 21.569064031332] }];
|
|
|
- }
|
|
|
- data.forEach((item) => {
|
|
|
- dom.addMarker(item);
|
|
|
+ getRescueMateria(item.path).then((res) => {
|
|
|
+ const data = res.data && res.data.list ? res.data?.list : [];
|
|
|
+ data.forEach((item2) => {
|
|
|
+ // 获取图标
|
|
|
+ if (iconList[item.path]) {
|
|
|
+ item2.image = iconList[item.path].image;
|
|
|
+ item2.size = iconList[item.path].size;
|
|
|
+ }
|
|
|
+ if (item2.materia_name) {
|
|
|
+ item2.name = item2.materia_name;
|
|
|
+ }
|
|
|
+ item2.parentId = item.path;
|
|
|
+ dom.addMarker(item2);
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
@@ -85,7 +117,7 @@ const addMarkers = (item) => {
|
|
|
let showDrawTools = ref(false);
|
|
|
// 点击菜单
|
|
|
const clickMenu = (item) => {
|
|
|
- if (item.label === '空间分析') {
|
|
|
+ if (item.path === 'spatial') {
|
|
|
showDrawTools.value = !showDrawTools.value;
|
|
|
}
|
|
|
};
|
|
|
@@ -105,42 +137,77 @@ const undo = () => {
|
|
|
};
|
|
|
interface AnalysisSpatialData {
|
|
|
townName: string;
|
|
|
- area: string;
|
|
|
+ area: number | undefined;
|
|
|
populationNum: string;
|
|
|
gdp: string;
|
|
|
easyFloodPoint: string;
|
|
|
medicalInstitutionNum: string;
|
|
|
+ expert: string;
|
|
|
}
|
|
|
+let analysisSpatialDataShow = ref(false);
|
|
|
// 空间分析数据
|
|
|
const analysisSpatialData = reactive<AnalysisSpatialData>({
|
|
|
townName: '',
|
|
|
- area: '',
|
|
|
+ area: undefined,
|
|
|
populationNum: '',
|
|
|
gdp: '',
|
|
|
easyFloodPoint: '',
|
|
|
- medicalInstitutionNum: ''
|
|
|
+ medicalInstitutionNum: '',
|
|
|
+ expert: ''
|
|
|
});
|
|
|
// 空间分析数据
|
|
|
-const analysisSpatial = (data) => {
|
|
|
+const analysisSpatial = (data, len?: string) => {
|
|
|
+ if (!!len && len !== '1') {
|
|
|
+ analysisSpatialDataShow.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (data.type === 'circle') {
|
|
|
- analysisSpatialData.area = countCircleArea(data.center, data.radius);
|
|
|
- } else if (data.type === 'rectangle') {
|
|
|
- const pathArr = [
|
|
|
- [
|
|
|
- [data.southWest[0], data.northEast[1]],
|
|
|
- data.northEast,
|
|
|
- [data.northEast[0], data.southWest[1]],
|
|
|
- data.southWest,
|
|
|
- [data.southWest[0], data.northEast[1]]
|
|
|
- ]
|
|
|
- ];
|
|
|
- analysisSpatialData.area = countRectangleArea(pathArr);
|
|
|
- } else if (data.type === 'polygon') {
|
|
|
- const newPathArr = deepClone(data.path);
|
|
|
- newPathArr.push(newPathArr[0]);
|
|
|
- analysisSpatialData.area = countRectangleArea([newPathArr]);
|
|
|
+ const params = {
|
|
|
+ location: `POINT(${data.center.join(' ')})`,
|
|
|
+ radius: data.radius.toString()
|
|
|
+ };
|
|
|
+ getEmergencyExpertNumRound(params).then((res) => {
|
|
|
+ analysisSpatialData.area = countCircleArea(data.center, data.radius);
|
|
|
+ analysisSpatialData.expert = res.data.list[0].expertNum?.toString();
|
|
|
+ analysisSpatialDataShow.value = true;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let location = '';
|
|
|
+ let pathArr = [];
|
|
|
+ if (data.type === 'rectangle') {
|
|
|
+ pathArr = [
|
|
|
+ [
|
|
|
+ [data.southWest[0], data.northEast[1]],
|
|
|
+ data.northEast,
|
|
|
+ [data.northEast[0], data.southWest[1]],
|
|
|
+ data.southWest,
|
|
|
+ [data.southWest[0], data.northEast[1]]
|
|
|
+ ]
|
|
|
+ ];
|
|
|
+ } else if (data.type === 'polygon') {
|
|
|
+ pathArr = deepClone(data.path);
|
|
|
+ pathArr.push(deepClone(pathArr[0]));
|
|
|
+ pathArr = [pathArr];
|
|
|
+ }
|
|
|
+ let pathStr = '';
|
|
|
+ pathArr[0].forEach((innerArr, index) => {
|
|
|
+ if (index > 0) {
|
|
|
+ pathStr += ',';
|
|
|
+ }
|
|
|
+ pathStr += innerArr.reverse().join(' ');
|
|
|
+ });
|
|
|
+ location = `POLYGON((${pathStr}))`;
|
|
|
+ getEmergencyExpertNum({ location }).then((res) => {
|
|
|
+ analysisSpatialData.area = countRectangleArea(pathArr);
|
|
|
+ analysisSpatialData.expert = res.data.list[0].expertNum?.toString();
|
|
|
+ analysisSpatialDataShow.value = true;
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initData();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
