@@ -97,6 +100,7 @@
import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
+import PopupInfo from '@/views/sponeScreen/gisMF/cesiumPopup.vue'; //地图标注点弹窗
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
@@ -120,7 +124,7 @@
{ name: '排水防涝', id: 4 },
{ name: '长效运维', id: 5 },
]);
-const menuIndex = ref(1);
+const menuIndex = ref(4);
const showPanel = ref(false);
const showLegend = ref(false);
@@ -209,18 +213,22 @@
};
//地图点击
const mapClick = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ console.log('地图点击---', properties);
+ bus.emit('popupcontent', {
+ popupShow: true,
+ point: point,
+ popupInfo: properties,
+ });
};
//鼠标移入
const moveOn = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移入--', properties);
};
//鼠标移出
const moveLeave = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移出--', properties);
};
onMounted(() => {
getWeather();
@@ -228,7 +236,6 @@
onBeforeUnmount(() => {
if (!newfiberMap) return;
if (newfiberMap) {
- console.log('newfiberMap.getMap().destroy()');
let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
newfiberMap.getMap().imageryLayers.removeAll();
newfiberMap.getMap().entities.removeAll();
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index e21052a..be2dec3 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -293,7 +293,6 @@
const setLegendData = list => {
list.forEach(i => {
- console.log('iii---', i);
i.data &&
i.data.features &&
i.data.features.forEach(a => {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 4190fbf..128d22e 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -17,6 +17,9 @@
:class="['animate__animated', showPanel ? 'animate__fadeInUp left30' : 'animate__fadeInUp left480']"
>
+
+
@@ -97,6 +100,7 @@
import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
+import PopupInfo from '@/views/sponeScreen/gisMF/cesiumPopup.vue'; //地图标注点弹窗
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
@@ -120,7 +124,7 @@
{ name: '排水防涝', id: 4 },
{ name: '长效运维', id: 5 },
]);
-const menuIndex = ref(1);
+const menuIndex = ref(4);
const showPanel = ref(false);
const showLegend = ref(false);
@@ -209,18 +213,22 @@
};
//地图点击
const mapClick = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ console.log('地图点击---', properties);
+ bus.emit('popupcontent', {
+ popupShow: true,
+ point: point,
+ popupInfo: properties,
+ });
};
//鼠标移入
const moveOn = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移入--', properties);
};
//鼠标移出
const moveLeave = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移出--', properties);
};
onMounted(() => {
getWeather();
@@ -228,7 +236,6 @@
onBeforeUnmount(() => {
if (!newfiberMap) return;
if (newfiberMap) {
- console.log('newfiberMap.getMap().destroy()');
let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
newfiberMap.getMap().imageryLayers.removeAll();
newfiberMap.getMap().entities.removeAll();
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
index 10e28da..eb408d4 100644
--- a/src/views/sponeScreen/gisMF/cesiumMap.vue
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -99,6 +99,7 @@
onBeforeUnmount(() => {
clearInterval(window.currentWeatherTimer);
window.currentWeatherTimer = null;
+ bus.off('closeCesiumPopup');
if (!newfiberMap) return;
newfiberMap.weatherRemove();
});
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index e21052a..be2dec3 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -293,7 +293,6 @@
const setLegendData = list => {
list.forEach(i => {
- console.log('iii---', i);
i.data &&
i.data.features &&
i.data.features.forEach(a => {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 4190fbf..128d22e 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -17,6 +17,9 @@
:class="['animate__animated', showPanel ? 'animate__fadeInUp left30' : 'animate__fadeInUp left480']"
>
+
+
+
@@ -97,6 +100,7 @@
import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
+import PopupInfo from '@/views/sponeScreen/gisMF/cesiumPopup.vue'; //地图标注点弹窗
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
@@ -120,7 +124,7 @@
{ name: '排水防涝', id: 4 },
{ name: '长效运维', id: 5 },
]);
-const menuIndex = ref(1);
+const menuIndex = ref(4);
const showPanel = ref(false);
const showLegend = ref(false);
@@ -209,18 +213,22 @@
};
//地图点击
const mapClick = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ console.log('地图点击---', properties);
+ bus.emit('popupcontent', {
+ popupShow: true,
+ point: point,
+ popupInfo: properties,
+ });
};
//鼠标移入
const moveOn = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移入--', properties);
};
//鼠标移出
const moveLeave = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
+ // console.log('point', point);
+ // console.log('鼠标移出--', properties);
};
onMounted(() => {
getWeather();
@@ -228,7 +236,6 @@
onBeforeUnmount(() => {
if (!newfiberMap) return;
if (newfiberMap) {
- console.log('newfiberMap.getMap().destroy()');
let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
newfiberMap.getMap().imageryLayers.removeAll();
newfiberMap.getMap().entities.removeAll();
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
index 10e28da..eb408d4 100644
--- a/src/views/sponeScreen/gisMF/cesiumMap.vue
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -99,6 +99,7 @@
onBeforeUnmount(() => {
clearInterval(window.currentWeatherTimer);
window.currentWeatherTimer = null;
+ bus.off('closeCesiumPopup');
if (!newfiberMap) return;
newfiberMap.weatherRemove();
});
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16332d4..fae0f1e 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -5,7 +5,6 @@
{{ allData.dataList.pumpName }}
{{ allData.dataList.sewageName }}
{{ allData.dataList.roadName }}
-
{{ allData.dataList.name }}
{{ allData.dataList.stName }}
-
-
-
-
泵机台数:
-
{{ allData.dataList.ysNumber }}台
-
抽排量:
-
{{ allData.dataList.yswater }}m³/s
+
+
+
-
-
泵站类型:
-
{{ allData.dataList.Layer }}
-
+
+
@@ -192,12 +197,24 @@
function closePopupCES() {
allData.popupShow = false;
bus.emit('closeCesiumPopup');
+ // 关闭之后回到中心点
+ newfiberMapbox.map.easeTo({
+ center: [114.35, 34.802],
+ zoom: 12.9,
+ pitch: 55,
+ });
}
// 雨量站弹窗内容
const changeDate = () => {
getSuperViseData();
};
+
+// 水位计弹窗内容
+function changeDateSW() {
+ getSuperViseData();
+}
+
// 降雨趋势折线图
let chartPopupRain = null;
const initEchartsPopup = () => {
@@ -276,18 +293,45 @@
}
onMounted(() => {
- bus.on('popupcontent', data => {
- allData.dataList = data.popupInfo;
- console.log(allData.dataList, 9999);
+ bus.on('popupcontent', params => {
+ console.log('popup接收地图标注点值---', params);
+ allData.dataList = params.popupInfo;
+ let pipePopupDiv = document.getElementById('cesiumPopupID');
+ window.window.pipePopup = new mapboxL7.Popup({
+ html: pipePopupDiv,
+ lngLat: {
+ lng: params.point[0],
+ lat: params.point[1],
+ },
+ anchor: 'center',
+ offsets: [-30, 150],
+ autoClose: false,
+ });
+ newfiberMapbox.addPopup(pipePopup);
+ newfiberMapbox.map.easeTo({
+ center: [params.point[0], params.point[1]],
+ zoom: 17,
+ });
+ allData.popupShow = true;
if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+ if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
});
});
onBeforeUnmount(() => {
bus.off('popupcontent');
- bus.off('closeCesiumPopup');
});