The use of openlayers tiles

        OpenLayers is a map development library for WebGIS clients, supporting a variety of maps. When using tiles, first download the tiles you need, and the downloaded tiles will be layered. The higher the level, the more the number of tiles.

        You can import the ol.js file and ol.css file, or use the npm install ol command to download.

openlayers official website: https://openlayers.org/

File download: https://openlayers.org/download/

1. Baidu map

<div style="border: 1px solid red" id="olMap"></div>

        Create a container to put the map, and take a look at the size by the way.

  var resolutions = [];
  var maxZoom = 18;
  // 重新计算百度使用的分辨率
  for (var i = 0; i <= maxZoom; i++) {
    resolutions[i] = Math.pow(2, maxZoom - i);
  }
  // 设置分辨率
  var tilegrid = new ol.tilegrid.TileGrid({
    origin: [0, 0],
    resolutions: resolutions, 
  });
  // 创建百度地图的数据源
  var baiduSource = new ol.source.TileImage({
    projection: "EPSG:3857",
    tileGrid: tilegrid,
    // 对瓦片的请求路径进行处理
    tileUrlFunction: function (tileCoord, pixelRatio, proj) {
      console.log(tileCoord);
      var z = tileCoord[0];
      var x = tileCoord[1];
      var y = tileCoord[2];
      if (x < 0) {
        x = -x;
      }
      if (y < 0) {
        y = -y;
      }
      return "map/" + z + "/" + x + "/" + y + ".png";
    },
  }); 
  // 百度地图层
  var baiduMapLayer2 = new ol.layer.Tile({ source: baiduSource });
  // 创建地图
  var map = new ol.Map({
    layers: [baiduMapLayer2],
    view: new ol.View({
      // 经纬度设置中心点
      center: ol.proj.transform(
        [123.405161, 41.791039],
        "EPSG:4326",
        "EPSG:3857"
      ),
      zoom: 14,
    }),
    target: "olMap",
  });

        The tile arrangement rule of Baidu map is that the coordinate origin is in the lower left corner, the x-axis increases from left to right, and the y-axis increases from bottom to top. Same as downloaded tiles.

         under the third floor

 

         Loading such tiles requires adjustments to the TileGrid, and the tiles of Baidu Maps are such tiles.

         ol.source.TileImage loads the data source and provides the image data of the slices.

       There is a small problem, Baidu map can not use ol.source.XYZ, I hope that the big guys who know can tell me. Using ol.source.XYZ would look like this:

        tileCoord can determine which tile to load. after output

         The first is the loaded level, the second is the x-axis, and the third is the y-axis.

        Zoom sets which layer of tiles to display when initializing.

        The minZoom setting shows the minimum number of layers, for example, if it is set to 9, it cannot be zoomed out when the ninth layer is reached.

        There are many tools for downloading tiles on the Internet, and the names of the downloaded tiles are different. The downloaded Baidu map looks like this.

 

 

         After that, I downloaded the tiles of Gaode map, which is like this

 

 

 

         Therefore, when stitching paths, stitching should be done according to the format of the downloaded tiles.

Second, Gaode map

var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        // 使用xyz来定位一张瓦片，XY相当于横纵坐标，Z表示图层层级
        source: new ol.source.XYZ({
          url: "teils/" + "L{z}/R{y}/C{x}" + ".png",
          tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            console.log(tileCoord); // [9, 366, -215]
            if (!tileCoord) {
              return undefined;
            } else {
              var z = tileCoord[0];
              if (z < 10) {
                z = "0" + z;
              }
              var tempX = "00000000" + tileCoord[1].toString(16).toUpperCase();
              var tempY =
                "00000000" + (-tileCoord[2] - 1).toString(16).toUpperCase();

              console.log(tempX, tempY);

              //   要加载瓦片的存放地址
              console.log(
                this.getUrls()[0]
                  .replace("{x}", tempX.substring(tempX.length - 8))
                  .replace("{y}", tempY.substring(tempY.length - 8))
                  .replace("{z}", z)
              );

              return this.getUrls()[0]
                .replace("{x}", tempX.substring(tempX.length - 8))
                .replace("{y}", tempY.substring(tempY.length - 8))
                .replace("{z}", z);
            }
          },
          projection: ol.proj.get("EPSG:3857"),
        }),
      }),
    ],
    target: "olMap",
    view: new ol.View({
      projection: "EPSG:3857",
      center: ol.proj.transform(
        [123.405161, 41.791039],
        "EPSG:4326",
        "EPSG:3857"
      ),
      zoom: 10, 
      minZoom: 3,
    }),
  });
  let pointLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [],
    }),
  });

        tileCoord output

         The URL to load tiles should be set according to the download method of the image.