OpenLayers调用百度地图
Posted youzi-xuchongyou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了OpenLayers调用百度地图相关的知识，希望对你有一定的参考价值。
背景
上周接到一个任务，将自己拍的影像叠加到百度地图上。
解决思路
openlayers调用百度地图要解决坐标偏移问题，所以要先定义百度坐标系，然后添加到openlayers默认的“EPSG:3857”坐标系。
步骤
定义百度墨卡托坐标，是有人写好的js文件，算法挺复杂，不是一般人能理解的，直接用就好了。
baidu.js文件如下：
1 var forEachPoint = function(func) { 2 return function(input, opt_output, opt_dimension) { 3 var len = input.length; 4 var dimension = opt_dimension ? opt_dimension : 2; 5 var output; 6 if (opt_output) { 7 output = opt_output; 8 } else { 9 if (dimension !== 2) { 10 output = input.slice(); 11 } else { 12 output = new Array(len); 13 } 14 } 15 for (var offset = 0; offset < len; offset += dimension) { 16 func(input, output, offset) 17 } 18 return output; 19 20 }; 21 }; 22 23 var sphericalMercator = {} 24 25 var RADIUS = 6378137; 26 var MAX_LATITUDE = 85.0511287798; 27 var RAD_PER_DEG = Math.PI / 180; 28 29 sphericalMercator.forward = forEachPoint(function(input, output, offset) { 30 var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE); 31 var sin = Math.sin(lat * RAD_PER_DEG); 32 33 output[offset] = RADIUS * input[offset] * RAD_PER_DEG; 34 output[offset + 1] = RADIUS * Math.log((1 + sin) / (1 - sin)) / 2; 35 }); 36 37 sphericalMercator.inverse = forEachPoint(function(input, output, offset) { 38 output[offset] = input[offset] / RADIUS / RAD_PER_DEG; 39 output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - (Math.PI / 2)) / RAD_PER_DEG; 40 }); 41 42 43 var baiduMercator = {} 44 45 var MCBAND = [12890594.86, 8362377.87, 46 5591021, 3481989.83, 1678043.12, 0]; 47 48 var LLBAND = [75, 60, 45, 30, 15, 0]; 49 50 var MC2LL = [ 51 [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 52 200.9824383106796, -187.2403703815547, 91.6087516669843, 53 -23.38765649603339, 2.57121317296198, -0.03801003308653, 54 17337981.2], 55 [-7.435856389565537e-9, 0.000008983055097726239, 56 -0.78625201886289, 96.32687599759846, -1.85204757529826, 57 -59.36935905485877, 47.40033549296737, -16.50741931063887, 58 2.28786674699375, 10260144.86], 59 [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 60 59.74293618442277, 7.357984074871, -25.38371002664745, 61 13.45380521110908, -3.29883767235584, 0.32710905363475, 62 6856817.37], 63 [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 64 40.31678527705744, 0.65659298677277, -4.44255534477492, 65 0.85341911805263, 0.12923347998204, -0.04625736007561, 66 4482777.06], 67 [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 68 23.10934304144901, -0.00023663490511, -0.6321817810242, 69 -0.00663494467273, 0.03430082397953, -0.00466043876332, 70 2555164.4], 71 [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 72 7.47137025468032, -0.00000353937994, -0.02145144861037, 73 -0.00001234426596, 0.00010322952773, -0.00000323890364, 74 826088.5]]; 75 76 var LL2MC = [ 77 [-0.0015702102444, 111320.7020616939, 1704480524535203, 78 -10338987376042340, 26112667856603880, 79 -35149669176653700, 26595700718403920, 80 -10725012454188240, 1800819912950474, 82.5], 81 [0.0008277824516172526, 111320.7020463578, 647795574.6671607, 82 -4082003173.641316, 10774905663.51142, -15171875531.51559, 83 12053065338.62167, -5124939663.577472, 913311935.9512032, 84 67.5], 85 [0.00337398766765, 111320.7020202162, 4481351.045890365, 86 -23393751.19931662, 79682215.47186455, -115964993.2797253, 87 97236711.15602145, -43661946.33752821, 8477230.501135234, 88 52.5], 89 [0.00220636496208, 111320.7020209128, 51751.86112841131, 90 3796837.749470245, 992013.7397791013, -1221952.21711287, 91 1340652.697009075, -620943.6990984312, 144416.9293806241, 92 37.5], 93 [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 94 2485758.690035394, 6070.750963243378, 54821.18345352118, 95 9540.606633304236, -2710.55326746645, 1405.483844121726, 96 22.5], 97 [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 98 823725.6402795718, 0.46104986909093, 2351.343141331292, 99 1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]]; 100 101 102 function getRange(v, min, max) { 103 v = Math.max(v, min); 104 v = Math.min(v, max); 105 106 return v; 107 } 108 109 function getLoop(v, min, max) { 110 var d = max - min; 111 while (v > max) { 112 v -= d; 113 } 114 while (v < min) { 115 v += d; 116 } 117 118 return v; 119 } 120 121 function convertor(input, output, offset, table) { 122 var px = input[offset]; 123 var py = input[offset + 1]; 124 var x = table[0] + table[1] * Math.abs(px); 125 var d = Math.abs(py) / table[9]; 126 var y = table[2] 127 + table[3] 128 * d 129 + table[4] 130 * d 131 * d 132 + table[5] 133 * d 134 * d 135 * d 136 + table[6] 137 * d 138 * d 139 * d 140 * d 141 + table[7] 142 * d 143 * d 144 * d 145 * d 146 * d 147 + table[8] 148 * d 149 * d 150 * d 151 * d 152 * d 153 * d; 154 155 output[offset] = x * (px < 0 ? -1 : 1); 156 output[offset + 1] = y * (py < 0 ? -1 : 1); 157 } 158 159 baiduMercator.forward = forEachPoint(function(input, output, offset) { 160 var lng = getLoop(input[offset], -180, 180); 161 var lat = getRange(input[offset + 1], -74, 74); 162 163 var table = null; 164 var j; 165 for (j = 0; j < LLBAND.length; ++j) { 166 if (lat >= LLBAND[j]) { 167 table = LL2MC[j]; 168 break; 169 } 170 } 171 if (table === null) { 172 for (j = LLBAND.length - 1; j >= 0; --j) { 173 if (lat <= -LLBAND[j]) { 174 table = LL2MC[j]; 175 break; 176 } 177 } 178 } 179 output[offset] = lng; 180 output[offset + 1] = lat; 181 convertor(output, output, offset, table); 182 }); 183 184 baiduMercator.inverse = forEachPoint(function(input, output, offset) { 185 var y_abs = Math.abs(input[offset + 1]); 186 187 var table = null; 188 for (var j = 0; j < MCBAND.length; j++) { 189 if (y_abs >= MCBAND[j]) { 190 table = MC2LL[j]; 191 break; 192 } 193 } 194 195 convertor(input, output, offset, table); 196 }); 197 198 var gcj02 = {} 199 200 var PI = Math.PI; 201 var AXIS = 6378245.0; 202 var OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2 203 204 function delta(wgLon, wgLat) { 205 var dLat = transformLat(wgLon - 105.0, wgLat - 35.0); //transformLat(wgLon - 105.0, wgLat - 35.0); 206 var dLon = transformLon(wgLon - 105.01, wgLat - 35.0); //transformLon(wgLon - 105.0, wgLat - 35.0); 207 var radLat = wgLat / 180.0 * PI; 208 var magic = Math.sin(radLat); 209 magic = 1 - OFFSET * magic * magic; 210 var sqrtMagic = Math.sqrt(magic); 211 dLat = (dLat * 180.0) / ((AXIS * (1 - OFFSET)) / (magic * sqrtMagic) * PI); 212 dLon = (dLon * 180.0) / (AXIS / sqrtMagic * Math.cos(radLat) * PI); 213 return [dLon, dLat]; 214 } 215 216 function outOfChina(lon, lat) { 217 if (lon < 72.004 || lon > 137.8347) { 218 return true; 219 } 220 if (lat < 0.8293 || lat > 55.8271) { 221 return true; 222 } 223 return false; 224 } 225 226 function transformLat(x, y) { 227 var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); 228 ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; 229 ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0; 230 ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0; 231 return ret; 232 } 233 234 function transformLon(x, y) { 235 var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); 236 ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; 237 ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0; 238 ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0; 239 return ret; 240 } 241 242 gcj02.toWGS84 = forEachPoint(function(input, output, offset) { 243 var lng = input[offset]; 244 var lat = input[offset + 1]; 245 if (!outOfChina(lng, lat)) { 246 var deltaD = delta(lng, lat); 247 lng = lng - deltaD[0]; 248 lat = lat - deltaD[1]; 249 } 250 output[offset] = lng; 251 output[offset + 1] = lat; 252 }); 253 254 gcj02.fromWGS84 = forEachPoint(function(input, output, offset) { 255 var lng = input[offset]; 256 var lat = input[offset + 1]; 257 if (!outOfChina(lng, lat)) { 258 var deltaD = delta(lng, lat); 259 lng = lng + deltaD[0]; 260 lat = lat + deltaD[1]; 261 } 262 output[offset] = lng; 263 output[offset + 1] = lat; 264 }); 265 266 var bd09 = {} 267 268 var PI = Math.PI; 269 var X_PI = PI * 3000 / 180; 270 271 function toGCJ02(input, output, offset) { 272 var x = input[offset] - 0.0065; 273 var y = input[offset + 1] - 0.006; 274 var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI); 275 var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI); 276 output[offset] = z * Math.cos(theta); 277 output[offset + 1] = z * Math.sin(theta); 278 return output; 279 } 280 281 function fromGCJ02(input, output, offset) { 282 var x = input[offset]; 283 var y = input[offset + 1]; 284 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI); 285 var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI); 286 output[offset] = z * Math.cos(theta) + 0.0065; 287 output[offset + 1] = z * Math.sin(theta) + 0.006; 288 return output; 289 } 290 291 bd09.toWGS84 = function(input, opt_output, opt_dimension) { 292 var output = forEachPoint(toGCJ02)(input, opt_output, opt_dimension); 293 return gcj02.toWGS84(output, output, opt_dimension); 294 }; 295 296 bd09.fromWGS84 = function(input, opt_output, opt_dimension) { 297 var output = gcj02.fromWGS84(input, opt_output, opt_dimension); 298 return forEachPoint(fromGCJ02)(output, output, opt_dimension); 299 }; 300 301 302 var projzh = {} 303 304 projzh.smerc2bmerc = function(input, opt_output, opt_dimension) { 305 var output = sphericalMercator.inverse(input, opt_output, opt_dimension); 306 output = bd09.fromWGS84(output, output, opt_dimension); 307 return baiduMercator.forward(output, output, opt_dimension); 308 }; 309 310 projzh.bmerc2smerc = function(input, opt_output, opt_dimension) { 311 var output = baiduMercator.inverse(input, opt_output, opt_dimension); 312 output = bd09.toWGS84(output, output, opt_dimension); 313 return sphericalMercator.forward(output, output, opt_dimension); 314 }; 315 316 projzh.bmerc2ll = function(input, opt_output, opt_dimension) { 317 var output = baiduMercator.inverse(input, opt_output, opt_dimension); 318 return bd09.toWGS84(output, output, opt_dimension); 319 }; 320 321 projzh.ll2bmerc = function(input, opt_output, opt_dimension) { 322 var output = bd09.fromWGS84(input, opt_output, opt_dimension); 323 return baiduMercator.forward(output, output, opt_dimension); 324 }; 325 326 projzh.ll2smerc = sphericalMercator.forward; 327 projzh.smerc2ll = sphericalMercator.inverse; 328 329 330 331 var extent = [72.004, 0.8293, 137.8347, 55.8271]; 332 333 var baiduMercatorProj = new ol.proj.Projection({ 334 code: ‘baidu‘, 335 extent: ol.extent.applyTransform(extent, projzh.ll2bmerc), 336 units: ‘m‘ 337 }); 338 339 ol.proj.addProjection(baiduMercatorProj); 340 ol.proj.addCoordinateTransforms(‘EPSG:4326‘, baiduMercatorProj, projzh.ll2bmerc, projzh.bmerc2ll); 341 ol.proj.addCoordinateTransforms(‘EPSG:3857‘, baiduMercatorProj, projzh.smerc2bmerc, projzh.bmerc2smerc); 342 343 var bmercResolutions = new Array(19); 344 for (var i = 0; i < 19; ++i) { 345 bmercResolutions[i] = Math.pow(2, 18 - i); 346 } 347 var baidu = new ol.layer.Tile({ 348 source: new ol.source.XYZ({ 349 projection: ‘baidu‘, 350 maxZoom: 18, 351 tileUrlFunction: function(tileCoord) { 352 var x = tileCoord[1]; 353 var y = tileCoord[2]; 354 var z = tileCoord[0]; 355 356 return "http://online3.map.bdimg.com/tile/?qt=vtile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=udt=20170908&scaler=1&p=1" 357 358 // return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=udt=20170908&scaler=1&p=1" 359 360 361 // return "http://api0.map.bdimg.com/customimage/tile?x=" + x 362 // + "&y=" + y + "&z=" + z 363 // + "&udt=20170908&scale=2&ak=ZUONbpqGBsYGXNIYHicvbAbM" 364 // + "&styles=t%3Awater%7Ce%3Aall%7Cc%3A%23044161%2Ct%3Aland%7Ce%3Aall%7Cc%3A%23004981%2Ct%3Aboundary%7Ce%3Ag%7Cc%3A%23064f85%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Ahighway%7Ce%3Ag%7Cc%3A%23004981%2Ct%3Ahighway%7Ce%3Ag.f%7Cc%3A%23005b96%7Cl%3A1%2Ct%3Ahighway%7Ce%3Al%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Ag%7Cc%3A%23004981%2Ct%3Aarterial%7Ce%3Ag.f%7Cc%3A%2300508b%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%23056197%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Al%7Cv%3Aoff%2Ct%3Aboundary%7Ce%3Ag.f%7Cc%3A%23029fd4%2Ct%3Abuilding%7Ce%3Aall%7Cc%3A%231a5787%2Ct%3Alabel%7Ce%3Aall%7Cv%3Aoff&t = 1505487396397"; 365 }, 366 tileGrid: new ol.tilegrid.TileGrid({ 367 resolutions: bmercResolutions, 368 origin: [0, 0], 369 extent: ol.extent.applyTransform(extent, projzh.ll2bmerc), 370 tileSize: [256, 256] 371 }) 372 }) 373 });
注意347行定义的百度图层，里面返回的地址第一个是比较标准的，后两个存在伸展现象（百度地图的膨胀版），所以我采用了第一个。至此，百度图层已经定义完成，包括坐标系。
接下来
以上是关于OpenLayers调用百度地图的主要内容，如果未能解决你的问题，请参考以下文章