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

baidu.js

注意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.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()

　　调用示例：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 });

View Code

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 }

View Code

　　参考文档

　　Add Baidu layer #3522

　　openlayers加载百度地图作为底图坐标偏移的解决办法

　　openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图

　　OpenLayers 3 之加载百度地图

　　openlayers加载百度地图作为底图坐标偏移的解决办法

　　openlayers在加载百度地图的基础上加要素图层

　　火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

　　OpenLayers 3/4 加载 Baidu Maps 瓦片(偏移更小)

　　openlayers 3扩展，调用百度地图、高德地图、天地图服务

　　调用百度的蓝黑色背景地图

　　baidu.js增加底图类型

　　OpenLayers加载百度离线瓦片地图（完美无偏移）

　　openlayers 3加载百度、高德、google瓦片地图

相关阅读:
Dilworth定理，链还是反链？
pku 3259Wormholes
hdu 2612 Find a way
hdu 2614
hdu 2544 最短路
 hdu 2553 N皇后问题
 hdu2717 Catch That Cow
hdu 1874 畅通工程续
 jquery学习必备代码和技巧
 HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上)
原文地址：https://www.cnblogs.com/youzi-xuchongyou/p/13129032.html