当前位置：网站首页>Openlayers instances advanced mapbox vector tiles advanced mapbox vector maps

Openlayers instances advanced mapbox vector tiles advanced mapbox vector maps

2022-07-23 21:34:00 【Giser Xiaohui】

Advanced Mapbox Vector Tiles- senior Mapbox Vector Map

Knowledge points

（ The main ） Using this method to load vector maps, you can reuse the same source tiles at the zoom level , Save the bandwidth of mobile devices to a certain extent , When the network environment is bad , It can improve the map loading speed .
（ The main ） call mapbox Map service needs to be in mapbox Official website account registration , Get at console APP The specified Access token token , This is the key to get vector map .
（ secondary ）openlayers The official example introduces us mapbox Map style V6 edition , See the source code for details ,/examples/resources/mapbox-streets-v6-style.js file .

Official website original text and translation

A vector tiles map which reuses the same source tiles for subsequent zoom levels to save bandwidth on mobile devices. Note: No map will be visible when the access token has expired.
Vector Tile Map , Reuse the same source tiles at subsequent zoom levels , To save bandwidth on mobile devices . Be careful ： When access token When the access token expires , The map will not show .

Source code

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

<head>
  <meta charset="UTF-8">
  <!--  introduce OpenLayers CSS style  -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/css/ol.css"
    type="text/css">
  <!--  introduce OpenLayers JS library  -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/build/ol.js"></script>
  <!--  introduce mapbox Map style V6 edition  -->
  <script src="https://openlayers.org/en/v6.13.0/examples/resources/mapbox-streets-v6-style.js"></script>
  <!-- css Code  -->
  <style>
    .map {
    
      width: 100%;
      height: 400px;
      background: #f8f4f0;
    }
  </style>
  <title>Advanced Mapbox Vector Tiles- senior Mapbox Vector Map </title>
</head>

<body>
  <!-- html Code  -->
  <div id="map" class="map"></div>
  <!-- script Code  -->
  <script>
    //  Statement key Variable ,key Access to , Get into mapbox Official website  ->  Registered account  ->  establish APP ->  obtain Access token,mapbox Official website address ：https://www.mapbox.com
    const key =
      'pk.eyJ1Ijoiemhhb3lhaHVpIiwiYSI6ImNsMDVhM2xmcjF3MWgzZXFoMXExb3luczYifQ.BL1X1DNYDd6UrlfEoCrGNA';

    //  Calculate the matching zoom level 1、3、5、7、9、11、13、15 The resolution of the 
    const resolutions = [];
    for (let i = 0; i <= 8; ++i) {
    
      resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
    }

    //  Calculate the zoom level 1、3、5、7、9、11、13、15 Of 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)
        );
    }

    //  Initialize map 
    const map = new ol.Map({
    
      //  Set the layer 
      layers: [
        new ol.layer.VectorTile({
    
          source: new ol.source.VectorTile({
    
            //  Set the attribution label 
            attributions:
              ' <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
              ' <a href="https://www.openstreetmap.org/copyright">' +
              'OpenStreetMap contributors</a>',
            //  The characteristics of tiles , Use here MVT Express mapbox vector tile(mapbox Vector tiles )
            format: new ol.format.MVT(),
            //  Tile grid 
            tileGrid: new ol.tilegrid.TileGrid({
    
              //  The extent of the tile grid 
              extent: ol.proj.get('EPSG:3857').getExtent(),
              //  Resolution level array 
              resolutions: resolutions,
              //  Tile size 
              tileSize: 512,
            }),
            //  Get a given tile Coordinates and projection tile URL
            tileUrlFunction: tileUrlFunction,
          }),
          //  transfer createMapboxStreetsV6Style function ,  application mapbox Special style 
          style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text),
        }),
      ],
      //  Bind page elements 
      target: 'map',
      //  Set up the view 
      view: new ol.View({
    
        center: [0, 0],
        minZoom: 1,
        zoom: 2,
      }),
    });
  </script>
</body>

</html>