OpenLayers调用百度地图
背景
上周接到一个任务，将自己拍的影像叠加到百度地图上。
解决思路
openlayers调用百度地图要解决坐标偏移问题，所以要先定义百度坐标系，然后添加到openlayers默认的“EPSG:3857”坐标系。
步骤
定义百度墨卡托坐标，是有人写好的js文件，算法挺复杂，不是一般人能理解的，直接用就好了。
baidu.js（旧文件，弃用，新文件见2020.7.8更新）文件如下：
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行定义的百度图层，里面返回的地址第一个是比较标准的，后两个存在伸展现象（百度地图的膨胀版），所以我采用了第一个。至此，百度图层已经定义完成，包括坐标系。
2020.7.8更新 由于博客园有行数，重新放一遍代码，并且多加了影像、影像标注、黑色系的调用地址：
var forEachPoint = function (func) { return function (input, opt_output, opt_dimension) { var len = input.length; var dimension = opt_dimension ? opt_dimension : 2; var output; if (opt_output) { output = opt_output; } else { if (dimension !== 2) { output = input.slice(); } else { output = new Array(len); } } for (var offset = 0; offset < len; offset += dimension) { func(input, output, offset) } return output; }; }; var sphericalMercator = {} var RADIUS = 6378137; var MAX_LATITUDE = 85.0511287798; var RAD_PER_DEG = Math.PI / 180; sphericalMercator.forward = forEachPoint(function (input, output, offset) { var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE); var sin = Math.sin(lat * RAD_PER_DEG); output[offset] = RADIUS * input[offset] * RAD_PER_DEG; output[offset + 1] = RADIUS * Math.log((1 + sin) / (1 - sin)) / 2; }); sphericalMercator.inverse = forEachPoint(function (input, output, offset) { output[offset] = input[offset] / RADIUS / RAD_PER_DEG; output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - (Math.PI / 2)) / RAD_PER_DEG; }); var baiduMercator = {} var MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]; var LLBAND = [75, 60, 45, 30, 15, 0]; var MC2LL = [ [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2], [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86], [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37], [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06], [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4], [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]]; var LL2MC = [ [-0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880, -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5], [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559, 12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5], [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253, 97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5], [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287, 1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5], [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118, 9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5], [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292, 1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]]; function getRange(v, min, max) { v = Math.max(v, min); v = Math.min(v, max); return v; } function getLoop(v, min, max) { var d = max - min; while (v > max) { v -= d; } while (v < min) { v += d; } return v; } function convertor(input, output, offset, table) { var px = input[offset]; var py = input[offset + 1]; var x = table[0] + table[1] * Math.abs(px); var d = Math.abs(py) / table[9]; var y = table[2] + table[3] * d + table[4] * d * d + table[5] * d * d * d + table[6] * d * d * d * d + table[7] * d * d * d * d * d + table[8] * d * d * d * d * d * d; output[offset] = x * (px < 0 ? -1 : 1); output[offset + 1] = y * (py < 0 ? -1 : 1); } baiduMercator.forward = forEachPoint(function (input, output, offset) { var lng = getLoop(input[offset], -180, 180); var lat = getRange(input[offset + 1], -74, 74); var table = null; var j; for (j = 0; j < LLBAND.length; ++j) { if (lat >= LLBAND[j]) { table = LL2MC[j]; break; } } if (table === null) { for (j = LLBAND.length - 1; j >= 0; --j) { if (lat <= -LLBAND[j]) { table = LL2MC[j]; break; } } } output[offset] = lng; output[offset + 1] = lat; convertor(output, output, offset, table); }); baiduMercator.inverse = forEachPoint(function (input, output, offset) { var y_abs = Math.abs(input[offset + 1]); var table = null; for (var j = 0; j < MCBAND.length; j++) { if (y_abs >= MCBAND[j]) { table = MC2LL[j]; break; } } convertor(input, output, offset, table); }); var gcj02 = {} var PI = Math.PI; var AXIS = 6378245.0; var OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2 function delta(wgLon, wgLat) { var dLat = transformLat(wgLon - 105.0, wgLat - 35.0); //transformLat(wgLon - 105.0, wgLat - 35.0); var dLon = transformLon(wgLon - 105.01, wgLat - 35.0); //transformLon(wgLon - 105.0, wgLat - 35.0); var radLat = wgLat / 180.0 * PI; var magic = Math.sin(radLat); magic = 1 - OFFSET * magic * magic; var sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((AXIS * (1 - OFFSET)) / (magic * sqrtMagic) * PI); dLon = (dLon * 180.0) / (AXIS / sqrtMagic * Math.cos(radLat) * PI); return [dLon, dLat]; } function outOfChina(lon, lat) { if (lon < 72.004 || lon > 137.8347) { return true; } if (lat < 0.8293 || lat > 55.8271) { return true; } return false; } function transformLat(x, y) { 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)); ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0; return ret; } function transformLon(x, y) { var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0; return ret; } gcj02.toWGS84 = forEachPoint(function (input, output, offset) { var lng = input[offset]; var lat = input[offset + 1]; if (!outOfChina(lng, lat)) { var deltaD = delta(lng, lat); lng = lng - deltaD[0]; lat = lat - deltaD[1]; } output[offset] = lng; output[offset + 1] = lat; }); gcj02.fromWGS84 = forEachPoint(function (input, output, offset) { var lng = input[offset]; var lat = input[offset + 1]; if (!outOfChina(lng, lat)) { var deltaD = delta(lng, lat); lng = lng + deltaD[0]; lat = lat + deltaD[1]; } output[offset] = lng; output[offset + 1] = lat; }); var bd09 = {} var PI = Math.PI; var X_PI = PI * 3000 / 180; function toGCJ02(input, output, offset) { var x = input[offset] - 0.0065; var y = input[offset + 1] - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI); output[offset] = z * Math.cos(theta); output[offset + 1] = z * Math.sin(theta); return output; } function fromGCJ02(input, output, offset) { var x = input[offset]; var y = input[offset + 1]; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI); output[offset] = z * Math.cos(theta) + 0.0065; output[offset + 1] = z * Math.sin(theta) + 0.006; return output; } bd09.toWGS84 = function (input, opt_output, opt_dimension) { var output = forEachPoint(toGCJ02)(input, opt_output, opt_dimension); return gcj02.toWGS84(output, output, opt_dimension); }; bd09.fromWGS84 = function (input, opt_output, opt_dimension) { var output = gcj02.fromWGS84(input, opt_output, opt_dimension); return forEachPoint(fromGCJ02)(output, output, opt_dimension); }; var projzh = {} projzh.smerc2bmerc = function (input, opt_output, opt_dimension) { var output = sphericalMercator.inverse(input, opt_output, opt_dimension); output = bd09.fromWGS84(output, output, opt_dimension); return baiduMercator.forward(output, output, opt_dimension); }; projzh.bmerc2smerc = function (input, opt_output, opt_dimension) { var output = baiduMercator.inverse(input, opt_output, opt_dimension); output = bd09.toWGS84(output, output, opt_dimension); return sphericalMercator.forward(output, output, opt_dimension); }; projzh.bmerc2ll = function (input, opt_output, opt_dimension) { var output = baiduMercator.inverse(input, opt_output, opt_dimension); return bd09.toWGS84(output, output, opt_dimension); }; projzh.ll2bmerc = function (input, opt_output, opt_dimension) { var output = bd09.fromWGS84(input, opt_output, opt_dimension); return baiduMercator.forward(output, output, opt_dimension); }; projzh.ll2smerc = sphericalMercator.forward; projzh.smerc2ll = sphericalMercator.inverse; var extent = [72.004, 0.8293, 137.8347, 55.8271]; var baiduMercatorProj = new ol.proj.Projection({ code: 'baidu', extent: ol.extent.applyTransform(extent, projzh.ll2bmerc), units: 'm' }); ol.proj.addProjection(baiduMercatorProj); ol.proj.addCoordinateTransforms('EPSG:4326', baiduMercatorProj, projzh.ll2bmerc, projzh.bmerc2ll); ol.proj.addCoordinateTransforms('EPSG:3857', baiduMercatorProj, projzh.smerc2bmerc, projzh.bmerc2smerc); var bmercResolutions = new Array(19); for (var i = 0; i < 19; ++i) { bmercResolutions[i] = Math.pow(2, 18 - i); } var baidu = new ol.layer.Tile({ source: new ol.source.XYZ({ projection: 'baidu', maxZoom: 18, tileUrlFunction: function (tileCoord) { var x = tileCoord[1]; var y = tileCoord[2]; var z = tileCoord[0]; //街道图 return "http://online3.map.bdimg.com/tile/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=udt=20170908&scaler=1&p=1" //影像 // return 'http://shangetu' + parseInt(Math.random() * 10) + '.map.bdimg.com/it/u=x=' + x + // ';y=' + y + ';z=' + z + ';v=009;type=sate&fm=46&udt=20170606'; // return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=udt=20170908&scaler=1&p=1" //影像标注 // return 'http://online' + parseInt(Math.random() * 10) + '.map.bdimg.com/onlinelabel/?qt=tile&x=' + // x + '&y=' + y + '&z=' + z + '&styles=sl&udt=20170620&scaler=1&p=1'; //黑色系列 // // return 'http://api1.map.bdimg.com/customimage/tile?&x=' + // x + '&y=' + y + '&z=' + z + '&udt=20170908&scale=1&ak=E4805d16520de693a3fe707cdc962045&customid=dark'; //蓝色系列 // return "http://api0.map.bdimg.com/customimage/tile?x=" + x // + "&y=" + y + "&z=" + z // + "&udt=20170908&scale=2&ak=ZUONbpqGBsYGXNIYHicvbAbM" // + "&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"; }, tileGrid: new ol.tilegrid.TileGrid({ resolutions: bmercResolutions, origin: [0, 0], extent: ol.extent.applyTransform(extent, projzh.ll2bmerc), tileSize: [256, 256] }) }) });
这么多地址，我干脆写个方法好了，不然挨个定义好麻烦，可以把baidu.js里面定义baidu的变量删掉，然后加上这个方法：
function defineLayerByName(layName) { let layerUrl; var baidu = new ol.layer.Tile({ source: new ol.source.XYZ({ projection: 'baidu', maxZoom: 18, tileUrlFunction: function (tileCoord) { var x = tileCoord[1]; var y = tileCoord[2]; var z = tileCoord[0]; switch (layName) { case "街道图": layerUrl = "http://online3.map.bdimg.com/tile/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=udt=20170908&scaler=1&p=1"; break; case "影像": layerUrl = 'http://shangetu' + parseInt(Math.random() * 10) + '.map.bdimg.com/it/u=x=' + x + ';y=' + y + ';z=' + z + ';v=009;type=sate&fm=46&udt=20170606'; break; case "影像标注": layerUrl = 'http://online' + parseInt(Math.random() * 10) + '.map.bdimg.com/onlinelabel/?qt=tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=sl&udt=20170620&scaler=1&p=1'; break; case "黑色系": layerUrl = 'http://api1.map.bdimg.com/customimage/tile?&x=' + x + '&y=' + y + '&z=' + z + '&udt=20170908&scale=1&ak=E4805d16520de693a3fe707cdc962045&customid=dark'; break; case "蓝色系": layerUrl = "http://api0.map.bdimg.com/customimage/tile?x=" + x + "&y=" + y + "&z=" + z + "&udt=20170908&scale=2&ak=ZUONbpqGBsYGXNIYHicvbAbM" + "&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"; break; } return layerUrl; }, tileGrid: new ol.tilegrid.TileGrid({ resolutions: bmercResolutions, origin: [0, 0], extent: ol.extent.applyTransform(extent, projzh.ll2bmerc), tileSize: [256, 256] }) }) }); return baidu; }
调用示例：defineLayerByName("街道图")
接下来将baidu图层添加到map中就好了
1 var center=ol.proj.transform([x,y], 'EPSG:4326', 'EPSG:3857'), 2 var map = new ol.Map({ 3 target: 'map', 4 layers: [ 5 defineLayerByName("街道图"), 6 ], 7 // 设置显示地图的视图 8 view: new ol.View({ 9 center: center, 10 projection:'EPSG:3857',//EPSG:3857 11 zoom: 17, 12 maxZoom: 25, 13 minZoom: 10 14 }), 15 controls: ol.control.defaults({}).extend(controls) 16 17 });
2020.7.9更新
今天发现了更多的主题风格（街道图），之前看到过没有仔细研究，我们只需要借用返回地址就好了，放到我们的baidu.js中：
1 /** 2 * 默认地图样式(normal) 3 * 清新蓝风格(light) 4 * 黑夜风格(dark) 5 * 红色警惕风格(redalert) 6 * 精简风格(googlelite) 7 * 天然绿风格(grassgreen) 8 * 午夜蓝风格(midnight) 9 * 浪漫粉风格(pink) 10 * 青春绿风格(darkgreen) 11 * 清新蓝绿风格(bluish) 12 * 高端灰风格(grayscale) 13 * 强边界风格(hardedge) 14 */ 15 var baidu_layer = getBaiduCustomimage("midnight"); 16 17 function getBaiduCustomimage(customid){ 18 19 var projection = ol.proj.get("EPSG:3857"); 20 var resolutions = []; 21 for (var i = 0; i < 19; i++) { 22 resolutions[i] = Math.pow(2, 18 - i); 23 } 24 var tilegrid = new ol.tilegrid.TileGrid({ 25 origin: [0, 0], 26 resolutions: resolutions 27 }); 28 29 var baidu_source = new ol.source.TileImage({ 30 projection: projection, 31 tileGrid: tilegrid, 32 tileUrlFunction: function(tileCoord, pixelRatio, proj){ 33 if(!tileCoord){ 34 return ""; 35 } 36 var z = tileCoord[0]; 37 var x = tileCoord[1]; 38 var y = tileCoord[2]; 39 40 if(x<0){ 41 x = "M"+(-x); 42 } 43 if(y<0){ 44 y = "M"+(-y); 45 } 46 return "http://api2.map.bdimg.com/customimage/tile?&x="+x+ 47 "&y="+y+"&z="+z+ 48 "&udt=20170428&scale=1&ak=E4805d16520de693a3fe707cdc962045&customid="+customid; 49 } 50 }); 51 return new ol.layer.Tile({ 52 source: baidu_source 53 }); 54 }
参考文档
openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图
火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版
OpenLayers 3/4 加载 Baidu Maps 瓦片(偏移更小)
openlayers 3扩展，调用百度地图、高德地图、天地图服务
openlayers 3加载百度、高德、google瓦片地图
