From 44f895e1b13a75fc989624dc382ecf41ac396777 Mon Sep 17 00:00:00 2001
From: zhangtao <tao200967@126.com>
Date: Fri, 1 Aug 2025 15:47:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor(map):=20=E9=87=8D=E6=9E=84=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-移除 HelloWorld.vue 文件
- 在 TiandituMap.vue 和 WipeEffectMap.vue 中添加地图缩放限制
- 更新 tianditu.js 配置文件，增加 MIN_ZOOM 和 MAX_ZOOM 常量
- 在 splitScreen.js 中为分屏地图添加缩放限制
---
 src/components/HelloWorld.vue    | 67 --------------------------------
 src/components/TiandituMap.vue   |  4 +-
 src/components/WipeEffectMap.vue |  4 +-
 src/config/tianditu.js           | 22 ++++++-----
 src/utils/splitScreen.js         |  5 ++-
 5 files changed, 23 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 21c406b..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="map-container">
-    <div id="mapDiv" class="map-div"></div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-
-// 定义 props
-const props = defineProps({
-  msg: String
-})
-
-// 地图实例引用
-const mapInstance = ref(null)
-
-onMounted(() => {
-  // 确保天地图 API 已加载
-  if (typeof T !== 'undefined') {
-    mapInstance.value = new T.Map('mapDiv')
-
-
-    // 添加地图类型控件
-    let ctrl = new T.Control.MapType([
-      {
-        title: "卫星混合",
-        icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
-        layer: TMAP_HYBRID_MAP,
-      },
-      {
-        title: "地图",
-        icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png",
-        layer: TMAP_NORMAL_MAP,
-      },
-    ]);
-
-    // 设置控件位置
-    ctrl.setPosition(window.T_ANCHOR_TOP_RIGHT);
-    mapInstance.value.addControl(ctrl);
-
-
-    // 设置地图中心点和缩放级别
-    mapInstance.value.centerAndZoom(new T.LngLat(121.4737, 31.2304), 10);
-
-    console.log('地图初始化成功')
-  } else {
-    console.error('天地图 API 未加载')
-  }
-})
-</script>
-
-<style scoped>
-.map-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1000;
-}
-
-.map-div {
-  width: 100%;
-  height: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TiandituMap.vue b/src/components/TiandituMap.vue
index f5cde87..148b17f 100644
--- a/src/components/TiandituMap.vue
+++ b/src/components/TiandituMap.vue
@@ -49,7 +49,9 @@ const initMap = () => {
     layers: vectorLayers,
     view: new View({
       center: fromLonLat(TIANDITU_CONFIG.DEFAULT_CENTER),
-      zoom: TIANDITU_CONFIG.DEFAULT_ZOOM
+      zoom: TIANDITU_CONFIG.DEFAULT_ZOOM,
+      minZoom: TIANDITU_CONFIG.MIN_ZOOM,
+      maxZoom: TIANDITU_CONFIG.MAX_ZOOM
     }),
     controls: controls
   })
diff --git a/src/components/WipeEffectMap.vue b/src/components/WipeEffectMap.vue
index 2781a2c..aecac7a 100644
--- a/src/components/WipeEffectMap.vue
+++ b/src/components/WipeEffectMap.vue
@@ -82,7 +82,9 @@ const initMap = () => {
     target: mapDiv.value,
     view: new View({
       center: fromLonLat(TIANDITU_CONFIG.DEFAULT_CENTER),
-      zoom: TIANDITU_CONFIG.DEFAULT_ZOOM
+      zoom: TIANDITU_CONFIG.DEFAULT_ZOOM,
+      minZoom: TIANDITU_CONFIG.MIN_ZOOM,
+      maxZoom: TIANDITU_CONFIG.MAX_ZOOM
     }),
     controls: controls,
   })
diff --git a/src/config/tianditu.js b/src/config/tianditu.js
index fc3ccdd..50dc8d2 100644
--- a/src/config/tianditu.js
+++ b/src/config/tianditu.js
@@ -6,31 +6,35 @@ export const TIANDITU_CONFIG = {
   // 申请地址：https://console.tianditu.gov.cn/
   // 如果没有API Key，地图将无法正常显示
   API_KEY: '4559200347e75489c4474f5b11846368',
-  
+
   // 天地图服务URL配置 (使用子域名轮询)
   SERVICES: {
     // 矢量底图
     VECTOR: 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}',
-    
+
     // 矢量注记
     VECTOR_ANNOTATION: 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}',
-    
+
     // 影像底图
     SATELLITE: 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}',
-    
+
     // 影像注记
     SATELLITE_ANNOTATION: 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}'
   },
-  
+
   // 服务器子域名
   SUB_DOMAINS: ['0', '1', '2', '3', '4', '5', '6', '7'],
-  
+
   // 默认地图中心点（上海）
   DEFAULT_CENTER: [121.4737, 31.2304],
-  
+
   // 默认缩放级别
   DEFAULT_ZOOM: 14,
-  
+
+  // 缩放级别限制
+  MIN_ZOOM: 1,
+  MAX_ZOOM: 18,
+
   // OpenLayers 投影配置
   PROJECTION: 'EPSG:4326'
-}
\ No newline at end of file
+}
diff --git a/src/utils/splitScreen.js b/src/utils/splitScreen.js
index da8820f..cfa77ce 100644
--- a/src/utils/splitScreen.js
+++ b/src/utils/splitScreen.js
@@ -7,6 +7,7 @@ import TileLayer from 'ol/layer/Tile'
 import XYZ from 'ol/source/XYZ'
 import { fromLonLat } from 'ol/proj'
 import { defaults } from 'ol/control';
+import { TIANDITU_CONFIG } from '../config/tianditu.js'
 
 /**
  * 分屏地图管理器
@@ -162,7 +163,9 @@ export class SplitScreenManager {
       target: container,
       view: new View({
         center: fromLonLat(options.center),
-        zoom: options.zoom
+        zoom: options.zoom,
+        minZoom: TIANDITU_CONFIG.MIN_ZOOM,
+        maxZoom: TIANDITU_CONFIG.MAX_ZOOM
       }),
       controls: controls
     })