From 6402fbb3eff8bff7810e3af19d4792f1bfca3f97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E5=A8=9C?= <576157508@qq.com>
Date: Mon, 30 Jun 2025 10:40:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=A6=E6=8E=A5=E5=8F=A3api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/layer.png                   | Bin 0 -> 6496 bytes
 src/components/map/OpenLayersMap.vue          | 118 ++++++++++++++++--
 .../map/controls/OpenLayersMapInfo.vue        |   4 +-
 .../map/controls/OpenLayersZoomControl.vue    |  72 ++++++++---
 src/views/platform/index.vue                  |  32 ++++-
 vite.config.js                                |   2 +-
 6 files changed, 192 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/images/layer.png

diff --git a/src/assets/images/layer.png b/src/assets/images/layer.png
new file mode 100644
index 0000000000000000000000000000000000000000..25700463f469e105b2770f578686c702e2ad4550
GIT binary patch
literal 6496
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
GLSTY>rL-Xc

literal 0
HcmV?d00001

diff --git a/src/components/map/OpenLayersMap.vue b/src/components/map/OpenLayersMap.vue
index 2794d2c..14bd325 100644
--- a/src/components/map/OpenLayersMap.vue
+++ b/src/components/map/OpenLayersMap.vue
@@ -8,6 +8,8 @@
     <OpenLayersZoomControl 
       :map="map" 
       :resetView="resetView"
+      :routeLayerVisible="routeLayerVisible"
+      @layerToggle="toggleRouteLayer"
       @compass="compass"
       @zoomIn="zoomIn"
       @zoomOut="zoomOut"
@@ -29,7 +31,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
@@ -45,6 +47,18 @@ import OpenLayersMapInfo from "./controls/OpenLayersMapInfo.vue";
 import OverviewMap from 'ol/control/OverviewMap';
 import ScaleLine from 'ol/control/ScaleLine';
 import OpenLayersScaleControl from "./controls/OpenLayersScaleControl.vue";
+import OSM from 'ol/source/OSM';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import LineString from 'ol/geom/LineString';
+import Polygon from 'ol/geom/Polygon';
+import Style from 'ol/style/Style';
+import Icon from 'ol/style/Icon';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
+import { fromLonLat } from 'ol/proj';
 
 // 注册 EPSG:4528 投影
 proj4.defs(
@@ -78,6 +92,12 @@ const minZoom = 7; // 最小缩放级别
 const maxZoom = 15; // 最大缩放级别
 const initialZoom = 8; // 设置为7.5，在7和8之间
 
+const routeLayerVisible = ref(false); // 默认不显示路线图层
+
+function toggleRouteLayer() {
+  routeLayerVisible.value = !routeLayerVisible.value;
+}
+
 onMounted(() => {
   // 检查是否有保存的默认视图
   let savedView = null;
@@ -110,6 +130,19 @@ onMounted(() => {
     rotation: savedView ? savedView.rotation : rotation, // 使用保存的旋转角度或默认值
   });
 
+  // 使用OSM底图
+  const baseLayer = new TileLayer({
+    source: new OSM()
+  });
+
+  // 创建矢量图层
+  const vectorSource = new VectorSource();
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    zIndex: 2,
+    visible: routeLayerVisible.value
+  });
+
   // 创建地图，与.ol3页面完全一致
   map.value = new Map({
     target: mapContainer.value,
@@ -124,18 +157,7 @@ onMounted(() => {
         constrainResolution: true,
       }),
     ]),
-    layers: [
-      // 使用TileLayer包裹TileSuperMapRest
-      new TileLayer({
-        source: new TileSuperMapRest({
-          url: "http://10.96.3.10:8090/iserver/services/map-QDJC_DT-GX3/rest/maps/QDJC2DZT",
-          projection: "EPSG:4528",
-          tileGrid: tileGrid,
-          wrapX: false,
-          attributions: "", // 空字符串移除属性信息
-        }),
-      }),
-    ],
+    layers: [baseLayer, vectorLayer],
     view: view,
   });
 
@@ -184,7 +206,73 @@ onMounted(() => {
     }
   }, 500);
 
+  // 示例：添加一个点
+  const pointFeature = new Feature({
+    geometry: new Point([13394416, 4136655])
+  });
+  pointFeature.setStyle(new Style({
+    image: new Icon({
+      src: 'https://openlayers.org/en/latest/examples/data/icon.png',
+      scale: 0.7
+    })
+  }));
+  vectorSource.addFeature(pointFeature);
 
