leaflet 加载ogc标准wms服务源码解析

最近研究ogc标准地图服务在leaflet/Openlayers两大开源平台上如何加载，记录一点心得

leaflet加载wms服务

1. 使用leaflet自带的类L.tileLayer.wms只需设置正确的url以及layers就可以轻松加载wms服务。

  L.tileLayer.wms("localhost:8090/iserver/services/map-GS_CSWorkspace-2/wms130", {
    layers: 'GS_DMA',
    format: 'image/png',
    transparent: true,
    noWrap: true
  }).addTo(map);

2. 通过源码以及服务加载表现可以看到，wms的出图是根据传参bbox给服务，服务对应返回该范围的瓦片。

  getTileUrl: function (coords) {
      var tileBounds = this._tileCoordsToNwSe(coords),
          crs = this._crs,
          bounds = toBounds(crs.project(tileBounds[0]), crs.project(tileBounds[1])),
          min = bounds.min,
          max = bounds.max,
          bbox = (this._wmsVersion >= 1.3 && this._crs === EPSG4326 ?
          [min.y, min.x, max.y, max.x] :
          [min.x, min.y, max.x, max.y]).join(','),
          url = TileLayer.prototype.getTileUrl.call(this, coords);
      return url +
          getParamString(this.wmsParams, url, this.options.uppercase) +
          (this.options.uppercase ? '&BBOX=' : '&bbox=') + bbox;
  },

我们可以看到这段leaflet源码，重写了tileLayer中的getTileUrl方法，并在每块瓦片加载时调用。这里做了几个事情：

1. 获取当前瓦片的地理坐标系范围
2. 换算地理坐标系范围为crs坐标系范围
3. 将当前投影坐标系crs作为参数传给服务
4. 将投影坐标系范围作为参数传给服务 这样就成功实现了得到每块瓦片并呈现在浏览器中