openlayers（版本6）瓦片地图openlayers离线瓦片地图生成，用于内网地图开发。注意各地图之间坐标系差异性

百度离线瓦片地图

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>openlayers（版本6）百度离线瓦片地图</title>
    <style>
      body, #map{
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  </head>
<body>
  <div id="map"></div>
</body>
<script>
  // 自定义分辨率和瓦片坐标系
  const projection = 'EPSG:3857' // 百度坐标系，高德和谷歌是'EPSG:4326'
  let resolutions = []
  // 计算百度使用的分辨率
  for (let i = 0; i <= 18; i++) {
    resolutions[i] = Math.pow(2, 18 - i)
  }
  // 百度地图层
  const baiduMapLayer = new ol.layer.Tile({
    // 加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图
    source: new ol.source.TileImage({
      projection,
      tileGrid: new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions
      }),
      tileUrlFunction: tileCoord => { // 加载离线地图地址
        const z = tileCoord[0]
        let x = tileCoord[1]
        let y = tileCoord[2] + 1 // 坑：v5到v6版本需要加1,
        if (x < 0) {
          x = -x
        }
        if (y < 0) {
          y = -y
        }
        return `../assets/openlayers/tiles/${z}/${x}/${y}.jpg` // 你下载好的离线图片放置的路劲
      }
    })
  })
  // 创建地图
  const map = new ol.Map({
    target: 'map',
    layers: [ // 图层放置（类似有卫星图层，街道图层等）
      baiduMapLayer
    ],
    view: new ol.View({
      zoom: 9, // 当前缩放
      maxZoom: 16, // 最大缩放
      minZoom: 8, // 最小缩放
      projection,
      center: ol.proj.transform([109.956924, 40.620351], 'EPSG:4326', 'EPSG:3857') // 中心坐标
    })
  })
</script>
</html>

在线瓦片地图

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>openlayers（版本6）在线瓦片地图</title>
    <style>
      body, #map{
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
  </head>
<body>
  <button onclick="setSatellite()">卫星地图</button>
  <button onclick="setStreet()">街道地图</button>
  <div id="map"></div>
</body>
<script>
  const satellite = new ol.layer.Tile({ // 卫星地图
    visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
    source: new ol.source.XYZ({
      attributions: '',
      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
    })
  })
  const street = new ol.layer.Tile({ // 街道地图
    visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
    source: new ol.source.XYZ({
      attributions: '',
      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  })
  // 创建地图
  const map = new ol.Map({
    target: 'map',
    layers: [ // 图层放置（类似有卫星图层，街道图层等）
      satellite,
      street
    ],
    view: new ol.View({
      zoom: 9, // 当前缩放
      maxZoom: 16, // 最大缩放
      minZoom: 8, // 最小缩放
      projection: 'EPSG:4326',
      center: [109.956924, 40.620351], // 中心坐标
    })
  })
  function setSatellite() {
    street.setVisible(false)
    satellite.setVisible(true)
  }
  function setStreet() {
    street.setVisible(true)
    satellite.setVisible(false)
  }
</script>
</html>