refactor(map): 重构地图组件并添加缩放限制
-移除 HelloWorld.vue 文件 - 在 TiandituMap.vue 和 WipeEffectMap.vue 中添加地图缩放限制 - 更新 tianditu.js 配置文件，增加 MIN_ZOOM 和 MAX_ZOOM 常量 - 在 splitScreen.js 中为分屏地图添加缩放限制
This commit is contained in:
parent
6ae6c25d34
commit
44f895e1b1
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue