本文主要是介绍地图组件Leaflet地图偏移问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
转自：http://blog.csdn.net/liufeng0209/article/details/41896935
Leaflet的好处就不多说了，简单的几点：轻量、支持HTML5、插件多，在与图形组件（如HT组件）结合后，可以开发出丰富的GIS应用，可以说几乎所有的GIS场景都能支持。
在使用GIS的时候，想必有个问题一直困扰开发者，就是我们的底图基本上都是有偏移的，如果使用GPS采集的资源（真实经纬度）叠加到底图上，与底图有很大的偏移，叠加不上。从测试上来说，高德的底图，偏差可达到20公里。
处理偏移问题，一般有两个思路：
第一个是将真实的经纬度按照偏移算法（一般底图供应商会提供）偏移到加密的地图上，从而达到叠加效果。这样的问题是相当于将错就错，如果从地图上去采集经纬度就是偏移的，最后还得纠偏回去。而纠偏又是一个大问题，几乎所有的底图供应商都不提供纠偏算法，单单这个问题，都可以再写一篇文章。
第二个是改造地图组件，将底图进行反向偏移，这样GPS采集的经纬度可以无缝的叠加上，在地图上采集的经纬度都是无需纠偏的。进行底图偏移的前提是，需要知道偏移量offset，如果是线性偏移，这个offset就是个常量，如果不是线性偏移，则这个offset是依赖于视窗中心点的变量。
笔者查看Leaflet的源码，其中并没有对偏移的处理方法，在阅读源码并经过反复测试后，获得了以下的思路：
1.在获取切片的时候，计算切片X,Y值的时候增加上偏移量;
_update: function () {//hqj增加偏移支持 startif (!this._map) { return; }var map = this._map,bounds = map.getPixelBounds(),zoom = map.getZoom(),tileSize = this._getTileSize(),sw = map.unproject(bounds.getBottomLeft()),//获取左下角经纬度ne = map.unproject(bounds.getTopRight());//获取右上角经纬度if (zoom > this.options.maxZoom || zoom < this.options.minZoom) { return; } var offsetX = this.options.offsetX;//经度偏移量 var offsetY = this.options.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); } var tileBounds = L.bounds(bounds.min.divideBy(tileSize)._floor(),bounds.max.divideBy(tileSize)._floor());this._addTilesFromCenterOut(tileBounds);if (this.options.unloadInvisibleTiles || this.options.reuseTiles) {this._removeOtherTiles(tileBounds);}//hqj增加偏移支持 end/*if (!this._map) { return; }var map = this._map,bounds = map.getPixelBounds(),zoom = map.getZoom(),tileSize = this._getTileSize();if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {return;} var tileBounds = L.bounds(bounds.min.divideBy(tileSize)._floor(),bounds.max.divideBy(tileSize)._floor());this._addTilesFromCenterOut(tileBounds);if (this.options.unloadInvisibleTiles || this.options.reuseTiles) {this._removeOtherTiles(tileBounds);}*/},2.在显示图片的时候，图片位置减去偏移量；
_addTile: function (tilePoint, container) {var tilePos = this._getTilePos(tilePoint);//hqj增加偏移支持 startvar offsetX = this.options.offsetX; var offsetY = this.options.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))); } //hqj增加偏移支持 end// get unused tile - or create a new tilevar tile = this._getTile();/*Chrome 20 layouts much faster with top/left (verify with timeline, frames)Android 4 browser has display issues with top/left and requires transform instead(other browsers don't currently care) - see debug/hacks/jitter.html for an example*/L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome);this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;this._loadTile(tile, tilePoint);if (tile.parentNode !== this._tileContainer) {container.appendChild(tile);}},这篇关于地图组件Leaflet地图偏移问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
