Openlayers v6.x 学习记录（一）百度地图

瓦片地址：

1、默认主题
https://maponline0.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&ak={key}&styles=pl&scaler=1&udt=20220115&from=jsapi2_0"

2、自定义主题

https://api.map.baidu.com/customimage/tile?&x={x}&y={y}&z={z}&styles={style}&scaler=1&udt=20211014&from=jsapi2_0

个性化地图、自定义地图 | 百度地图API SDK

3、插件安装

百度坐标修正插件插件projzh

npm install -save projzh

经纬度转换插件

npm install -save gcoord

4、代码

let projBD09 = new Projection({
   code: 'BD09',
   extent : [-20037726.37,-11708041.66,20037726.37,12474104.17],
   units: 'm',
   axisOrientation: 'neu',
   global: false
});
addProjection(projBD09);
addCoordinateTransforms("EPSG:4326", "BD:09",
  function (coordinate) {
    return gcoord.transform(coordinate, gcoord.BD09, gcoord.BD09Meter);
  },
  function (coordinate) {
   return gcoord.transform(coordinate, gcoord.BD09Meter, gcoord.BD09);
  }
);
let mapKey = ''; // 百度地图key
let resolutions = [];
for (let i = 0; i <= 18; i++) {
   resolutions[i] = Math.pow(2, 18 - i);
}
let tileGrid = new TileGrid({
   origin: [0,0],
   resolutions: resolutions
});
let mapSource = new TileImage({
   projection: 'BD09',
   tileGrid: tileGrid,
   tileUrlFunction: function (tileCoord) {
      if (!tileCoord) {
        return "";
      }
      let z = tileCoord[0];
      let x = tileCoord[1];
      let y = -tileCoord[2] - 1;
      let urlNum = (Math.abs(x + y) % 4).toString();
      if (x < 0) {
         x = "M" + (-x).toString();
      }
      if (y < 0) {
         y = "M" + (-y).toString();
      }
      return "https://maponline" + urlNum + ".bdimg.com/tile/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&ak=" + key + "&styles=pl&scaler=1&udt=" + Date.parse('yyyyMMdd') + "&from=jsapi2_0";
    }
 });
 let mapLayer = new TileLayer({
     source: mapSource
 });

效果图

参考： OpenLayers无偏移加载百度离线瓦片地图_megomap的专栏-CSDN博客