地图修改

d2a96b7a · chenron · c08f64cb · d2a96b7a · d2a96b7a · d2a96b7a
Commit d2a96b7a authored Dec 05, 2025 by chenron
8 changed files
--- a/src/components/CommonMap.vue
+++ b/src/components/CommonMap.vue
 <template>
-  <div class="tourism">
-    <div id="container"></div>
-  </div>
+  <div id="container"></div>
 </template>
 <script setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import { nextTick, onMounted, reactive, ref } from "vue";
+import {
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  onUnmounted,
+  onActivated,
+  defineEmits,
+} from "vue";
+
+// 定义事件
+const emit = defineEmits(["province-selected"]);
 import gansuLine from "./newLine.json";
 let map = null;
 window._AMapSecurityConfig = {
@@ -25,7 +34,7 @@ const handleInitMap = () => {
      map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "2D",
-        zoom: 4, //初始化地图级别
+        zoom: 4, //根据屏幕宽度设置初始化地图级别
        center: [100.808299, 35.791787], //初始化地图中心点位置
        expandZoomRange: true, // 开启显示范围设置
        mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
@@ -34,22 +43,24 @@ const handleInitMap = () => {
        copyrightControl: false,
        logoControl: false,
      });
-      const mapSize = map.getSize();
-      mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
-      const minZoom = 4;
+
+      // 根据不同屏幕大小设置缩放
+      // const mapSize = map.getSize();
+      // if (mapSize && mapSize.width < 780) {
+      //   map.setZoom(3.5);
+      // }
      handleDistrict();
      addPolylines();
      handleAddMarket(selectName);
    })
    .catch((e) => {});
-  // if (map) return true;
 };
 // 高亮和描边
 const handleDistrict = () => {
  let districtSearch = new AMap.DistrictSearch({
    subdistrict: 0, //获取边界不需要返回下级行政区
    extensions: "all", //返回行政区边界坐标组等具体信息
-    level: "province", //查询行政级别为 市 province-省 district-市
+    level: "province", //查询行政级别为 市 province-省 district-
  });
  let polygons = [];
  districtSearch.search("中华人民共和国", function (status, result) {
@@ -136,25 +147,21 @@ const addPolylines = () => {
      });

      // 鼠标双击
-      polylineObj.on("dblclick", function (e) {
-        const data = polylineObj.getExtData();
-        // showProject(data);
-      });
+      polylineObj.on("dblclick", function (e) {});
      return polylineObj;
    },
  });
  map.add(geojsonObj);
 };
 // 添加标记
