OpenLayers 与 Leaflet 加载天地图全系图层（矢量/影像/地形+底图/注记）——原理与实战

摘要天地图作为国家地理信息公共服务平台提供标准的WMTS​ 瓦片服务。本文将深入解析天地图的双投影体系与图层分层设计原理并分别给出OpenLayersXYZ/WMTS方式​ 与Leaflet​ 加载矢量底图、矢量注记、影像底图、影像注记、地形晕渲及地形注记的完整可运行代码附带坐标系匹配、Key配置、注记叠加顺序等核心避坑指南。一、天地图服务原理与图层体系解析1.1 WMTS 服务与分层设计原理天地图遵循OGC WMTSWeb Map Tile Service​ 标准预先将地图切割为 256×256 像素的栅格瓦片。其核心设计特点是底图与注记分离底图图层承载几何图形道路、建筑、影像纹理如vec矢量、img影像、ter地形晕渲。注记图层透明背景的文字标注地名、路名、POI如cva、cia、cta。叠加逻辑注记图层必须具有透明度PNG格式且在渲染顺序上始终置于底图之上否则文字会被底图遮盖。1.2 双投影体系核心坑点天地图 URL 中的后缀决定了坐标系前端 View/CRS 必须严格匹配_w后缀Web 墨卡托 EPSG:3857正方形投影与 Google Maps、OSM、OpenLayers 默认投影一致适合 Web 端展示。_c后缀经纬度 EPSG:4326单位为中文度适合 GPS/CGCS2000 数据直接匹配。⚠️严禁混用EPSG:3857 的 View 不能加载_c的瓦片否则会出现严重偏移。1.3 常用图层类型对照表以墨卡托_w为例地图类型底图 Layer 标识注记 Layer 标识适用场景矢量地图​vec_wcva_w电子导航、行政边界展示影像地图​img_wcia_w卫星影像分析、实景底图地形晕渲​ter_wcta_w地势分析、三维地形可视化服务地址模板https://t{0-7}.tianditu.gov.cn/{layer_type}/wmts? SERVICEWMTSREQUESTGetTileVERSION1.0.0 LAYER{layer}STYLEdefaultTILEMATRIXSETw FORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk{您的Key}t0-t7天地图二级域名用于并发负载均衡。TILEMATRIXSETw对应 EPSG:3857 切片矩阵集。二、OpenLayers 加载天地图全系图层实战OpenLayers 推荐使用ol/source/XYZ​ 方式加载天地图比原生 WMTS 配置更简单内部自动处理分辨率矩阵也可使用TileWMTS。2.1 环境引入link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/olv7.4.0/ol.css / script srchttps://cdn.jsdelivr.net/npm/olv7.4.0/dist/ol.js/script2.2 封装通用图层创建函数XYZ方式EPSG:3857const TDT_KEY 您申请的天地图Key; // 必填否则403 // 创建天地图XYZ图层 function createTDTLayer(layerType, proj EPSG:3857) { const matrixSet proj EPSG:3857 ? w : c; return new ol.layer.Tile({ source: new ol.source.XYZ({ url: https://t{0-7}.tianditu.gov.cn/${layerType}_${matrixSet}/wmts? SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYER${layerType} STYLEdefaultTILEMATRIXSET${matrixSet}FORMATtiles TILEMATRIX{z}TILEROW{y}TILECOL{x}tk${TDT_KEY}, projection: proj, wrapX: true }) }); }2.3 完整案例矢量注记 / 影像注记 / 地形注记 切换// 1. 矢量底图 矢量注记 const vecBase createTDTLayer(vec); const vecLabel createTDTLayer(cva); // 2. 影像底图 影像注记 const imgBase createTDTLayer(img); const imgLabel createTDTLayer(cia); // 3. 地形晕渲 地形注记 const terBase createTDTLayer(ter); const terLabel createTDTLayer(cta); // 初始化地图默认显示影像底图注记必须在底图之后addLayer const map new ol.Map({ target: map, layers: [imgBase, imgLabel], // 顺序先底图后注记 view: new ol.View({ center: ol.proj.fromLonLat([116.39, 39.9]), zoom: 10, projection: EPSG:3857 }) }); /* 切换示例切换到矢量地图 map.getLayers().clear(); map.addLayer(vecBase); map.addLayer(vecLabel); */原理补充OpenLayers 的TileGrid对天地图w矩阵集原点-20037508.34,20037508.34内置支持良好XYZ源的{z}{x}{y}会自动映射为 WMTS 的TileMatrix/TileCol/TileRow。三、Leaflet 加载天地图全系图层实战Leaflet 默认使用EPSG:3857L.CRS.EPSG3857加载_w系列图层最为便捷若加载_c必须显式声明crs: L.CRS.EPSG4326。3.1 环境引入link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script3.2 完整案例矢量/影像/地形及其注记const TDT_KEY 您申请的天地图Key; // 通用天地图瓦片层墨卡托_w function tdtLayer(layerType) { return L.tileLayer( https://t{s}.tianditu.gov.cn/${layerType}_w/wmts? SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYER${layerType} STYLEdefaultTILEMATRIXSETwFORMATtiles TILEMATRIX{z}TILEROW{y}TILECOL{x}tk${TDT_KEY}, { subdomains: [0,1,2,3,4,5,6,7], // 负载均衡 tileSize: 256, zoomOffset: 0, maxZoom: 18 } ); } // 创建图层组底图注记绑定在一起 const vecGroup L.layerGroup([tdtLayer(vec), tdtLayer(cva)]); const imgGroup L.layerGroup([tdtLayer(img), tdtLayer(cia)]); const terGroup L.layerGroup([tdtLayer(ter), tdtLayer(cta)]); // 初始化地图 const map L.map(map, { center: [39.9, 116.39], zoom: 10, crs: L.CRS.EPSG3857 // 默认即此显式写出便于维护 }); // 默认添加影像底图组 imgGroup.addTo(map);注意Leaflet 的{z}{x}{y}对应 WMTS 的TileMatrix/TileCol/TileRow且tileSize必须为256天地图不支持 512 瓦片。四、避坑总结高频报错排查403 Forbidden未携带tkKey或 Key 未生效申请后有 5~10 分钟延迟且需勾选“地图API”权限。瓦片错位/漂移OpenLayers View 设了EPSG:3857却用了vec_c的 URL应改为vec_w。Leaflet 未声明crs却加载了_c图层默认 3857 会算错行列号。注记消失注记层被底图层覆盖确保代码中先 add 底图再 add 注记或使用layerGroup管理顺序。边缘空白wrapX全球地图建议在 OpenLayersXYZ源中开启wrapX: trueLeaflet 默认支持横向循环。混合坐标偏移天地图是CGCS2000近似 WGS84若叠加高德/腾讯GCJ-02 火星坐标数据会产生几百米偏移需在前端做纠偏转换。五、小结天地图本质是WMTS 标准瓦片_w(3857) 与_c(4326)投影不可混用是第一位的原则。底图 注记​ 必须成对加载且注记在上才能看到完整的“有字的地图”。OpenLayers 用source.XYZ是最简洁稳定的方案Leaflet 用L.tileLayer拼 WMTS 模板即可覆盖矢量、影像、地形全系图层。生产环境务必处理好Key 的白名单​ 与t0-t7 子域负载均衡。参考文献天地图官方 WMTS 说明、OpenLayers 官方文档、SuperMap iClient 技术手册及主流 GIS 社区实战总结。