refactor(map): 重构地图组件并添加缩放限制

-移除 HelloWorld.vue 文件
- 在 TiandituMap.vue 和 WipeEffectMap.vue 中添加地图缩放限制
- 更新 tianditu.js 配置文件，增加 MIN_ZOOM 和 MAX_ZOOM 常量
- 在 splitScreen.js 中为分屏地图添加缩放限制

src/components/HelloWorld.vue

@@ -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>

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
   })

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,
   })

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'
-}
+}

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
     })