地图组件Leaflet地图偏移问题

Leaflet的好处就不多说了，简单的几点：轻量、支持HTML5、插件多，在与图形组件（如HT组件）结合后，可以开发出丰富的GIS应用，可以说几乎所有的GIS场景都能支持。

在使用GIS的时候，想必有个问题一直困扰开发者，就是我们的底图基本上都是有偏移的，如果使用GPS采集的资源（真实经纬度）叠加到底图上，与底图有很大的偏移，叠加不上。从测试上来说，高德的底图，偏差可达到20公里。

处理偏移问题，一般有两个思路：

第一个是将真实的经纬度按照偏移算法（一般底图供应商会提供）偏移到加密的地图上，从而达到叠加效果。这样的问题是相当于将错就错，如果从地图上去采集经纬度就是偏移的，最后还得纠偏回去。而纠偏又是一个大问题，几乎所有的底图供应商都不提供纠偏算法，单单这个问题，都可以再写一篇文章。

第二个是改造地图组件，将底图进行反向偏移，这样GPS采集的经纬度可以无缝的叠加上，在地图上采集的经纬度都是无需纠偏的。进行底图偏移的前提是，需要知道偏移量offset，如果是线性偏移，这个offset就是个常量，如果不是线性偏移，则这个offset是依赖于视窗中心点的变量。

笔者查看Leaflet的源码，其中并没有对偏移的处理方法，在阅读源码并经过反复测试后，获得了以下的思路：

1.在获取切片的时候，计算切片X,Y值的时候增加上偏移量;

var map = this._map,    bounds = map.getPixelBounds(),    sw = map.unproject(bounds.getBottomLeft()),<span style="font-family: Arial, Helvetica, sans-serif;">//获取左下角经纬度</span>    ne = map.unproject(bounds.getTopRight()),<span style="font-family: Arial, Helvetica, sans-serif;">//获取右上角经纬度</span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"></span>zoom = map.getZoom(),</span>    tileSize = this._getTileSize();if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {return;}var offsetX = this._offsetX;//经度偏移量var offsetY = this._offsetY;//纬度偏移量if(offsetX != null  && offsetY != null){sw = new L.LatLng(sw.lat - parseFloat(offsetY),sw.lng - parseFloat(offsetX));//增加偏移量ne = new L.LatLng(ne.lat - parseFloat(offsetY),ne.lng - parseFloat(offsetX));var swPoint = map.project(sw);//将经纬度进行投影    <span style="white-space:pre"></span>var nePoint = map.project(ne);        bounds = L.bounds(swPoint,nePoint);}

2.在显示图片的时候，图片位置减去偏移量；

<span style="white-space:pre"></span>var offsetX = this._offsetX;var offsetY = this._offsetY;if(offsetX != null  && offsetY != null){var latLng = this._map.layerPointToLatLng(tilePos);tilePos = this._map.latLngToLayerPoint(new L.LatLng(latLng.lat + parseFloat(offsetY),latLng.lng + parseFloat(offsetX)));}