+  // 示例：添加一条线
+  const lineFeature = new Feature({
+    geometry: new LineString([
+      [13394416, 4136655],
+      [13395000, 4137000]
+    ])
+  });
+  lineFeature.setStyle(new Style({
+    stroke: new Stroke({
+      color: 'blue',
+      width: 2
+    })
+  }));
+  vectorSource.addFeature(lineFeature);
+
+  // 示例：添加一个面
+  const polygonFeature = new Feature({
+    geometry: new Polygon([[ 
+      [13394416, 4136655],
+      [13395000, 4136655],
+      [13395000, 4137000],
+      [13394416, 4137000],
+      [13394416, 4136655]
+    ]])
+  });
+  polygonFeature.setStyle(new Style({
+    stroke: new Stroke({ color: 'red', width: 2 }),
+    fill: new Fill({ color: 'rgba(255,0,0,0.2)' })
+  }));
+  vectorSource.addFeature(polygonFeature);
+
+  // --- 随机生成青岛附近的路线 ---
+  function randomLngLat() {
+    const lng = 120.1 + Math.random() * 0.4;
+    const lat = 35.9 + Math.random() * 0.4;
+    return [lng, lat];
+  }
+  // 生成3条路线，每条5~8个点
+  for (let i = 0; i < 3; i++) {
+    const points = [];
+    const count = 5 + Math.floor(Math.random() * 4);
+    for (let j = 0; j < count; j++) {
+      points.push(fromLonLat(randomLngLat()));
+    }
+    const lineFeature = new Feature({
+      geometry: new LineString(points)
+    });
+    lineFeature.setStyle(new Style({
+      stroke: new Stroke({
+        color: ['red', 'blue', 'green'][i % 3],
+        width: 3
+      })
+    }));
+    vectorSource.addFeature(lineFeature);
+  }
 
   // 确保地图完全加载后再次调整视图
   setTimeout(() => {
@@ -211,6 +299,10 @@ onMounted(() => {
     // 当地图旋转时，不需要额外操作，OpenLayers内部会自动处理拖拽方向
     // 但我们可以在这里做一些自定义处理，比如更新UI等
   });
+
+  watch(routeLayerVisible, (val) => {
+    vectorLayer.setVisible(val);
+  });
 });
 
 onUnmounted(() => {
diff --git a/src/components/map/controls/OpenLayersMapInfo.vue b/src/components/map/controls/OpenLayersMapInfo.vue
index e916ac4..1f39947 100644
--- a/src/components/map/controls/OpenLayersMapInfo.vue
+++ b/src/components/map/controls/OpenLayersMapInfo.vue
@@ -39,10 +39,10 @@ function handleMouseMove(event) {
       // 3. 转换为WGS84
       try {
         const [lng, lat] = transform(coordinate, 'EPSG:4528', 'EPSG:4326');
-        console.log('WGS84坐标:', lng, lat);
+        //console.log('WGS84坐标:', lng, lat);
         wgs84Text.value = `WGS84: 经度=${lng.toFixed(6)}°, 纬度=${lat.toFixed(6)}°`;
       } catch (error) {
-        console.error('坐标转换失败:', error);
+       // console.error('坐标转换失败:', error);
         wgs84Text.value = 'WGS84: 转换错误';
       }
     } else {
diff --git a/src/components/map/controls/OpenLayersZoomControl.vue b/src/components/map/controls/OpenLayersZoomControl.vue
index 78577c4..51470f9 100644
--- a/src/components/map/controls/OpenLayersZoomControl.vue
+++ b/src/components/map/controls/OpenLayersZoomControl.vue
@@ -1,7 +1,25 @@
 <template>
   <div class="zoom-control">
-    <LayerSwitcher class="layer-switcher" :map="map" @layerChange="onLayerChange" ref="layerSwitcherRef" />
-    
+    <el-popover
+      placement="right"
+      width="160"
+      trigger="click"
+      v-model:visible="popoverVisible"
+      popper-class="layer-popover"
+    >
+      <el-checkbox
+        :model-value="props.routeLayerVisible"
+        @change="onLayerToggle"
+      >道路图层</el-checkbox>
+      <template #reference>
+        <div
+          class="layer-toggle"
+          :class="{ active: props.routeLayerVisible }"
+          @click="handleLayerBtnClick"
+          title="图层控制"
+        ></div>
+      </template>
+    </el-popover>
     <div class="compass" @click="onCompass"></div>
     <div class="zoom-in" @click="onZoomIn"></div>
     <div class="zoom-out" @click="onZoomOut"></div>
@@ -10,6 +28,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { ElPopover, ElCheckbox } from 'element-plus';
 // import LayerSwitcher from './LayerSwitcher.vue';
 
 // 定义props接受地图实例
@@ -18,6 +37,10 @@ const props = defineProps({
   resetView: {
     type: Function,
     default: null
+  },
+  routeLayerVisible: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -25,7 +48,9 @@ const props = defineProps({
 const layerSwitcherRef = ref(null);
 
 // 向父组件发出事件
-const emit = defineEmits(['compass', 'zoomIn', 'zoomOut', 'layerChange']);
+const emit = defineEmits(['compass', 'zoomIn', 'zoomOut', 'layerChange', 'layerToggle']);
+
+const popoverVisible = ref(false);
 
 // 指南针/重置视图
 function onCompass() {
@@ -57,6 +82,14 @@ function onLayerChange(layerInfo) {
   emit('layerChange', layerInfo);
 }
 
+function onLayerToggle() {
+  emit('layerToggle');
+}
+
+function handleLayerBtnClick() {
+  popoverVisible.value = !popoverVisible.value;
+}
+
 // 导出方法供外部调用
 defineExpose({
   // 设置图层可见性的方法
@@ -83,6 +116,22 @@ defineExpose({
   gap: 25px;
 }
 
+.layer-toggle {
+  width: 40px;
+  height: 40px;
+  background: url("../../../assets/images/layer.png") no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+  z-index: 3000;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  transition: border 0.2s;
+}
+.layer-toggle.active {
+  border: 2px solid #409eff;
+  box-shadow: 0 0 8px #409eff44;
+}
 .compass {
   width: 40px;
   height: 40px;
@@ -91,15 +140,6 @@ defineExpose({
   cursor: pointer;
   z-index: 3000;
 }
-.layer-switcher{
-  z-index: 3000;
-  width: 40px;
-  height: 40px;
-  background: url("../../../assets/images/layer.png") no-repeat;
-  background-size: 100% 100%;
-  cursor: pointer;
-}
-
 .zoom-in {
   background: url("../../../assets/images/zoomOut.png") no-repeat;
   background-size: 100% 100%;
@@ -108,7 +148,6 @@ defineExpose({
   height: 40px;
   cursor: pointer;
 }
-
 .zoom-out {
   background: url("../../../assets/images/zoomIn.png") no-repeat;
   background-size: 100% 100%;
@@ -120,7 +159,7 @@ defineExpose({
 
 /* 响应式调整 */
 @media (max-width: 768px) {
-  .zoom-in, .zoom-out, .compass {
+  .zoom-in, .zoom-out, .compass, .layer-toggle {
     width: 28px;
     height: 28px;
     background-size: 80%;
@@ -128,4 +167,9 @@ defineExpose({
     background-repeat: no-repeat;
   }
 }
+
+.layer-popover {
+  padding: 12px 16px;
+  min-width: 120px;
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue
index 29cf03a..cf48178 100644
--- a/src/views/platform/index.vue
+++ b/src/views/platform/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="platform-overview">
+  <div class="platform-overview platform-no-padding">
     <OpenLayersMap />
     <CarAlarm />
     <!-- 右侧展开/收起按钮 -->
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import OpenLayersMap from '../../components/map/OpenLayersMap.vue';
 import CarAlarm from '../../components/map/info/carClarm.vue';
 import Eventlist from '../../components/map/info/eventlist.vue';
@@ -27,17 +27,24 @@ const showEventList = ref(false);
 function toggleEventList() {
   showEventList.value = !showEventList.value;
 }
+
+onMounted(() => {
+  document.querySelector('.app-main')?.classList.add('platform-no-padding');
+});
+onUnmounted(() => {
+  document.querySelector('.app-main')?.classList.remove('platform-no-padding');
+});
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .platform-overview {
   width: 100%;
-  height: 100%;
+  height:calc(100vh - 60px);
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 0;
+  z-index:1;
 }
 
 /* 右侧展开/收起按钮样式 */
@@ -51,4 +58,17 @@ function toggleEventList() {
   transform: translateY(-50%);
   cursor: pointer;
 }
-</style> 
\ No newline at end of file
+
+/* 只影响本页，精准去除AppMain的左右padding */
+:deep(.platform-no-padding) .app-main {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+</style>
+
+<style>
+.app-main.platform-no-padding {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 7682c8c..21e7631 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://10.0.0.17:8099',
+          target: 'http://localhost:8099',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }