ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Openlayers示例 | Advanced Mapbox Vector Tiles

2022-03-20 11:38:10  阅读:212  来源: 互联网

标签:Tiles ol Mapbox 示例 瓦片 style Vector mapbox


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

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>

标签:Tiles,ol,Mapbox,示例,瓦片,style,Vector,mapbox
来源: https://www.cnblogs.com/echohye/p/16029356.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有