-let currentMarkers = []; // 存储当前显示的标记
+let currentMarkers = [];
 const handleAddMarket = (selectName) => {
  // 清除之前的所有标记
  if (currentMarkers.length > 0) {
    map.remove(currentMarkers);
    currentMarkers = [];
  }
-
-  // 额外确保清除所有标记（防止其他地方创建的标记）
+  // 清除所有标记
  if (map) {
    map.getAllOverlays("marker").forEach((marker) => {
      map.remove(marker);
@@ -176,6 +183,8 @@ const handleAddMarket = (selectName) => {
      { number: 2, position: [117.0009, 36.6758], province: "山东省" },
      // 河北
      { number: 1, position: [114.5025, 38.0455], province: "河北省" },
+      // 甘肃
+      { number: 10, position: [103.8236, 36.058], province: "甘肃省" },
    ],
    试运营: [
      // 四川
@@ -258,6 +267,69 @@ const handleAddMarket = (selectName) => {
      infoWindow.close();
    });

+    // 点击事件：聚焦到对应省份并显示省份地图
+    marker.on("click", function (e) {
+      const provinceName = markerData.province; // 例如：甘肃省
+      emit("province-selected", true);
+
+      // 创建省份搜索
+      let districtSearch = new AMap.DistrictSearch({
+        subdistrict: 0,
+        extensions: "all",
+        level: "province",
+      });
+
+      // 搜索并定位到省份
+      districtSearch.search(provinceName, function (status, result) {
+        if (status === "complete") {
+          let bounds = result.districtList[0].boundaries;
+          if (bounds && bounds.length > 0) {
+            // 清除所有边界线（中国地图边界）
+            map.getAllOverlays("polyline").forEach((polyline) => {
+              map.remove(polyline);
+            });
+            
+            // 清除所有标记点
+            map.getAllOverlays("marker").forEach((marker) => {
+              map.remove(marker);
+            });
+            
+            // 清除所有覆盖物
+            map.getAllOverlays("polygon").forEach((polygon) => {
+              map.remove(polygon);
+            });
+            
+            // 绘制省份边界线
+            for (let i = 0; i < bounds.length; i++) {
+              let provincePolyline = new AMap.Polyline({
+                path: bounds[i],
+                strokeColor: "#72A8FF",
+                strokeWeight: 3,
+                map: map,
+              });
+              map.add(provincePolyline);
+            }
+            
+            // 绘制省份填充区域（可选）
+            let provincePolygon = new AMap.Polygon({
+              path: bounds[0],
+              strokeColor: "#72A8FF",
+              strokeWeight: 2,
+              fillColor: "rgba(114, 168, 255, 0.1)",
+              fillOpacity: 0.3,
+            });
+            map.add(provincePolygon);
+            
+            // 重新添加新路线（确保新路线显示在地图上）
+            addPolylines();
+            
+            // 设置地图视图到该省份
+            map.setFitView([provincePolygon]);
+            map.setZoom(8);
+          }
+        }
+      });
+    });
    currentMarkers.push(marker);
  }
 };
@@ -269,27 +341,83 @@ const updateMarkers = (selectName) => {
 // 重置地图到初始状态
 const resetMap = () => {
  if (map) {
+    // 清除所有边界线（包括省份边界线）
+    map.getAllOverlays("polyline").forEach((polyline) => {
+      map.remove(polyline);
+    });
+    
+    // 清除所有标记点
+    map.getAllOverlays("marker").forEach((marker) => {
+      map.remove(marker);
+    });
+    
+    // 清除所有覆盖物
+    map.getAllOverlays("polygon").forEach((polygon) => {
+      map.remove(polygon);
+    });
+    
+    // 重新绘制全国边界
+    handleDistrict();
+    
+    // 恢复当前阶段的标记点
+    let selectName = sessionStorage.getItem("selectedContentBtn");
+    handleAddMarket(selectName);
+    
+    // 设置地图视图
    map.setZoom(4);
    map.setCenter([100.808299, 35.791787]);
-    const mapSize = map.getSize();
-    mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
  }
 };

+// 返回全国地图视图
+const backToCountry = () => {
+  resetMap();
+};
+
 // 暴露方法给父组件
 defineExpose({
  updateMarkers,
  resetMap,
+  backToCountry,
 });
 onMounted(() => {
  handleInitMap();
+  // 监听窗口大小变化
+  window.addEventListener("resize", handleResize);
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (map) {
+    map.resize();
+  }
+};
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
+
+onActivated(() => {
+  nextTick(() => {
+    const container = document.getElementById("container");
+    if (container) {
+      container.style.width = "100%";
+      container.style.height = "100%";
+    }
+    map ? map.resize() : handleInitMap();
+  });
 });
 </script>

 <style scoped lang="less">
 .tourism {
  width: 100%;
-  .vh(height, 600);
+  height: 100%;
+}
+#container {
+  width: 100%;
+  height: 100%;
 }
 .custom-content-marker {
  position: relative;
@@ -404,4 +532,4 @@ onMounted(() => {
 :deep(.amap-copyright) {
  opacity: 0;
 }
-</style>
+</style>
\ No newline at end of file
--- a/src/style.css
+++ b/src/style.css
@@ -50,8 +50,8 @@ html, body {
 }

 #container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  /* width: 100%; */
+  /* height: 100%;
+  overflow: hidden; */
 }

--- a/src/views/homePage/components/Construct.vue
+++ b/src/views/homePage/components/Construct.vue
 <template>
  <div class="construct-container">
    <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
      <div class="construct-left-map">
        <Map ref="mapRef" />
      </div>
@@ -51,7 +48,7 @@ import {
  onUnmounted,
  shallowReactive,
  defineOptions,
-  onActivated
+  onActivated,
 } from "vue";
 import CircleProgress from "./CircleProgress.vue";

@@ -85,7 +82,7 @@ onActivated(() => {
  if (mapRef.value && mapRef.value.resetMap) {
    mapRef.value.resetMap();
  }
-  
+
  // 确保显示建设阶段的标记
  if (mapRef.value && mapRef.value.updateMarkers) {
    mapRef.value.updateMarkers("建设");
@@ -96,9 +93,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
  display: flex;
-  .vh(margin-top,10);
+  height: 100%;
+  width: 100%;
  .construct-left {
-    width: 100%;
+    flex: 1;
    height: 100%;
    .tag-image {
      img {
@@ -106,22 +104,22 @@ onActivated(() => {
      }
    }
    .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
-    justify-content: space-between;
-    .vh(height,700);
+    justify-content: space-around;
+    height: 100%;
    .info-title {
      .vw(width, 180);
      .vh(height, 30);
      .vh(line-height, 30);
      .font(16);
      .vw(padding-left,20);
-      .vh(margin-bottom,15);
+      .vh(margin-bottom,10);
+      .vh(margin-top,15);
      text-align: left;
      color: #fff;
      white-space: nowrap;

--- a/src/views/homePage/components/Operation.vue
+++ b/src/views/homePage/components/Operation.vue
 <template>
  <div class="construct-container">
    <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
      <div class="construct-left-map">
        <Map ref="mapRef" />
      </div>
@@ -44,7 +41,7 @@ import {
  onMounted,
  onUnmounted,
  defineOptions,
-  onActivated
+  onActivated,
 } from "vue";

 // 定义组件名称，用于keep-alive缓存
@@ -110,7 +107,7 @@ onActivated(() => {
  if (mapRef.value && mapRef.value.resetMap) {
    mapRef.value.resetMap();
  }
-  
+
  // 确保显示运营阶段的标记
  if (mapRef.value && mapRef.value.updateMarkers) {
    mapRef.value.updateMarkers("运营");
@@ -121,8 +118,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
  display: flex;
+  height: 100%;
+  width: 100%;
  .construct-left {
-    width: 100%;
+    flex: 1;
    height: 100%;
    .tag-image {
      img {
@@ -130,15 +129,14 @@ onActivated(() => {
      }
    }
    .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
-    justify-content: space-between;
-    .vh(height,612);
+    justify-content: space-around;
+    height: 100%;
    .info-title {
      .vw(width, 180);
      .vh(height, 30);

--- a/src/views/homePage/components/ProjectApproval.vue
+++ b/src/views/homePage/components/ProjectApproval.vue
 <template>
  <div class="project-container">
    <CommonTotal :numberList="initiationList" />
+    <div class="map-wrapper">
+      <Map ref="mapRef" @province-selected="onProvinceSelected" />
+      <div class="back-to-country-btn" @click="backToCountry" v-show="showBackBtn">
+        返回全国
+      </div>
+    </div>
  </div>
-  <Map ref="mapRef" />
 </template>

 <script setup>
@@ -16,7 +21,7 @@ import {
  computed,
  shallowRef,
  defineOptions,
-  onActivated
+  onActivated,
 } from "vue";

 // 定义组件名称，用于keep-alive缓存
@@ -32,6 +37,7 @@ const props = defineProps({
 });

 const mapRef = ref(null);
+const showBackBtn = ref(false);
 // 使用静态数据避免重复创建
 const STATIC_DATA = {
  立项: [
@@ -70,10 +76,33 @@ watch(
  { immediate: true }
 );

+// 返回全国地图
+const backToCountry = () => {
+  if (mapRef.value && mapRef.value.backToCountry) {
+    mapRef.value.backToCountry();
+    showBackBtn.value = false;
+  }
+};
+
+// 监听省份选择事件
+const onProvinceSelected = (show) => {
+  showBackBtn.value = show;
+};
+
+// 监听地图缩放级别来显示/隐藏返回按钮
+const handleMapZoomChange = () => {
+  if (mapRef.value) {
+    // 这里可以添加监听地图缩放变化的逻辑
+    // 当缩放级别大于某个值时显示返回按钮
+    showBackBtn.value = true;
+  }
+};
+
 // 组件被激活时重置地图
 onActivated(() => {
  if (mapRef.value && mapRef.value.resetMap) {
    mapRef.value.resetMap();
+    showBackBtn.value = false;
  }
 });
 </script>
@@ -81,7 +110,39 @@ onActivated(() => {
 <style scoped lang="less">
 .project-container {
  display: flex;
-  justify-content: center;
+  flex-direction: column; // 垂直排列子元素
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
  .vh(margin-top, 20);
+  height: 100%;
+  width: 100%;
+
+  .map-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .back-to-country-btn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: rgba(4, 66, 126, 0.9);
+      border: 1px solid #00ddeb;
+      border-radius: 4px;
+      color: #fff;
+      padding: 8px 16px;
+      cursor: pointer;
+      font-size: 14px;
+      z-index: 1000;
+      backdrop-filter: blur(4px);
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: rgba(0, 221, 235, 0.2);
+        border-color: #fff;
+        transform: scale(1.05);
+      }
+    }
+  }
 }
 </style>
--- a/src/views/homePage/components/trialOperations.vue
+++ b/src/views/homePage/components/trialOperations.vue
 <template>
  <div class="construct-container">
    <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
      <div class="construct-left-map">
        <Map ref="mapRef" />
      </div>
@@ -44,7 +41,7 @@ import {
  onMounted,
  onUnmounted,
  defineOptions,
-  onActivated
+  onActivated,
 } from "vue";

 // 定义组件名称，用于keep-alive缓存
@@ -125,7 +122,7 @@ onActivated(() => {
  if (mapRef.value && mapRef.value.resetMap) {
    mapRef.value.resetMap();
  }
-  
+
  // 确保显示试运营阶段的标记
  if (mapRef.value && mapRef.value.updateMarkers) {
    mapRef.value.updateMarkers("试运营");
@@ -136,8 +133,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
  display: flex;
+  height: 100%;
+  width: 100%;
  .construct-left {
-    width: 100%;
+    flex: 1;
    height: 100%;
    .tag-image {
      img {
@@ -145,15 +144,14 @@ onActivated(() => {
      }
    }
    .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
    }
  }
  .construct-right {
    display: flex;
    flex-direction: column;
-    justify-content: space-between;
-    .vh(height,612);
+    justify-content: space-around;
+    height: 100%;
    .info-title {
      .vw(width, 180);
      .vh(height, 30);

--- a/src/views/homePage/copy.vue
+++ b/src/views/homePage/copy.vue
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -34,9 +34,7 @@
          融资建设投资
        </div>
      </div>
-    </div>
-    <div class="content">
-      <div class="fullscreen-btn">
+      <div class="header-fullscreen">
        <span @click="toggleFullscreen" class="fullscreen-text">
          <el-icon :size="18">
            <full-screen />
@@ -44,6 +42,8 @@
          {{ isFullscreen ? "退出全屏" : "全屏" }}
        </span>
      </div>
+    </div>
+    <div class="content">
      <div class="content-btn">
        <span
          v-for="item in navList"
@@ -56,11 +56,21 @@
      <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
        <ProjectApproval
          :currentName="selectedContentName"
+          :isFullscreen="isFullscreen"
          v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
        />
-        <Construct v-else-if="selectedContentBtn === 2" />
-        <Operation v-else-if="selectedContentBtn === 4" />
-        <TrialOperations v-else-if="selectedContentBtn === 3" />
+        <Construct
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 2"
+        />
+        <Operation
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 4"
+        />
+        <TrialOperations
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 3"
+        />
      </keep-alive>
    </div>
    <div class="bottom"></div>
@@ -133,23 +143,6 @@ const selectContentBtn = (item) => {
  }, 100);
 };

-// 暂时注释未使用的函数，避免lint警告
-// const showProjectPopup = (event) => {
-//   currentProject.value = {
-//     name: "项目001",
-//     data: [
-//       { label: "数据01", value: "3654.89", unit: "单位" },
-//       { label: "数据02", value: "3654.89", unit: "单位" },
-//       { label: "数据03", value: "3654.89", unit: "单位" },
-//     ],
-//   };
-//   popupStyle.value = {
-//     left: `${event.clientX}px`,
-//     top: `${event.clientY - 100}px`,
-//   };
-//   showPopup.value = true;
-// };
-
 // 全屏切换功能
 const toggleFullscreen = () => {
  const homeContainer = document.querySelector(".home-container");
@@ -165,6 +158,8 @@ const toggleFullscreen = () => {
    }

    homeContainer.style.height = "100%";
+    // 移除全屏类
+    homeContainer.classList.remove("fullscreen");
  } else {
    // 进入全屏
    if (homeContainer.requestFullscreen) {
@@ -176,6 +171,8 @@ const toggleFullscreen = () => {
    }

    homeContainer.style.height = "100vh";
+    // 添加全屏类
+    homeContainer.classList.add("fullscreen");
  }

  isFullscreen.value = !isFullscreen.value;
@@ -188,14 +185,22 @@ onMounted(() => {

 // 监听全屏变化事件
 window.addEventListener("fullscreenchange", () => {
+  const homeContainer = document.querySelector(".home-container");
+
  if (!document.fullscreenElement) {
    isFullscreen.value = false;
-    const homeContainer = document.querySelector(".home-container");
-    if (homeContainer) homeContainer.style.height = "100%";
+    if (homeContainer) {
+      homeContainer.style.height = "100%";
+      // 移除全屏类
+      homeContainer.classList.remove("fullscreen");
+    }
  } else {
    isFullscreen.value = true;
-    const homeContainer = document.querySelector(".home-container");
-    if (homeContainer) homeContainer.style.height = "100vh";
+    if (homeContainer) {
+      homeContainer.style.height = "100vh";
+      // 添加全屏类
+      homeContainer.classList.add("fullscreen");
+    }
  }
 });
 </script>
@@ -208,7 +213,7 @@ window.addEventListener("fullscreenchange", () => {
  // background-position: center;
  width: 100%;
  height: 100%;
-  background: linear-gradient(to bottom, #04427E, #095DCC);
+  background: linear-gradient(to bottom, #04427e, #095dcc);
  overflow: hidden;
  color: #fff;
  display: flex;
@@ -220,16 +225,31 @@ window.addEventListener("fullscreenchange", () => {
    display: flex;
    justify-content: center;
    align-items: flex-end;
+    position: relative; // 为绝对定位提供参考
+
+    .header-fullscreen {
+      position: absolute;
+      right: 20px;
+      bottom: 0; // 与导航按钮底部对齐
+      cursor: pointer;
+      span {
+        color: white;
+        font-weight: 700;
+        .font(14);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+
    .header-middile {
      background-image: url("@/assets/images/头部bg.png");
      background-repeat: no-repeat;
      background-position: center;
-      // background-size: 170% 100%;
      background-size: cover;
      letter-spacing: 1px;
      font-weight: 400;
      font-family: "YouSheBiaoTiHei";
-      // .vw(width,950);
      .vh(height,75);
      display: flex;
      justify-content: center;
@@ -247,11 +267,6 @@ window.addEventListener("fullscreenchange", () => {
        .font(24);
        flex: 0.8;
      }
-
-      // @media screen and (max-width: 1280px) {
-      //   flex: 0.4;
-      //   .font(20);
-      // }
    }
    .header-left {
      display: flex;
@@ -307,13 +322,37 @@ window.addEventListener("fullscreenchange", () => {
    }
  }
  .content {
-    flex: 1;
+    width: 100%;
    .vw(padding-left, 20);
    .vw(padding-right, 20);
    .vh(margin-top,-16px);
+    height: calc(100vh - 190px);
+
+    // 根据屏幕宽度调整高度，确保在不同尺寸下都能显示底部图标
+    @media screen and (max-width: 1450px) {
+      height: calc(100vh - 180px);
+    }
+
+    @media screen and (max-width: 1280px) {
+      height: calc(100vh - 170px);
+    }
+
+    // 全屏模式下的高度调整
+    .fullscreen & {
+      height: calc(100vh - 120px);
+
+      @media screen and (max-width: 1450px) {
+        height: calc(100vh - 110px);
+      }
+
+      @media screen and (max-width: 1280px) {
+        height: calc(100vh - 100px);
+      }
+      @media screen and (max-width: 1920px) {
+        height: calc(100vh - 80px);
+      }
+    }
    .content-btn {
-      // .vh(margin-top,0);
-      // .vh(margin-bottom,20);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -326,7 +365,7 @@ window.addEventListener("fullscreenchange", () => {
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
-        color: #fff; // 补充文字颜色（匹配蓝色按钮的白色文字）
+        color: #fff;
      }

      // 立项按钮
@@ -394,18 +433,5 @@ window.addEventListener("fullscreenchange", () => {
    width: 100%;
    .vh(height, 110);
  }
-  .fullscreen-btn {
-    display: flex;
-    cursor: pointer;
-    span {
-      margin-left: auto;
-      color: white;
-      font-weight: 700;
-      .font(16);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-  }
 }
 </style>