Leaflet WMS 实战指南使用 WMSTileLayer 加载 SRTM30-Colored-Hillshade 高程晕渲图层【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet导读本文以仓库中 wms-example2.md 演示页为切入点系统讲解 Leaflet 中WMSTileLayer的用法——从 WMS 服务的GetCapabilities文档、基础 URL 的构造到layers参数、多图层合成、坐标系选择等完整链路。读完本文你将掌握如何把任意标准 WMS 服务以 Mundialis 的 SRTM30 高程晕渲为例正确接入 Leaflet 地图并理解底层 WMS 请求是如何被组装出来的。示例页面到底做了什么wms-example2.md是官方教程体系中的一个 iframe 演示帧demo frame其完整代码只有十几行却涵盖了接入一个 WMS 服务的最小必要步骤import {LeafletMap, CRS, WMSTileLayer} from leaflet; const map new LeafletMap(map, { center: [-17, -67], zoom: 3 }); const wmsLayer new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: SRTM30-Colored-Hillshade }).addTo(map);这段代码透露出三个关键信息地图初始化center: [-17, -67]将视角对准南美洲安第斯山脉一带-17° 纬度、-67° 经度zoom: 3是低层级全球视野——恰好适合展示整片大陆的高程晕渲hillshade效果图层创建new WMSTileLayer(baseUrl, options)是加载 WMS 服务的唯一入口第一个参数是 WMS 服务的基础 URL第二个参数是该服务相关的 WMS 参数唯一必填参数layers: SRTM30-Colored-Hillshade这是 Mundialis 公开 WMS 服务中一个表示SRTM30 彩色高程晕渲的图层名。同样的代码模式也出现在系列演示页 wms-example1.md加载TOPO-OSM-WMS底图图层和 wms-example3.md多图层切换对比中差异仅仅在于layers参数的值与是否配合LayersControl使用。整个 WMS 主题的完整文字教程见 docs/examples/wms/index.md。WMS 是什么以及如何发现可用的图层WMSWeb Map Service网络地图服务是专业 GIS 软件发布地图的通用标准。它和普通瓦片tiles格式相似但更通用、也更不适合直接做 Web 地图性能优化WMS 图片由四个角点的坐标定义而不是由固定的z/x/y网格定义——这个根据坐标算图片范围的计算正是 Leaflet 在底层替你完成的。当你拿到一个 WMS 服务时发布方通常会给你一个GetCapabilities文档地址它用 XML 描述了这个服务提供哪些图层、支持哪些坐标系与图片格式。本文示例使用的 Mundialis 服务其 capabilities 文档为http://ows.mundialis.de/services/service?requestGetCapabilities需要特别指出Leaflet 不理解GetCapabilities文档。它不会自动解析 XML 去发现图层而是要求你把 WMS 的基础 URL 直接传给WMSTileLayer然后手动指定需要的 WMS 选项。基础 URL 就是去掉requestGetCapabilities参数之后的地址http://ows.mundialis.de/services/service?由于 capabilities 文档通常冗长难读官方教程建议借助 QGIS 之类的 GIS 桌面软件来浏览服务内可用的图层列表见 docs/examples/wms/qgis-wms-layers.png从而拿到准确的图层名例如TOPO-OSM-WMS、SRTM30-Colored-Hillshade等。WMSTileLayer 的构造与默认 WMS 参数从源码看WMSTileLayer继承自TileLayer见 src/layer/tile/WMSTileLayer.js它把按z/x/y取瓦片扩展成了按地理范围取图。构造时类会在静态初始化块中定义一套默认 WMS 参数defaultWmsParams源码 L33-L56参数默认值说明serviceWMSWMS 服务类型标识requestGetMap请求类型GetMap表示取地图图片layers必填逗号分隔的 WMS 图层名列表styles逗号分隔的 WMS 样式列表formatimage/jpeg图片格式需要透明背景时用image/pngtransparentfalse是否请求带透明通道的图片version1.1.1WMS 协议版本同时还有两个非 WMS 参数选项源码 L58-L67crs默认null即跟随地图的 CRS和uppercase默认false为true时所有 WMS 请求参数键会转为大写用于兼容某些要求大写参数的服务端。构造器initialize源码 L70-L89的组装逻辑非常巧妙先拷贝一份defaultWmsParams遍历传入的 options凡是原型链上没有定义的选项都当作 WMS 参数原样塞进请求——这意味着 Geoserver 等服务的非标准 vendor 参数可以直接透传根据detectRetina与当前是否视网膜屏自动计算width/height瓦片像素尺寸视网膜屏下翻倍确保请求图幅与瓦片尺寸一致。因此wms-example2.md中new WMSTileLayer(url, {layers: SRTM30-Colored-Hillshade})实际生成的请求参数是serviceWMSrequestGetMaplayersSRTM30-Colored-Hillshadeversion1.1.1formatimage/jpegwidth256height256srs...bbox...。layers 参数与多图层一次合成layers是逗号分隔的图层名列表。WMS 服务如果定义了多个图层一次GetMap请求可以同时引用多个。以示例服务为例TOPO-WMS是世界地形图OSM-Overlay-WMS是地名标注层。请求两个图层、让服务器把二者合成一张图const topographyAndPlaces new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: TOPO-WMS,OSM-Overlay-WMS }).addTo(map);这里需要注意一个容易混淆的概念Leaflet 里的layer与 WMS 服务里的layer完全不同。上面这种写法只向服务器发出一次图片请求由WMS 服务器端决定如何把两个图层叠绘例如把地名标注绘制在地形之上。而如果用两个WMSTileLayer分别加载TOPO-WMS与OSM-Overlay-WMS再同时 addTo 地图则是两次独立请求叠放顺序由浏览器端 Leaflet决定。两种方式的合成责任方截然不同。官方教程还给出了一个直观的对比实验配合图层控制控件LayersControl把四种组合——仅地形、仅地名、地形在上地名在下、地名在上地形在下——放进同一个切换面板见 wms-example3.mdconst basemaps { Topography: new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: TOPO-WMS }), Places: new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: OSM-Overlay-WMS }), Topography, then places: new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: TOPO-WMS,OSM-Overlay-WMS }), Places, then topography: new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: OSM-Overlay-WMS,TOPO-WMS }) }; new LayersControl(basemaps).addTo(map); basemaps.Topography.addTo(map);切换到Topography, then places后你会看到地名压在地形之上且 WMS 服务器足够智能能把建筑标签继续绘制在最上层——最终叠放效果完全由服务器决定。底层原理bbox 与 srs 是如何算出来的WMSTileLayer每次发请求时都根据当前视口动态计算范围参数。onAdd源码 L91-L100时确定坐标系并写入投影参数WMS 1.3 及以上用crs键1.1.x 用srs键值取自this.options.crs ?? map.options.crs图层自定义 CRS 优先否则跟随地图 CRS。getTileUrl源码 L102-L117中则完成范围换算把当前瓦片的西北/东南角坐标_tileCoordsToNwSe投影到 CRS 平面坐标组装 bboxWMS 1.3 且 CRS 为 EPSG4326 时按纬度在前min.y, min.x, max.y, max.x其余情况按经度在前min.x, min.y, max.x, max.y——这正是 1.1.1 与 1.3.0 协议对坐标轴顺序要求不同的经典坑点通过URLAPI 把wmsParams与bbox一并拼进 URL若开启uppercase则参数名全部大写。同时提供setParams(params, noRedraw)源码 L121-L130方法合并新参数后默认触发redraw()重新请求当前屏幕的瓦片传noRedraw: true可只更新参数不重绘适合先批量改参数再一次性刷新的场景。官方测试 WMSTileLayerSpec.js 也验证了构造后wmsParams应等于默认参数并附加width/height两个键。坐标系选择与 GIS 用户的注意事项Leaflet 内置的坐标系非常有限仅CRS:3857Web 墨卡托、CRS:3395墨卡托与CRS:4326经纬度。如果你的 WMS 服务不用这些坐标系出图则需要借助 Proj4Leaflet 之类的插件自定义 CRS否则只需在初始化地图时指定正确的 CRS之后添加的任何 WMS 图层都会自动沿用import {LeafletMap, EPSG4326, WMSTileLayer} from leaflet; const map new LeafletMap(map, { center: [0, 0], zoom: 1, crs: EPSG4326 }); const wmsLayer new WMSTileLayer(http://ows.mundialis.de/services/service?, { layers: TOPO-OSM-WMS }).addTo(map);完整可运行的坐标系示例见 wms-example-crs.md。此外从 GIS 视角看Leaflet 的 WMS 支持属于基础款没有GetCapabilities解析、没有图例legend支持、没有GetFeatureInfo查询。WMSTileLayer的完整选项清单以 API 文档为准见 docs/reference.html 中 TileLayer.WMS 一节任何文档未列出的自定义选项都会作为额外参数透传给 WMS 服务器——这一点在源码 L76-L80 的未知选项即 WMS 参数逻辑中得到了印证。从示例到实战接入自己的 WMS 服务的四步法综合 wms-example2.md 演示页、WMS 教程正文与 WMSTileLayer 源码接入任意标准 WMS 服务的流程可以归纳为四步拿到基础 URL向服务方索要GetCapabilities地址去掉requestGetCapabilities即为WMSTileLayer的第一个参数URL 末尾保留?不影响拼接确认图层名用 QGIS 等工具或直接读 capabilities XML找出目标图层名填入layers选项多图层用逗号连接由服务器合成确认坐标系检查服务支持的 CRS 是否落在 3857/3395/4326 内必要时用crs选项或地图级crs初始化对齐协议版本决定请求键是srs1.1.1还是crs1.3.0Leaflet 会按version参数自动处理按需调参需要透明背景就设format: image/png与transparent: true需要控制台调试可查看layer.wmsParams运行时换参数用setParams。掌握了这条链路SRTM30 高程晕渲只是起点——任何遵循 OGC WMS 标准的服务地形、气象、矢量瓦片式服务等都能用同样的方式接入 Leaflet。【免费下载链接】Leaflet JavaScript library for mobile-friendly interactive maps 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考