企业官网建设流程全解析

Vue3 + Leaflet 实战：天地图与CGCS2000 WMTS服务的无缝集成方案

在WebGIS开发中，Leaflet因其轻量级和易用性成为热门选择，但实际项目中遇到坐标系统差异时，往往会陷入各种"坑"。本文将分享如何在Vue3环境中，通过Composition API优雅地解决Leaflet加载天地图（CGCS2000坐标系）与自定义WMTS服务叠加的技术难题。

1. 环境准备与核心问题拆解

1.1 技术栈选型考量

现代前端项目中，我们通常会选择以下技术组合：

• Vue3：采用Composition API组织代码
• Leaflet：1.9.3+版本（支持ES模块）
• leaflet.wmts：通过npm安装的WMTS插件
• Vite：构建工具（比Webpack更快的热更新）

需要特别注意的依赖项：

npm install leaflet @types/leaflet leaflet.wmts

1.2 坐标系冲突的本质

Leaflet默认使用EPSG:3857（Web墨卡托），而国内常用CGCS2000（EPSG:4490）坐标系，这导致直接加载天地图会出现偏移问题。解决方案的核心在于：

1. 自定义CRS（坐标参考系统）
2. 正确配置WMTS服务的矩阵集参数
3. 确保Vue组件生命周期与地图初始化时序匹配

2. 自定义CRS的工程化实现

2.1 创建可复用的坐标模块

在src/utils/mapUtils.js中定义自定义坐标系：

export const defineCustomCRS = () => { L.CRS.CustomEPSG4490 = L.extend({}, L.CRS.Earth, { code: 'EPSG:4490', projection: L.Projection.LonLat, transformation: new L.Transformation( 1 / 180, 1, -1 / 180, 0.5 ), scale: function(zoom) { return 256 * Math.pow(2, zoom - 1); } }); }

2.2 坐标系验证技巧

在开发过程中，可以通过以下方法验证坐标系是否正确：

// 在控制台测试坐标转换 const latLng = map.project([39.9, 116.4], 10); console.log(latLng); // 应该输出合理的像素坐标

注意：如果发现地图切片无法对齐，检查transformation参数的四个值是否与你的WMTS服务匹配

3. 天地图集成的最佳实践

3.1 服务地址的智能配置

创建src/config/tdtConfig.js配置文件：

export const getTdtLayers = (key) => { const baseUrl = 'http://t0.tianditu.gov.cn' return { img: `${baseUrl}/img_c/wmts?tk=${key}`, cia: `${baseUrl}/cia_c/wmts?tk=${key}`, vec: `${baseUrl}/vec_c/wmts?tk=${key}` } }

3.2 图层管理的Vue3实现

在SFC组件中管理地图状态：

<script setup> import { ref, onMounted } from 'vue' import L from 'leaflet' import { defineCustomCRS } from '@/utils/mapUtils' import { getTdtLayers } from '@/config/tdtConfig' const mapInstance = ref(null) const tdtKey = 'your-tdt-key' const initBaseMap = () => { const layers = { base: L.tileLayer(`${getTdtLayers(tdtKey).img}`, { tileSize: 256, zoomOffset: 1 }), label: L.tileLayer(`${getTdtLayers(tdtKey).cia}`, { tileSize: 256, zoomOffset: 1 }) } return L.layerGroup([layers.base, layers.label]) } onMounted(() => { defineCustomCRS() mapInstance.value = L.map('map', { crs: L.CRS.CustomEPSG4490, layers: [initBaseMap()] }) }) </script>

4. WMTS服务叠加的完整方案

4.1 WMTS参数解析表

4.2 动态矩阵集生成方法

const generateMatrixIds = (maxZoom = 22) => { return Array.from({ length: maxZoom }, (_, i) => ({ identifier: i.toString(), topLeftCorner: new L.LatLng(90, -180) })) }

4.3 完整WMTS加载示例

const loadWMTS = (map) => { const wmtsLayer = new L.TileLayer.WMTS('http://your-service/wmts', { layer: 'your_layer', style: 'default', tilematrixSet: 'CGCS2000', format: 'image/png', crs: L.CRS.CustomEPSG4490, matrixIds: generateMatrixIds(), tileSize: 256 }) // 添加图层控制 const overlayMaps = { "自定义WMTS": wmtsLayer } L.control.layers(null, overlayMaps).addTo(map) }

5. 性能优化与常见问题

5.1 内存泄漏预防

在Vue3组件卸载时清理地图资源：

import { onUnmounted } from 'vue' onUnmounted(() => { if (mapInstance.value) { mapInstance.value.remove() mapInstance.value = null } })

5.2 常见错误排查指南

1. 切片显示错位：

   • 检查CRS定义中的transformation参数
   • 确认WMTS服务的tilematrixSet与前端一致

2. 跨域问题：

   • 确保服务端配置CORS头
   • 开发环境下配置Vite代理：

// vite.config.js server: { proxy: { '/geoserver': 'http://your-server' } }

3. 缩放级别异常：
   • 检查matrixIds的生成逻辑
   • 验证地图的minZoom/maxZoom设置

6. 工程化扩展建议

6.1 自定义Hook封装

创建useLeafletMap组合式函数：

export function useLeafletMap(containerId, options) { const map = ref(null) onMounted(() => { map.value = L.map(containerId, options) }) onUnmounted(() => { map.value?.remove() }) return { map } }

6.2 TypeScript增强支持

为自定义CRS添加类型声明：

// src/types/leaflet.d.ts import 'leaflet' declare module 'leaflet' { namespace CRS { const CustomEPSG4490: CRS } }

实际项目中，我们团队发现将地图初始化逻辑拆分为独立的Composable后，不仅提高了代码复用率，还使得不同页面的地图实例更容易管理。特别是在需要动态切换基图的场景下，这种架构表现出了良好的扩展性。