天地图是由国家测绘地理信息局建设的国家地理信息公共服务平台提供免费的地图瓦片服务。本文基于实际项目代码详细讲解如何在Vue3 OpenLayers项目中加载天地图EPSG:3857瓦片并将百度BD09坐标正确投放到天地图底图上。一、天地图服务概述1.1 天地图简介天地图是国家测绘地理信息局建设的官方地图服务具有以下特点特性说明坐标系EPSG:4326WGS84经纬度/ EPSG:3857Web墨卡托瓦片协议WMTSWeb Map Tile Service使用费用免费需申请开发者密钥数据权威性国家测绘局官方数据1.2 天地图瓦片服务地址天地图提供两种投影的瓦片服务投影类型服务地址说明EPSG:4326http://t{0-7}.tianditu.gov.cn/vec_c/wmts?...经纬度投影EPSG:3857https://t{0-7}.tianditu.gov.cn/vec_w/wmts?...Web墨卡托投影本文使用的是EPSG:3857瓦片服务与OpenLayers默认投影一致。1.3 瓦片图层类型天地图将底图和注记分为独立图层需叠加加载图层代码说明URL参数vec矢量底图LAYERveccia矢量注记地名标注LAYERciaimg影像底图LAYERimgcta影像注记LAYERcta二、BD09坐标转换链路2.1 转换策略天地图EPSG:3857瓦片基于标准Web墨卡托投影不涉及GCJ02偏移。因此BD09坐标的转换链路为BD09百度经纬度→ EPSG:4326WGS84经纬度→ EPSG:3857Web墨卡托与高德瓦片的区别高德瓦片基于GCJ02坐标系需要经过GCJ02中间态天地图使用标准WGS84/EPSG:3857转换链路更直接。2.2 第一步BD09 → EPSG:4326百度坐标BD09是在GCJ02基础上进一步偏移的坐标系需要先转换为标准WGS84坐标importgcoordfromgcoord// BD09 → EPSG:4326WGS84经纬度constbd09ToEPSG4326(coord)gcoord.transform(coord,gcoord.BD09,gcoord.EPSG4326)2.3 第二步EPSG:4326 → EPSG:3857将WGS84经纬度转换为Web墨卡托投影坐标// EPSG:4326 → EPSG:3857Web墨卡托constEPSG4326ToEPSG3857(coord)gcoord.transform(coord,gcoord.EPSG4326,gcoord.EPSG3857)2.4 完整转换函数将两步转换组合为一个工具函数// BD09 → EPSG:4326 → EPSG:3857 完整链路constbd09ToMercator(coord)EPSG4326ToEPSG3857(bd09ToEPSG4326(coord))// 使用示例constcenterbd09ToMercator([116.404,39.915])// 结果: [12958175.xx, 4862293.xx]EPSG:3857墨卡托坐标单位米为什么这里gcoord.transform(coord, gcoord.EPSG4326, gcoord.EPSG3857)可以正常使用与高德瓦片场景不同天地图使用标准WGS84/EPSG:3857投影gcoord的EPSG:4326 → EPSG:3857转换是标准墨卡托投影计算不涉及GCJ02偏移因此转换结果准确。三、天地图WMTS瓦片加载3.1 WMTS协议参数说明天地图使用WMTSWeb Map Tile Service标准协议URL参数如下参数说明示例值SERVICE服务类型WMTSREQUEST请求类型GetTileVERSION协议版本1.0.0LAYER图层代码vec矢量底图STYLE渲染样式defaultTILEMATRIXSET瓦片矩阵集wEPSG:3857FORMAT瓦片格式tilesTILEMATRIX缩放级别{z}TILEROW瓦片行号{y}TILECOL瓦片列号{x}tk开发者密钥你的密钥重要tk参数是天地图的访问密钥需要在天地图开放平台注册并申请。3.2 加载天地图图层importTileLayerfromol/layer/TileimportXYZfromol/source/XYZ// 矢量底图图层constvecLayernewTileLayer({source:newXYZ({url:https://t0.tianditu.gov.cn/vec_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERvecSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥,tileSize:256,crossOrigin:anonymous})})// 矢量注记图层地名标注constciaLayernewTileLayer({source:newXYZ({url:https://t0.tianditu.gov.cn/cia_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERciaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥,tileSize:256,crossOrigin:anonymous})})3.3 底图 注记叠加天地图的底图和注记是分离的需要将两个图层叠加到地图上才能看到完整的地图效果constmapnewMap({target:map,layers:[vecLayer,// 底图在下ciaLayer// 注记在上],view:newView({center:[12958175,4862293],// 北京市中心EPSG:3857zoom:10,projection:EPSG:3857})})四、完整Vue3组件实现以下是基于项目ol-bd-tdtEPSG3857.vue的完整实现包含天地图底图加载和BD09坐标验证template div classwh100 refolMapRef/div /template script setup import {ref, onMounted} from vue import Map from ol/Map import View from ol/View import TileLayer from ol/layer/Tile import XYZ from ol/source/XYZ; import VectorLayer from ol/layer/Vector; import VectorSource from ol/source/Vector; import {GeoJSON} from ol/format; import gcoord from gcoord import {Circle as CircleStyle, Fill, Stroke, Style} from ol/style; // 百度坐标(BD09) → EPSG:4326 → WebMercator(EPSG:3857) // 第一步BD09 → EPSG:4326WGS84经纬度 const bd09ToEPSG4326 (coord) gcoord.transform(coord, gcoord.BD09, gcoord.EPSG4326) // 第二步EPSG:4326 → WebMercator(EPSG:3857) const EPSG4326ToEPSG3857 (coord) gcoord.transform(coord, gcoord.EPSG4326, gcoord.EPSG3857) const bd09ToMercator (coord) EPSG4326ToEPSG3857(bd09ToEPSG4326(coord)) const olMapRef ref(null) onMounted(() { const center bd09ToMercator([116.404, 39.915]) const map new Map({ target: olMapRef.value, layers: [ // 矢量底图 new TileLayer({ source: new XYZ({ url: https://t0.tianditu.gov.cn/vec_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERvecSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥, tileSize: 256, crossOrigin: anonymous }) }), // 矢量注记地名标注 new TileLayer({ source: new XYZ({ url: https://t0.tianditu.gov.cn/cia_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERciaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥, tileSize: 256, crossOrigin: anonymous }) }) ], view: new View({ center: center, // 北京市中心 zoom: 10, projection: EPSG:3857 }) }) let geoJsonData { type: FeatureCollection, features: [ { type: Feature, id: 1, properties: { name: , level: 10, zIndex: 200 }, geometry: { type: Point, coordinates: center } } ] } // 测试 [116.404, 39.915] 坐标是否准确 const layer new VectorLayer({ source: new VectorSource({ features: new GeoJSON({}).readFeatures(geoJsonData) }) }) layer.setStyle(new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ color: #ff0000 }), stroke: new Stroke({ color: #ff0000, width: 3 }) }), })) map.addLayer(layer) }) /script4.1 代码要点解析1. 坐标转换链路// BD09 → EPSG:4326 → EPSG:3857constbd09ToMercator(coord)EPSG4326ToEPSG3857(bd09ToEPSG4326(coord))天地图使用标准WGS84/EPSG:3857投影gcoord的转换在此链路上结果准确无需手写投影公式。2. 双图层叠加layers:[vecLayer,// 矢量底图道路、建筑等ciaLayer// 矢量注记地名、路名等]天地图将底图和注记分离需叠加加载才能看到完整效果。注记图层需放在底图之上。3. WMTS协议参数url:...?LAYERvecTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥天地图使用WMTS标准协议TILEMATRIX对应缩放级别TILEROW/TILECOL对应瓦片行列号。五、天地图 vs 高德 vs 百度对比总结对比项天地图高德地图百度地图坐标系WGS84 / EPSG:3857GCJ02BD09瓦片协议WMTSXYZXYZ自定义BD09转换链路BD09 → EPSG:4326 → EPSG:3857BD09 → GCJ02 → 手写EPSG:3857BD09 → BD09MC转换复杂度低标准投影中需手写投影高需封装自定义Sourcegcoord精度准确EPSG:3857转换不准确准确是否免费免费需密钥免费免费数据权威性国家测绘局官方商业数据商业数据5.1 选择建议政务/测绘项目优先使用天地图数据权威且免费百度坐标数据 天地图底图使用BD09 → EPSG:4326 → EPSG:3857链路高精度坐标需求天地图的WGS84/EPSG:3857标准投影转换精度最高六、天地图常用图层配置6.1 矢量地图推荐// 底图LAYERvecTILEMATRIXSETw// EPSG:3857矢量底图// 注记LAYERciaTILEMATRIXSETw// EPSG:3857矢量注记6.2 影像地图// 底图LAYERimgTILEMATRIXSETw// EPSG:3857影像底图// 注记LAYERctaTILEMATRIXSETw// EPSG:3857影像注记6.3 子域名负载均衡天地图提供8个子域名t0-t7可配置轮询分担请求压力newXYZ({url:https://t{0-7}.tianditu.gov.cn/vec_w/wmts?...,// OpenLayers 会自动在 {0-7} 中轮询选择子域名})七、常见问题与排查7.1 瓦片加载403错误原因tk密钥无效或未配置。解决方案在天地图开放平台注册账号创建应用获取开发者密钥将密钥填入URL的tk参数7.2 坐标偏移原因转换链路不完整直接使用了BD09 → EPSG:3857。// 错误跳过EPSG:4326中间态gcoord.transform([116.404,39.915],gcoord.BD09,gcoord.EPSG3857)// 正确完整链路 BD09 → EPSG:4326 → EPSG:3857constgcj02gcoord.transform([116.404,39.915],gcoord.BD09,gcoord.EPSG4326)constmercatorgcoord.transform(gcj02,gcoord.EPSG4326,gcoord.EPSG3857)7.3 地图只显示底图没有文字标注原因未加载注记图层。解决方案确保同时加载了vec底图和cia注记两个图层。7.4 HTTPS混合内容警告原因页面使用HTTPS但瓦片URL使用HTTP。解决方案将瓦片URL改为HTTPS协议// 使用 httpsurl:https://t0.tianditu.gov.cn/vec_w/wmts?...八、总结8.1 核心要点步骤说明1. 坐标转换链路BD09 → EPSG:4326 → EPSG:3857分两步执行2. 转换精度天地图使用标准投影gcoord转换结果准确3. 图层叠加底图vec 注记cia需分别加载4. WMTS协议使用标准WMTS参数注意tk密钥配置5. 坐标验证添加红色圆点验证底图与数据是否对齐8.2 坐标转换速查importgcoordfromgcoord// 百度经纬度 → 天地图EPSG:3857constbd09ToTdt(coord){constwgs84gcoord.transform(coord,gcoord.BD09,gcoord.EPSG4326)returngcoord.transform(wgs84,gcoord.EPSG4326,gcoord.EPSG3857)}// WGS84 → 天地图EPSG:3857constwgs84ToTdt(coord)gcoord.transform(coord,gcoord.EPSG4326,gcoord.EPSG3857)更新日期2026年8月调试版本OpenLayers 10.9.0 OpenLayers XYZ加载天地图EPSG:3857瓦片与BD09坐标转换实战（06）
天地图是由国家测绘地理信息局建设的国家地理信息公共服务平台提供免费的地图瓦片服务。本文基于实际项目代码详细讲解如何在Vue3 OpenLayers项目中加载天地图EPSG:3857瓦片并将百度BD09坐标正确投放到天地图底图上。一、天地图服务概述1.1 天地图简介天地图是国家测绘地理信息局建设的官方地图服务具有以下特点特性说明坐标系EPSG:4326WGS84经纬度/ EPSG:3857Web墨卡托瓦片协议WMTSWeb Map Tile Service使用费用免费需申请开发者密钥数据权威性国家测绘局官方数据1.2 天地图瓦片服务地址天地图提供两种投影的瓦片服务投影类型服务地址说明EPSG:4326http://t{0-7}.tianditu.gov.cn/vec_c/wmts?...经纬度投影EPSG:3857https://t{0-7}.tianditu.gov.cn/vec_w/wmts?...Web墨卡托投影本文使用的是EPSG:3857瓦片服务与OpenLayers默认投影一致。1.3 瓦片图层类型天地图将底图和注记分为独立图层需叠加加载图层代码说明URL参数vec矢量底图LAYERveccia矢量注记地名标注LAYERciaimg影像底图LAYERimgcta影像注记LAYERcta二、BD09坐标转换链路2.1 转换策略天地图EPSG:3857瓦片基于标准Web墨卡托投影不涉及GCJ02偏移。因此BD09坐标的转换链路为BD09百度经纬度→ EPSG:4326WGS84经纬度→ EPSG:3857Web墨卡托与高德瓦片的区别高德瓦片基于GCJ02坐标系需要经过GCJ02中间态天地图使用标准WGS84/EPSG:3857转换链路更直接。2.2 第一步BD09 → EPSG:4326百度坐标BD09是在GCJ02基础上进一步偏移的坐标系需要先转换为标准WGS84坐标importgcoordfromgcoord// BD09 → EPSG:4326WGS84经纬度constbd09ToEPSG4326(coord)gcoord.transform(coord,gcoord.BD09,gcoord.EPSG4326)2.3 第二步EPSG:4326 → EPSG:3857将WGS84经纬度转换为Web墨卡托投影坐标// EPSG:4326 → EPSG:3857Web墨卡托constEPSG4326ToEPSG3857(coord)gcoord.transform(coord,gcoord.EPSG4326,gcoord.EPSG3857)2.4 完整转换函数将两步转换组合为一个工具函数// BD09 → EPSG:4326 → EPSG:3857 完整链路constbd09ToMercator(coord)EPSG4326ToEPSG3857(bd09ToEPSG4326(coord))// 使用示例constcenterbd09ToMercator([116.404,39.915])// 结果: [12958175.xx, 4862293.xx]EPSG:3857墨卡托坐标单位米为什么这里gcoord.transform(coord, gcoord.EPSG4326, gcoord.EPSG3857)可以正常使用与高德瓦片场景不同天地图使用标准WGS84/EPSG:3857投影gcoord的EPSG:4326 → EPSG:3857转换是标准墨卡托投影计算不涉及GCJ02偏移因此转换结果准确。三、天地图WMTS瓦片加载3.1 WMTS协议参数说明天地图使用WMTSWeb Map Tile Service标准协议URL参数如下参数说明示例值SERVICE服务类型WMTSREQUEST请求类型GetTileVERSION协议版本1.0.0LAYER图层代码vec矢量底图STYLE渲染样式defaultTILEMATRIXSET瓦片矩阵集wEPSG:3857FORMAT瓦片格式tilesTILEMATRIX缩放级别{z}TILEROW瓦片行号{y}TILECOL瓦片列号{x}tk开发者密钥你的密钥重要tk参数是天地图的访问密钥需要在天地图开放平台注册并申请。3.2 加载天地图图层importTileLayerfromol/layer/TileimportXYZfromol/source/XYZ// 矢量底图图层constvecLayernewTileLayer({source:newXYZ({url:https://t0.tianditu.gov.cn/vec_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERvecSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥,tileSize:256,crossOrigin:anonymous})})// 矢量注记图层地名标注constciaLayernewTileLayer({source:newXYZ({url:https://t0.tianditu.gov.cn/cia_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERciaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥,tileSize:256,crossOrigin:anonymous})})3.3 底图 注记叠加天地图的底图和注记是分离的需要将两个图层叠加到地图上才能看到完整的地图效果constmapnewMap({target:map,layers:[vecLayer,// 底图在下ciaLayer// 注记在上],view:newView({center:[12958175,4862293],// 北京市中心EPSG:3857zoom:10,projection:EPSG:3857})})四、完整Vue3组件实现以下是基于项目ol-bd-tdtEPSG3857.vue的完整实现包含天地图底图加载和BD09坐标验证template div classwh100 refolMapRef/div /template script setup import {ref, onMounted} from vue import Map from ol/Map import View from ol/View import TileLayer from ol/layer/Tile import XYZ from ol/source/XYZ; import VectorLayer from ol/layer/Vector; import VectorSource from ol/source/Vector; import {GeoJSON} from ol/format; import gcoord from gcoord import {Circle as CircleStyle, Fill, Stroke, Style} from ol/style; // 百度坐标(BD09) → EPSG:4326 → WebMercator(EPSG:3857) // 第一步BD09 → EPSG:4326WGS84经纬度 const bd09ToEPSG4326 (coord) gcoord.transform(coord, gcoord.BD09, gcoord.EPSG4326) // 第二步EPSG:4326 → WebMercator(EPSG:3857) const EPSG4326ToEPSG3857 (coord) gcoord.transform(coord, gcoord.EPSG4326, gcoord.EPSG3857) const bd09ToMercator (coord) EPSG4326ToEPSG3857(bd09ToEPSG4326(coord)) const olMapRef ref(null) onMounted(() { const center bd09ToMercator([116.404, 39.915]) const map new Map({ target: olMapRef.value, layers: [ // 矢量底图 new TileLayer({ source: new XYZ({ url: https://t0.tianditu.gov.cn/vec_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERvecSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥, tileSize: 256, crossOrigin: anonymous }) }), // 矢量注记地名标注 new TileLayer({ source: new XYZ({ url: https://t0.tianditu.gov.cn/cia_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERciaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥, tileSize: 256, crossOrigin: anonymous }) }) ], view: new View({ center: center, // 北京市中心 zoom: 10, projection: EPSG:3857 }) }) let geoJsonData { type: FeatureCollection, features: [ { type: Feature, id: 1, properties: { name: , level: 10, zIndex: 200 }, geometry: { type: Point, coordinates: center } } ] } // 测试 [116.404, 39.915] 坐标是否准确 const layer new VectorLayer({ source: new VectorSource({ features: new GeoJSON({}).readFeatures(geoJsonData) }) }) layer.setStyle(new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ color: #ff0000 }), stroke: new Stroke({ color: #ff0000, width: 3 }) }), })) map.addLayer(layer) }) /script4.1 代码要点解析1. 坐标转换链路// BD09 → EPSG:4326 → EPSG:3857constbd09ToMercator(coord)EPSG4326ToEPSG3857(bd09ToEPSG4326(coord))天地图使用标准WGS84/EPSG:3857投影gcoord的转换在此链路上结果准确无需手写投影公式。2. 双图层叠加layers:[vecLayer,// 矢量底图道路、建筑等ciaLayer// 矢量注记地名、路名等]天地图将底图和注记分离需叠加加载才能看到完整效果。注记图层需放在底图之上。3. WMTS协议参数url:...?LAYERvecTILEMATRIX{z}TILEROW{y}TILECOL{x}tk你的密钥天地图使用WMTS标准协议TILEMATRIX对应缩放级别TILEROW/TILECOL对应瓦片行列号。五、天地图 vs 高德 vs 百度对比总结对比项天地图高德地图百度地图坐标系WGS84 / EPSG:3857GCJ02BD09瓦片协议WMTSXYZXYZ自定义BD09转换链路BD09 → EPSG:4326 → EPSG:3857BD09 → GCJ02 → 手写EPSG:3857BD09 → BD09MC转换复杂度低标准投影中需手写投影高需封装自定义Sourcegcoord精度准确EPSG:3857转换不准确准确是否免费免费需密钥免费免费数据权威性国家测绘局官方商业数据商业数据5.1 选择建议政务/测绘项目优先使用天地图数据权威且免费百度坐标数据 天地图底图使用BD09 → EPSG:4326 → EPSG:3857链路高精度坐标需求天地图的WGS84/EPSG:3857标准投影转换精度最高六、天地图常用图层配置6.1 矢量地图推荐// 底图LAYERvecTILEMATRIXSETw// EPSG:3857矢量底图// 注记LAYERciaTILEMATRIXSETw// EPSG:3857矢量注记6.2 影像地图// 底图LAYERimgTILEMATRIXSETw// EPSG:3857影像底图// 注记LAYERctaTILEMATRIXSETw// EPSG:3857影像注记6.3 子域名负载均衡天地图提供8个子域名t0-t7可配置轮询分担请求压力newXYZ({url:https://t{0-7}.tianditu.gov.cn/vec_w/wmts?...,// OpenLayers 会自动在 {0-7} 中轮询选择子域名})七、常见问题与排查7.1 瓦片加载403错误原因tk密钥无效或未配置。解决方案在天地图开放平台注册账号创建应用获取开发者密钥将密钥填入URL的tk参数7.2 坐标偏移原因转换链路不完整直接使用了BD09 → EPSG:3857。// 错误跳过EPSG:4326中间态gcoord.transform([116.404,39.915],gcoord.BD09,gcoord.EPSG3857)// 正确完整链路 BD09 → EPSG:4326 → EPSG:3857constgcj02gcoord.transform([116.404,39.915],gcoord.BD09,gcoord.EPSG4326)constmercatorgcoord.transform(gcj02,gcoord.EPSG4326,gcoord.EPSG3857)7.3 地图只显示底图没有文字标注原因未加载注记图层。解决方案确保同时加载了vec底图和cia注记两个图层。7.4 HTTPS混合内容警告原因页面使用HTTPS但瓦片URL使用HTTP。解决方案将瓦片URL改为HTTPS协议// 使用 httpsurl:https://t0.tianditu.gov.cn/vec_w/wmts?...八、总结8.1 核心要点步骤说明1. 坐标转换链路BD09 → EPSG:4326 → EPSG:3857分两步执行2. 转换精度天地图使用标准投影gcoord转换结果准确3. 图层叠加底图vec 注记cia需分别加载4. WMTS协议使用标准WMTS参数注意tk密钥配置5. 坐标验证添加红色圆点验证底图与数据是否对齐8.2 坐标转换速查importgcoordfromgcoord// 百度经纬度 → 天地图EPSG:3857constbd09ToTdt(coord){constwgs84gcoord.transform(coord,gcoord.BD09,gcoord.EPSG4326)returngcoord.transform(wgs84,gcoord.EPSG4326,gcoord.EPSG3857)}// WGS84 → 天地图EPSG:3857constwgs84ToTdt(coord)gcoord.transform(coord,gcoord.EPSG4326,gcoord.EPSG3857)更新日期2026年8月调试版本OpenLayers 10.9.0