使用OpenLayer加载百度地图（无偏移） |
您所在的位置：网站首页 › 加载百度地图导航 › 使用OpenLayer加载百度地图（无偏移） |
使用OpenLayer加载百度地图（无偏移）
|
本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美无偏移加载百度离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip 。
使用OpenLayer加载百度地图离线瓦片地图 任意新建空目录命名为geTileMap；解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTileMap目录；geTileMap目录下新建tiles空目录，并复制之前下载的12~18级演示瓦片至tiles目录；最后新建名为index.html文件。 完成上述操作后，目录结构如下：
打开index.html输入如下源码： Openlayer Tile Map /*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。 网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。 事实上这是错误的，因此无法做到无偏移加载。 百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。 百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。*/ var projBD09 = new ol.proj.Projection({ code: 'BD:09', extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17], units: 'm', axisOrientation: 'neu', global: false }); ol.proj.addProjection(projBD09); ol.proj.addCoordinateTransforms("EPSG:4326", "BD:09", function (coordinate) { return lngLatToMercator(coordinate); }, function (coordinate) { return mercatorToLngLat(coordinate); } ); /*定义百度地图分辨率与瓦片网格*/ var resolutions = []; for (var i = 0; i T) { cM -= T - cL } while(cM < cL) { cM += T - cL } return cM } function convertor(cM, cN) { if(!cM || !cN) { return } var T = cN[0] + cN[1] * Math.abs(cM.lng); var cL = Math.abs(cM.lat) / cN[9]; var cO = cN[2] + cN[3] * cL + cN[4] * cL * cL + cN[5] * cL * cL * cL + cN[6] * cL * cL * cL * cL + cN[7] * cL * cL * cL * cL * cL + cN[8] * cL * cL * cL * cL * cL * cL; T *= (cM.lng < 0 ? -1 : 1); cO *= (cM.lat < 0 ? -1 : 1); return new cd(T, cO) } function cd(T, cL) { if(isNaN(T)) { T = bV(T); T = isNaN(T) ? 0 : T } if(b3(T)) { T = parseFloat(T) } if(isNaN(cL)) { cL = bV(cL); cL = isNaN(cL) ? 0 : cL } if(b3(cL)) { cL = parseFloat(cL) } this.lng = T; this.lat = cL } cd.isInRange = function(T) { return T && T.lng = -180 && T.lat = -74 }; cd.prototype.equals = function(T) { return T && lat == T.lat && lng == T.lng }; function bV(cN) { var cL = ""; var cU, cS, cQ = ""; var cT, cR, cP, cO = ""; var cM = 0; var T = /[^A-Za-z0-9\+\/\=]/g; if(!cN || T.exec(cN)) { return cN } cN = cN.replace(/[^A-Za-z0-9\+\/\=]/g, ""); do { cT = cf.indexOf(cN.charAt(cM++)); cR = cf.indexOf(cN.charAt(cM++)); cP = cf.indexOf(cN.charAt(cM++)); cO = cf.indexOf(cN.charAt(cM++)); cU = (cT > 4); cS = ((cR & 15) > 2); cQ = ((cP & 3) |
【本文地址】
今日新闻 |
推荐新闻 |