Vue3 + Leaflet 实战：搞定天地图与CGCS2000 WMTS服务叠加（附完整避坑代码）

原创 于 2026-06-12 12:20:53 发布 · 346 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#Vue3 #Leaflet #WebGIS #WMTS #ViewUI

Vue3 + Leaflet 实战：搞定天地图与CGCS2000 WMTS服务叠加（附完整避坑代码）

在WebGIS开发领域，Vue3与Leaflet的结合正成为越来越多开发者的选择。这种组合既能享受Vue3响应式编程的便利，又能利用Leaflet轻量级地图库的灵活性。本文将带你深入探索如何在实际项目中实现天地图与CGCS2000坐标系的WMTS服务完美叠加，分享从项目搭建到最终实现的完整流程，特别针对Vue3的Composition API与Leaflet的集成提供详细解决方案。

1. 环境准备与基础配置

1.1 创建Vue3项目与安装依赖

首先确保你已经安装了最新版本的Node.js（建议16.x或以上）。使用Vite创建Vue3项目是一个高效的选择： 

npm create vite@latest vue3-leaflet-demo --template vue
cd vue3-leaflet-demo
npm install leaflet leaflet.wmts
npm install --save-dev @types/leaflet

这里有几个关键点需要注意：

  • 使用Vite而非传统Vue CLI，能获得更快的构建速度
  • 同时安装leaflet和leaflet.wmts两个核心库
  • 添加@types/leaflet以获得TypeScript支持（即使项目使用JavaScript也能获得更好的代码提示）

1.2 基础地图容器设置

在Vue组件中，我们需要先设置一个地图容器。创建一个 MapView.vue 组件： 

<template>
  <div id="map-container" ref="mapContainer"></div>
</template>

<style scoped>
#map-container {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>

重要提示 ：Leaflet对CSS有严格要求，必须确保地图容器有明确的高度设置。常见问题包括：

  • 容器高度为0导致地图不可见
  • 父元素有overflow:hidden导致地图显示异常
  • 未正确引入Leaflet的CSS文件

2. 自定义坐标系与天地图集成

2.1 定义CGCS2000坐标系（EPSG:4490）

Leaflet默认不支持CGCS2000坐标系，需要自定义扩展。在Vue3的setup函数中添加： 

import L from 'leaflet';

// 自定义EPSG:4490坐标系
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);
  }
});

这个自定义坐标系有几个关键参数：

  • transformation 定义了坐标转换规则
  • scale 函数控制不同缩放级别下的瓦片显示
  • code 指定了EPSG代码，方便后续引用

2.2 加载天地图服务

天地图提供了多种服务类型，我们需要特别注意坐标系匹配问题。以下是地理坐标系（EPSG:4490）下的天地图WMTS服务配置： 

const setupTianDiTuLayers = (map) => {
  const tdtKey = '你的天地图密钥'; // 替换为实际申请的密钥
  
  // 影像底图
  const imgLayer = L.tileLayer(
    `http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`,
    {
      maxZoom: 18,
      minZoom: 1,
      attribution: '天地图影像服务'
    }
  );

  // 注记层
  const ciaLayer = L.tileLayer(
    `http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`,
    {
      maxZoom: 18,
      minZoom: 1,
      attribution: '天地图注记服务'
    }
  );

  return L.layerGroup([imgLayer, ciaLayer]);
};

常见问题排查 ：

  1. 图层不显示：检查密钥是否有效，URL中的 c 是否与坐标系匹配
  2. 偏移问题：确认使用的是 img_c 而非 img_w 服务
  3. 跨域问题：确保服务器配置了正确的CORS头

3. WMTS服务集成与图层管理

3.1 配置CGCS2000 WMTS服务

使用leaflet.wmts插件加载自定义WMTS服务： 

import 'leaflet.wmts';

const setupWmtsLayer = (map) => {
  // 生成矩阵集ID
  const matrixIds = Array.from({length: 22}, (_, i) => ({
    identifier: i.toString(),
    topLeftCorner: new L.LatLng(90, -180)
  }));

  const wmtsLayer = new L.TileLayer.WMTS('http://your-wmts-service-url', {
    layer: 'your-layer-name',
    style: 'default',
    tilematrixSet: 'CGCS2000',
    format: 'image/png',
    crs: L.CRS.CustomEPSG4490,
    matrixIds: matrixIds,
    opacity: 0.8
  });

  return wmtsLayer;
};

3.2 Vue3中的图层状态管理

在Vue3中，我们可以使用Composition API更好地管理图层状态： 

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const map = ref(null);
    const baseLayers = ref({});
    const overlayLayers = ref({});
    
    onMounted(() => {
      map.value = L.map('map-container', {
        crs: L.CRS.CustomEPSG4490,
        center: [35, 110],
        zoom: 5
      });
      
      // 初始化图层
      baseLayers.value.tianditu = setupTianDiTuLayers(map.value);
      overlayLayers.value.wmts = setupWmtsLayer(map.value);
      
      // 添加默认图层
      baseLayers.value.tianditu.addTo(map.value);
    });
    
    onUnmounted(() => {
      if (map.value) {
        map.value.remove();
      }
    });
    
    return {
      map,
      baseLayers,
      overlayLayers
    };
  }
};

