Openlayers示例2 | Advanced Mapbox Vector Tiles

矢量瓦片地图，在后续缩放级别中重用相同的源瓦片，以节省移动设备上的带宽。注意:当访问令牌过期时，映射将不可见。

Advanced Mapbox Vector Tiles

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"
    type="text/css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- 引入mapbox地图样式V6版本 -->
  <script src="https://openlayers.org/en/v6.13.0/examples/resources/mapbox-streets-v6-style.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 400px;
      background: #f8f4f0;
    }
  </style>
  <title>Advanced Mapbox Vector Tiles-高级Mapbox矢量贴图</title>
</head>

<body>
  <!-- html代码 -->
  <div id="map" class="map"></div>
  <!-- script代码 -->
  <script>
    // 声明key变量，key的获取途径，进入mapbox官网 -> 注册账号 -> 创建APP -> 获取Access token，mapbox官网地址：https://www.mapbox.com
    const key =
      'pk.eyJ1Ijoiemhhb3lhaHVpIiwiYSI6ImNsMDVhM2xmcjF3MWgzZXFoMXExb3luczYifQ.BL1X1DNYDd6UrlfEoCrGNA';

    // 计算匹配缩放级别1、3、5、7、9、11、13、15的分辨率
    const resolutions = [];
    for (let i = 0; i <= 8; ++i) {
      resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
    }

    // 计算缩放级别1、3、5、7、9、11、13、15的tile url
    function tileUrlFunction(tileCoord) {
      return (
        'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
        '{z}/{x}/{y}.vector.pbf?access_token=' +
        key
      )
        .replace('{z}', String(tileCoord[0] * 2 - 1))
        .replace('{x}', String(tileCoord[1]))
        .replace('{y}', String(tileCoord[2]))
        .replace(
          '{a-d}',
          'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)
        );
    }

    // 初始化地图
    const map = new ol.Map({
      // 设置图层
      layers: [
        new ol.layer.VectorTile({
          source: new ol.source.VectorTile({
            // 设置归属标签
            attributions:
              '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
              '© <a href="https://www.openstreetmap.org/copyright">' +
              'OpenStreetMap contributors</a>',
            // 瓦片的特征格式化，此处使用MVT表示mapbox vector tile(mapbox矢量瓦片)
            format: new ol.format.MVT(),
            // 瓦片网格
            tileGrid: new ol.tilegrid.TileGrid({
              // 瓦片网格的范围
              extent: ol.proj.get('EPSG:3857').getExtent(),
              // 分辨率级别数组
              resolutions: resolutions,
              // 瓦片尺寸
              tileSize: 512,
            }),
            // 获得给定的tile坐标和投影的tile URL
            tileUrlFunction: tileUrlFunction,
          }),
          // 调createMapboxStreetsV6Style函数, 应用mapbox专用样式
          style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text),
        }),
      ],
      // 绑定页面元素
      target: 'map',
      // 设置视图
      view: new ol.View({
        center: [0, 0],
        minZoom: 1,
        zoom: 2,
      }),
    });
  </script>
</body>

</html>