使用 WMS 与 TMS 服务

WMS是web map service的缩写，是专业的GIS软件发布地图的一种流行方式（非GIS人员很少使用）。

TMS代表tiled map service（瓦片地图服务）。

Leaflet的WMS

当有人发布WMS服务时，最有可能的就是链接到GetCapabilities文档。在本教程中，我们将使用来自GeoServer的演示地图服务，网址是https://demo.boundlessgeo.com/geoserver/web/。我们将使用GeoServer的演示地图服务，在https://demo.boundlessgeo.com/geoserver/web/。正如您在该页面中看到的，“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服务器中的可用图层的信息:

Discovering WMS layers with QGIS

我们可以看到，OpenGeo用一个带有基础地图的名为ne:ne的WMS图层来演示WMS。让我们看看它的样子:

var wmsLayer = L.tileLayer.wms('http://webgis.cn/cgi-bin/mapserv?map=/owg/mfb3.map&', {
        layers: 'states',
        format: 'image/png',
        transparent: true,
    }).addTo(map);

        

注意上面使用的 Mapfile ，需要定义输出投影为 EPSG:3857。

还有一点要注意，如果没有正确配置好 Mapfile，有可能会出现 MapServer 地图（缺省情况下的完整地图）作为切片形成覆盖的情况。

查看本实例

或者我们可以试试nasa:bluemarble的WMS图层:

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
    layers: 'nasa:bluemarble'
}).addTo(map);

        

查看本实例

layers选项是用用逗号分隔的层列表。如果WMS服务定义了多个层，那么地图就可以同时引入多个层创建图像。

比如在我们正使用的这个WMS服务器上，有一个 ne:ne_10m_admin_0_countries图层显示国家陆地和国家名称，还有一个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服务器决定如何组合图像。在第二种情况下,会发出两个图像请求，然后由网页浏览器中运行的Leaflet代码决定如何组合图像。

如果我们将这些与层控件相结合，那么我们可以创建一个简单的地图来查看差异:

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);

        

更改为“Countries, then boundaries”选项，这样您就可以看到陆地的边界线，而且WMS服务器足够聪明，可以在地图上显示建筑标签。当请求多个图层时，如何组合图层取决于WMS服务器。

查看本实例

WMS服务的GIS用户须知

从GIS的角度来看，Leaflet的WMS处理是非常基本的。它不支持GetCapabilities，不支持legend，也不支持GetFeatureInfo。

我们可以在Leaflet’s API documentation文档中找到L.TileLayer.WMS的额外选项。任何选项都可以通过getImage的链接传递给WMS服务器。

还要注意，Leaflet支持的坐标系非常少:CRS:3857, CRS:3395 以及CRS:4326 (请参阅L.CRS文档)。如果您的WMS服务无法在这些坐标系中提供图像，那么您可能需要在Leaflet中使用Proj4Leaflet创建其它的坐标系。除此之外，在初始化你的地图时要使用正确的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);

        

查看本实例

Leaflet的TMS

虽然Leaflet没有明确支持TMS服务，但是tile的命名规则与L.TileLayer的命名规则非常相似，所以TMS服务在此不作赘述。

使用相同的OpenGeo WMS/TMS服务器演示，我们可以看到一个TMS端点：

https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0

检查MapCache help about TMS 和 TMS specification ，您可以看到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
});

        

查看本实例

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的方式提供精准的服务。

初次使用LeafletJS

自定义图标

使用 GeoJSON

交互式多度分色图

图层组与图层控制

缩放级别

使用 WMS 与 TMS 服务

使用地图窗格

约束缩放

WMS

TileJSON

使用 WMS 与 TMS 服务

Leaflet的WMS

WMS服务的GIS用户须知

Leaflet的TMS