地图组件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()),//获取左下角经纬度
		    ne = map.unproject(bounds.getTopRight()),//获取右上角经纬度 

				zoom = map.getZoom(),
		    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);//将经纬度进行投影
		    	var nePoint = map.project(ne);
		    
		    bounds = L.bounds(swPoint,nePoint);
		}

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

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