1.7. 将WMS与TMS服务一起使用¶
WMS是WMS的缩写 Web Map Service ，这是专业的地理信息系统软件发布地图的流行方式(非地理信息系统人员很少使用)。
TMS代表 切片地图服务 。
1.7.1. Leaflet中的WMS¶
当某人发布WMS服务时，最有可能的链接是指向 GetCapabilities 文件。在本教程中，我们将使用位于https://demo.boundlessgeo.com/geoserver/web/.的Geoserver的演示地图服务我们将在https://demo.boundlessgeo.com/geoserver/web/.上使用Geoserver的演示地图服务正如在此页面上看到的，“wms”链接到以下URL：
https://demo.boundlessgeo.com/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities
Leaflet无法解析WMS的 GetCapabilities 文件。因此必须创建 L.TileLayer.WMS 层，用于提供基本的WMS链接并指定所需的任何WMS选项。
基本的WMS链接只是 GetCapabilities 不带参数的链接，例如：
https://demo.boundlessgeo.com/geoserver/ows?
在Leaflet的地图上使用这一点的方法很简单：
var map = L.map(mapDiv, mapOptions);
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', wmsOptions).addTo(map);
L.TileLayer.WMS 的一个实例至少需要一个选项： layers 。请注意，Leaflet中的“层”概念与WMS中的“层”概念不同！
WMS服务器将定义 一组图层 在 GetCapabilities XML文档，但该文档大多较长且难于理解，因此通常像QGIS一样使用。用于查看WMS服务器中可用层信息的软件：
我们可以看到OpenGeo使用名为的WMS图层演示了WMS ne:ne 有一张底图。让我们来具体看一下：
var wmsLayer = L.tileLayer.wms('http://webgis.osgeo.cn/cgi-bin/mapserv?map=/owg/mfb3.map&', {
layers: 'states',
format: 'image/png',
transparent: true,
}).addTo(map);
请注意，上面使用的 Mapfile 需要将输出投影定义为 EPSG:3857 。
还需要注意的是，如果没有正确配置Mapfile，则可能会将MapServer 地图(默认情况下为完整映射)用作切片以形成覆盖。
| Show the example |
或者可以尝试WMS层 nasa:bluemarble ：
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble'
}).addTo(map);
| Show the example |
layers 选项是逗号分隔的层列表。如果WMS服务定义了多个层，则地图可以引入多个层来同时创建图像。
例如，在使用的WMS服务器上，有一个 ne:ne_10m_admin_0_countries Layer显示国家的陆地和国家名称。还有一个 ne:ne_10m_admin_0_boundary_lines_land 图层显示国家/地区边界。如果我们同时请求两个层，WMS服务器会将两个层合并为一个图像，并用逗号分隔它们：
var countriesAndBoundaries = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}).addTo(map);
请注意，这将从WMS服务器请求不同于 L.TileLayer.WMS 为国家和国家边界创建，这两个都将添加到地图中。在第一种情况下，发出图像请求，WMS服务器决定如何组合图像。在第二种情况下，发出两个图像请求，在Web浏览器中运行的Leaflet代码确定如何组合图像。
如果将这些与Layer控件相结合，可创建一个简单的地图来查看差异：
var basemaps = {
Countries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries'
}),
Boundaries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land'
}),
'Countries, then boundaries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}),
'Boundaries, then countries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
})
};
L.control.layers(basemaps).addTo(map);
basemaps.Countries.addTo(map);
更改为“国家，然后是边界选项，这样您就可以看到土地的边界，并且WMS服务器足够智能，可以在地图上显示建筑标签。当请求多个层时，如何合并这些层取决于WMS服务器。
| Show the example |
1.7.2. 面向WMS服务的GIS用户的信息¶
从地理信息系统的角度来看，Leaflet的WMS处理是非常基本的。它不支持 GetCapabilities 、图例，也不支持 GetFeatureInfo 。
可在文档文档中找到Leaflet的API中执行此操作 L.TileLayer.WMS 。任何选项都可以通过链接传递到WMS服务器 getImage 。
另请注意，Leaflet支持的坐标系很少： CRS:3857 ， CRS:3395 和 CRS:4326 (请参阅 L.CRS 文档)。如果WMS服务无法在这些坐标系中提供图像，可能需要使用Proj4Leaflet在Leaflet中创建其他坐标系。此外，要在初始化地图时使用正确的CRS，请将其添加到任何WMS图层：
var map = L.map('map', {
crs: L.CRS.EPSG4326
});
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble'
}).addTo(map);
| Show the example |
1.7.3. Leaflet中的TMS¶
尽管Leaflet不明确支持TMS服务，但切片的命名规则与的命名规则非常相似 L.TileLayer ，因此TMS服务将不在此描述。
使用相同的OpenGeo WMS/TMS服务器演示，可看到TMS端点：
https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0
查看有关TMS及其规范的MapCache帮助，可看到TMS中地图切片的链接，如下所示：
http://base_url/tms/1.0.0/{tileset}/{z}/{x}/{y}.png
使用OpenGeo的TMS服务作为 L.TileLayer ，可以查看函数文档以了解哪些 tileset 是可用的，并建立了基本链接：
https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png
https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg
使用 tms:true 选项实例化一个层，如下所示：
var tms_ne = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
tms: true
}).addTo(map);
var tms_bluemarble = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
tms: true
});
| Show the example |
Leaflet 1.0 的一个新功能是能够使用 {-y} 而不是 tms: true 选项，例如：
var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');
tms: true 备选方案(Leaflet 0.7)或 {-y} (Leaflet 1.0)是必要的， L.TileLayer 通常位于左上角，因此Y坐标较低。在TMS中，坐标原点位于左下角，因此Y坐标 提高 。
除了 y 对于坐标的差异和切片的发现之外，TMS服务还以 L.TileLayer 的形式提供准确的服务。