这种实现方式带来了几个优势：

  • 清晰的图层分类管理（底图与叠加层）
  • 响应式的图层状态控制
  • 自动的资源清理（组件卸载时移除地图）

4. 高级功能与性能优化

4.1 动态投影切换实现

在实际项目中，可能需要支持多种坐标系的切换。我们可以扩展之前的实现： 

const crsOptions = {
  'EPSG:4490': L.CRS.CustomEPSG4490,
  'EPSG:3857': L.CRS.EPSG3857
};

const changeCRS = (crsCode) => {
  if (!crsOptions[crsCode]) return;
  
  const currentCenter = map.value.getCenter();
  const currentZoom = map.value.getZoom();
  
  map.value.remove();
  map.value = L.map('map-container', {
    crs: crsOptions[crsCode],
    center: currentCenter,
    zoom: currentZoom
  });
  
  // 重新添加图层
  Object.values(baseLayers.value).forEach(layer => {
    layer.addTo(map.value);
  });
};

4.2 性能优化技巧

  1. 图层加载策略优化 ：

    • 使用 L.LayerGroup 管理同类图层
    • 实现按需加载（视口内加载）
    • 对静态数据使用 L.GeoJSON 而非WMTS

  2. 内存管理 ： 

    onUnmounted(() => {
  if (map.value) {
    map.value.eachLayer(layer => {
      map.value.removeLayer(layer);
    });
    map.value.remove();
  }
});

  3. 事件处理优化 ： 

    const handleMapClick = (e) => {
  // 使用节流函数防止频繁触发
  console.log('Clicked at:', e.latlng);
};

onMounted(() => {
  map.value.on('click', handleMapClick);
});

onUnmounted(() => {
  if (map.value) {
    map.value.off('click', handleMapClick);
  }
});

5. 完整实现与调试技巧

5.1 完整组件代码示例 

<template>
  <div class="map-container">
    <div id="map" ref="mapEl"></div>
    <div class="control-panel">
      <button @click="toggleLayer('wmts')">切换WMTS图层</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import L from 'leaflet';
import 'leaflet.wmts';
import 'leaflet/dist/leaflet.css';

// 自定义坐标系
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);
  }
});

const mapEl = ref(null);
const mapInstance = ref(null);
const layers = ref({
  tianditu: null,
  wmts: null
});

// 初始化天地图图层
const initTianDiTuLayer = () => {
  const tdtKey = 'your-tianditu-key';
  const imgLayer = L.tileLayer(
    `http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`,
    { maxZoom: 18, minZoom: 1 }
  );
  const ciaLayer = L.tileLayer(
    `http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`,
    { maxZoom: 18, minZoom: 1 }
  );
  return L.layerGroup([imgLayer, ciaLayer]);
};

// 初始化WMTS图层
const initWmtsLayer = () => {
  const matrixIds = Array.from({length: 22}, (_, i) => ({
    identifier: i.toString(),
    topLeftCorner: new L.LatLng(90, -180)
  }));
  
  return new L.TileLayer.WMTS('http://your-wmts-service', {
    layer: 'your-layer-name',
    style: 'default',
    tilematrixSet: 'CGCS2000',
    format: 'image/png',
    crs: L.CRS.CustomEPSG4490,
    matrixIds: matrixIds,
    opacity: 0.8
  });
};

// 切换图层显示状态
const toggleLayer = (layerName) => {
  if (!mapInstance.value || !layers.value[layerName]) return;
  
  if (mapInstance.value.hasLayer(layers.value[layerName])) {
    mapInstance.value.removeLayer(layers.value[layerName]);
  } else {
    layers.value[layerName].addTo(mapInstance.value);
  }
};

onMounted(() => {
  mapInstance.value = L.map(mapEl.value, {
    crs: L.CRS.CustomEPSG4490,
    center: [35, 110],
    zoom: 5,
    attributionControl: false
  });
  
  // 初始化图层
  layers.value.tianditu = initTianDiTuLayer();
  layers.value.wmts = initWmtsLayer();
  
  // 添加默认图层
  layers.value.tianditu.addTo(mapInstance.value);
});

