diff --git a/README.md b/README.md
index 9305d3b..f3e5f5b 100644
--- a/README.md
+++ b/README.md
@@ -121,4 +121,7 @@ function getUserOptions() {
userOptions.value = res.rows;
});
-}
\ No newline at end of file
+}
+
+使用SockJS + STOMP协议
+滑出蓝色 滑入黄色
\ No newline at end of file
diff --git a/package.json b/package.json
index bf3b1d1..ede8c60 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,10 @@
},
"dependencies": {
"@element-plus/icons-vue": "2.0.10",
+ "@stomp/stompjs": "^7.1.1",
"@supermap/iclient-ol": "^11.1.1",
"@vueuse/core": "9.5.0",
"axios": "0.27.2",
- "ol": "6.15.1",
- "proj4": "^2.17.0",
"echarts": "5.4.0",
"element-plus": "2.2.21",
"file-saver": "2.0.5",
@@ -28,7 +27,10 @@
"jsencrypt": "3.3.1",
"leaflet-minimap": "^3.6.1",
"nprogress": "0.2.0",
+ "ol": "6.15.1",
"pinia": "2.0.22",
+ "proj4": "^2.17.0",
+ "sockjs-client": "^1.6.1",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-router": "4.1.4"
diff --git a/src/assets/images/Aircraft1.png b/src/assets/images/Aircraft1.png
new file mode 100644
index 0000000..6c17913
Binary files /dev/null and b/src/assets/images/Aircraft1.png differ
diff --git a/src/assets/images/airport_bg.png b/src/assets/images/airport_bg.png
new file mode 100644
index 0000000..862bb70
Binary files /dev/null and b/src/assets/images/airport_bg.png differ
diff --git a/src/assets/images/airport_out.png b/src/assets/images/airport_out.png
new file mode 100644
index 0000000..fffa458
Binary files /dev/null and b/src/assets/images/airport_out.png differ
diff --git a/src/assets/images/layerActive.png b/src/assets/images/layerActive.png
index adbaeb5..2fa8f25 100644
Binary files a/src/assets/images/layerActive.png and b/src/assets/images/layerActive.png differ
diff --git a/src/assets/images/left_arrow.png b/src/assets/images/left_arrow.png
new file mode 100644
index 0000000..74e7255
Binary files /dev/null and b/src/assets/images/left_arrow.png differ
diff --git a/src/assets/images/left_arrow_active.png b/src/assets/images/left_arrow_active.png
new file mode 100644
index 0000000..34f83b9
Binary files /dev/null and b/src/assets/images/left_arrow_active.png differ
diff --git a/src/assets/images/right_arrow.png b/src/assets/images/right_arrow.png
new file mode 100644
index 0000000..f86115b
Binary files /dev/null and b/src/assets/images/right_arrow.png differ
diff --git a/src/assets/images/right_arrow_active.png b/src/assets/images/right_arrow_active.png
new file mode 100644
index 0000000..ec16500
Binary files /dev/null and b/src/assets/images/right_arrow_active.png differ
diff --git a/src/assets/images/znz.png b/src/assets/images/znz.png
index 82f36d7..388670c 100644
Binary files a/src/assets/images/znz.png and b/src/assets/images/znz.png differ
diff --git a/src/assets/images/znzBg.png b/src/assets/images/znzBg.png
new file mode 100644
index 0000000..31f6cf0
Binary files /dev/null and b/src/assets/images/znzBg.png differ
diff --git a/src/assets/images/按钮-一宫格悬停.png b/src/assets/images/按钮-一宫格悬停.png
deleted file mode 100644
index 2d27e9b..0000000
Binary files a/src/assets/images/按钮-一宫格悬停.png and /dev/null differ
diff --git a/src/assets/images/按钮-一宫格选中.png b/src/assets/images/按钮-一宫格选中.png
deleted file mode 100644
index 6863d55..0000000
Binary files a/src/assets/images/按钮-一宫格选中.png and /dev/null differ
diff --git a/src/assets/images/按钮-二宫格悬停.png b/src/assets/images/按钮-二宫格悬停.png
deleted file mode 100644
index 809bf92..0000000
Binary files a/src/assets/images/按钮-二宫格悬停.png and /dev/null differ
diff --git a/src/assets/images/按钮-二宫格选中.png b/src/assets/images/按钮-二宫格选中.png
deleted file mode 100644
index 7bf728c..0000000
Binary files a/src/assets/images/按钮-二宫格选中.png and /dev/null differ
diff --git a/src/assets/images/按钮-六宫格悬停.png b/src/assets/images/按钮-六宫格悬停.png
deleted file mode 100644
index 315d411..0000000
Binary files a/src/assets/images/按钮-六宫格悬停.png and /dev/null differ
diff --git a/src/assets/images/按钮-六宫格选中.png b/src/assets/images/按钮-六宫格选中.png
deleted file mode 100644
index 91cb988..0000000
Binary files a/src/assets/images/按钮-六宫格选中.png and /dev/null differ
diff --git a/src/assets/images/选项icon-充放电统计选中.png b/src/assets/images/选项icon-充放电统计选中.png
deleted file mode 100644
index 219cb1e..0000000
Binary files a/src/assets/images/选项icon-充放电统计选中.png and /dev/null differ
diff --git a/src/assets/images/选项icon-故障报警选中.png b/src/assets/images/选项icon-故障报警选中.png
deleted file mode 100644
index a3ebfc6..0000000
Binary files a/src/assets/images/选项icon-故障报警选中.png and /dev/null differ
diff --git a/src/assets/images/选项icon-电池概况选中.png b/src/assets/images/选项icon-电池概况选中.png
deleted file mode 100644
index a58cd84..0000000
Binary files a/src/assets/images/选项icon-电池概况选中.png and /dev/null differ
diff --git a/src/assets/images/选项icon-视频监控选中.png b/src/assets/images/选项icon-视频监控选中.png
deleted file mode 100644
index 7923a79..0000000
Binary files a/src/assets/images/选项icon-视频监控选中.png and /dev/null differ
diff --git a/src/assets/images/选项icon-轨迹回放选中.png b/src/assets/images/选项icon-轨迹回放选中.png
deleted file mode 100644
index 43c3edd..0000000
Binary files a/src/assets/images/选项icon-轨迹回放选中.png and /dev/null differ
diff --git a/src/components/map/OpenLayersMap.vue b/src/components/map/OpenLayersMap.vue
index 2794d1b..49b8837 100644
--- a/src/components/map/OpenLayersMap.vue
+++ b/src/components/map/OpenLayersMap.vue
@@ -344,7 +344,8 @@ defineExpose({
zoomOut,
compass,
resetView,
- getCurrentMapState // 暴露获取当前地图状态的方法
+ getCurrentMapState, // 暴露获取当前地图状态的方法
+ map // 暴露地图实例
});
diff --git a/src/components/map/controls/LayerSwitcher.vue b/src/components/map/controls/LayerSwitcher.vue
index 0209a21..af5748e 100644
--- a/src/components/map/controls/LayerSwitcher.vue
+++ b/src/components/map/controls/LayerSwitcher.vue
@@ -161,9 +161,12 @@ import Overlay from 'ol/Overlay';
import labelBg from '../../../assets/images/label_bg.png';
// 导入车辆图标
-import car1Icon from '../../../assets/images/Aircraft.png';
+import car1Icon from '../../../assets/images/Aircraft.png'; //滑入航空器
+import car1Icon1 from '../../../assets/images/Aircraft1.png'; //滑出航空器
import car2Icon from '../../../assets/images/noPeopleCar.png';
import noPeopleCarIcon from '../../../assets/images/noPeopleCar.png';
+import airportBg from '../../../assets/images/airport_bg.png'; // 蓝色背景
+import airportOutBg from '../../../assets/images/airport_out.png'; // 黄色背景
// 定义props接收地图实例
const props = defineProps({
@@ -191,7 +194,7 @@ const exampleVehicleLayers = ref([
name: '滑入航空器',
visible: true,
showLabel: true,
- icon: car1Icon,
+ icon: car1Icon1,
type: 'aircraft-in',
layer: null,
features: [
@@ -356,7 +359,18 @@ function initExampleLayers() {
// 创建标签内容
const labelDiv = document.createElement('div');
labelDiv.className = `custom-label label-${layerConfig.type}`;
- labelDiv.style.backgroundImage = `url(${labelBg})`;
+
+ // 根据类型选择背景图片 - 滑入使用黄色背景(airport_out.png),滑出使用蓝色背景(airport_bg.png)
+ let backgroundImage;
+ if (layerConfig.type === 'aircraft-in') {
+ backgroundImage = airportOutBg; // 滑入航空器背景 - 黄色
+ } else if (layerConfig.type === 'aircraft-out') {
+ backgroundImage = airportBg; // 滑出航空器背景 - 蓝色
+ } else {
+ backgroundImage = labelBg; // 普通车辆背景
+ }
+
+ labelDiv.style.backgroundImage = `url(${backgroundImage})`;
labelDiv.style.backgroundRepeat = 'no-repeat';
labelDiv.style.backgroundSize = '100% 100%';
labelDiv.style.padding = '3px 10px';
@@ -436,7 +450,7 @@ function selectTextStyle(style) {
const allLabels = document.querySelectorAll('.custom-label');
allLabels.forEach(label => {
// 确保背景图片始终存在
- label.style.backgroundImage = "url('../../../assets/images/label_bg.png')";
+ label.style.backgroundImage = labelBg;
label.style.backgroundRepeat = "no-repeat";
label.style.backgroundSize = "100% 100%";
@@ -457,13 +471,13 @@ function selectTextStyle(style) {
default:
// 默认样式,恢复原始样式
if (label.classList.contains('label-aircraft-in')) {
- // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
- // label.style.borderColor = '#347AE2';
- label.style.color = '#fff';
- } else if (label.classList.contains('label-aircraft-out')) {
// label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)';
// label.style.borderColor = '#E4CB0D';
- label.style.color = '#333';
+ label.style.color = '#333'; // 滑入航空器 - 黄色背景,黑色文字
+ } else if (label.classList.contains('label-aircraft-out')) {
+ // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
+ // label.style.borderColor = '#347AE2';
+ label.style.color = '#fff'; // 滑出航空器 - 蓝色背景,白色文字
} else if (label.classList.contains('label-car')) {
// label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)';
// label.style.borderColor = '#484848';
@@ -513,13 +527,13 @@ function updateAllLabelsStyle(styleName) {
default:
// 默认样式,恢复原始样式
if (isAircraftIn) {
- // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
- // label.style.borderColor = '#347AE2';
- label.style.color = '#fff';
- } else if (isAircraftOut) {
// label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)';
// label.style.borderColor = '#E4CB0D';
- label.style.color = '#333';
+ label.style.color = '#333'; // 滑入航空器 - 黄色背景,黑色文字
+ } else if (isAircraftOut) {
+ // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)';
+ // label.style.borderColor = '#347AE2';
+ label.style.color = '#fff'; // 滑出航空器 - 蓝色背景,白色文字
} else if (isCar) {
// label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)';
// label.style.borderColor = '#484848';
@@ -1126,20 +1140,20 @@ function toggleExampleLabel(layer) {
transform: translateX(-50%);
}
-/* 滑入航空器 */
+/* 滑入航空器 - 黄色背景,黑色文字 */
.label-aircraft-in {
- background-color: rgba(52, 122, 226, 0.7);
- border-color: #347AE2;
- color: #fff;
-}
-
-/* 滑出航空器 */
-.label-aircraft-out {
background-color: rgba(245, 231, 79, 0.7);
border-color: #E4CB0D;
color: #333;
}
+/* 滑出航空器 - 蓝色背景,白色文字 */
+.label-aircraft-out {
+ background-color: rgba(52, 122, 226, 0.7);
+ border-color: #347AE2;
+ color: #fff;
+}
+
/* 无人车 */
.label-car {
background-color: rgba(37, 37, 37, 0.7);
diff --git a/src/components/map/controls/OpenLayersMapInfo.vue b/src/components/map/controls/OpenLayersMapInfo.vue
index 3cf1616..503ab9b 100644
--- a/src/components/map/controls/OpenLayersMapInfo.vue
+++ b/src/components/map/controls/OpenLayersMapInfo.vue
@@ -1,7 +1,7 @@
连接地址: http://10.0.0.124:8082/ws
-订阅主题: /topic/realtime
+