onUnmounted(() => {
  if (mapInstance.value) {
    mapInstance.value.remove();
  }
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>

5.2 常见问题调试指南

  1. 图层不显示问题排查流程 ：

    • 检查浏览器开发者工具中的网络请求
    • 确认WMTS服务URL是否正确
    • 验证坐标系定义是否与服务匹配
    • 检查天地图密钥是否有效

  2. 跨域问题解决方案 ： 

    // 在vue.config.js中添加代理配置
module.exports = {
  devServer: {
    proxy: {
      '/geoserver': {
        target: 'http://your-geoserver-domain',
        changeOrigin: true
      }
    }
  }
};

  3. 性能问题分析工具 ：

    • 使用Leaflet的 L.Util.stamp 跟踪图层实例
    • Chrome开发者工具的Performance面板记录性能
    • 监控内存使用情况，防止泄漏
aaa407217484
关注
Vue3 + Leaflet 实战：搞定天地图与CGCS2000坐标WMTS服务的叠加显示（附完整避坑代码）
weixin_33978722的博客
06-10 263
本文详细介绍了如何使用Vue3和Leaflet实现天地图与CGCS2000坐标WMTS服务的无缝叠加显示。通过自定义坐标系处理、天地图服务集成和WMTS服务加载等关键技术点，提供了一套完整的工程化解决方案，并附有完整代码和常见问题解决方法，帮助开发者高效完成WebGIS开发任务。
Vue3 + Leaflet 实战：搞定天地图与CGCS2000 WMTS服务叠加（附完整代码）
aitie1479的博客
06-12 344
本文详细介绍了如何在Vue3项目中集成Leaflet，实现天地图与CGCS2000 WMTS服务的叠加显示。通过自定义坐标系统、解决图标丢失问题以及使用leaflet.wmts插件，开发者可以轻松构建高性能的WebGIS应用。文章包含完整代码示例和实用技巧，帮助开发者快速掌握Vue3与Leaflet的深度整合。
产业园区运营负责人如何利用产业大脑实现企业精准招商？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
政府科技管理者在产业政策兑现时，如何确保政策精准匹配？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
易语言源码易语言各地广播电台源码
06-26
易语言源码易语言各地广播电台源码
SFS.rar
06-26
CAD 缺失对应字体时，图纸文字会显示异常、出现乱码。将下载好的字体文件复制到 AutoCAD 的 Fonts 字体文件夹，即可正常显示文字。
科技中介服务机构如何在科创数智大脑中获取企业精准需求？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
【高创新！高热点！】基于蚂蚁算法、A算法、RRT算法的三维无人机路径规划比较与研究（Matlab代码实现）
06-26
内容概要：本文系统性地研究了基于蚂蚁算法、A算法和RRT算法的三维无人机路径规划方法，通过Matlab代码实现对三种智能优化算法在复杂三维空间中的路径规划性能进行全面比较与分析。研究聚焦于路径长度、计算效率、避障能力及收敛稳定性等关键指标，深入探讨各类算法在动态障碍物环境下的适用性与局限性，旨在为无人机在高密度城市或复杂地形中的自主飞行任务提供可靠的技术支持与决策依据。同时，项目强调算法的实际仿真与可视化呈现，便于直观评估不同策略的效果差异。; 适合人群：具备一定Matlab编程基础，从事无人机路径规划、智能优化算法、机器人导航及相关领域的科研人员、研究生及工程技术人员。; 使用场景及目标：①应用于复杂三维环境中无人机路径规划的仿真实验与性能测试；②对比分析蚂蚁算法、A算法与RRT算法在路径最优性、实时性和鲁棒性方面的表现差异；③为多无人机协同导航、动态避障系统设计及实际工程部署提供算法选型参考和技术支撑； 阅读建议：建议读者结合所提供的Matlab代码进行动手实践，重点关注算法参数调节对路径生成质量的影响，并通过仿真结果的可视化深入理解各算法的行为特性，进一步可拓展至动态环境更新与多机协同路径优化的研究方向。
产业园区运营负责人如何利用产业大脑实现企业服务精准对接？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
基于51单面机步进电机设计
06-26
源码+仿真 1可完成电机的启动、停止、加减速、正反向控制。 2、数码管或LCD显示电机运行状态（正转、反转、停止、速度等级） 3、通过矩阵键盘设置速度等级和电机运行状态，并在数码管或LCD上显示设置过程。
产业园区运营负责人如何利用产业大脑实现企业精准招商与服务能力提升？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
Creo 新版 ISO 镜像一站式高速下载入口.rar
06-26
Creo 新版 ISO 镜像一站式高速下载入口.rar
易语言源码易语言好听音乐网播放器源码
最新发布
06-26
易语言源码易语言好听音乐网播放器源码
全网资讯中枢 - 8大板块: AI新闻_自媒体爆款_热门话题_一键写文_财经新闻_热门板块_涨停分析_复盘报告.zip
06-26
全网资讯中枢 - 8大板块: AI新闻_自媒体爆款_热门话题_一键写文_财经新闻_热门板块_涨停分析_复盘报告.zip
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例笔记本电脑的智能底座设计论文及其资料
06-26
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例笔记本电脑的智能底座设计论文及其资料
产业园区运营负责人如何通过科创数智大脑提升企业数字化转型效率？.docx
06-26
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
国央企创新负责人如何利用产业大脑实现跨区域产学研协同？.docx
06-26
国央企创新负责人如何利用产业大脑实现跨区域产学研协同？
Creo 参数模具程序无损压缩包高速下载.rar
06-26
Creo 参数模具程序无损压缩包高速下载.rar
易语言源码易语言高级表格与EXCEL互转模块
06-26
易语言源码易语言高级表格与EXCEL互转模块
Creo 动力电池完整程序文件附安装教程.rar
06-26
Creo 动力电池完整程序文件附安装教程.rar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值