PMTiles介绍与MapboxGL中使用

概述

本文介绍PMTiles以及PMTiles在MapboxGL中的使用。

PMTiles简介

PMTiles 是一种对瓦片数据的单文件压缩格式。PMTiles 压缩包可以托管在如 S3 这样的商品级存储平台上，并允许创建低成本、零维护的“无服务器”地图应用程序——这些应用程序无需自定义瓦片后端或第三方提供商。

PMTiles的构造

PMTiles的构造包括：

头信息(Header)：
根目录(Root Directory):
JSON元数据(JSON metadata):
子目录(Leaf Directories):
切片数据(Tile Data):

下载与使用

windows下载地址为：https://github.com/protomaps/go-pmtiles/releases

通过如下命令将mbtiles转换为pmtiles

# ./pmtiles.exe convert ./源mbtiles文件 ./目标pmtiles文件
./pmtiles.exe convert ./province.mbtiles ./province.pmtiles

HTTP 206简介

HTTP 206 Partial Content是HTTP协议中的一种状态码，它表示服务器已经成功处理了部分GET请求。这个状态码主要用于实现断点续传或分块下载，对于处理大文件下载、流媒体播放和优化网络传输性能具有重要意义。

HTTP 206 的定义

状态码分类：HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码。HTTP 206属于2xx这一类型的状态码，代表网页请求已成功被服务器接收、理解、并接受。
具体含义：HTTP 206 Partial Content 表示服务器只处理了客户端请求的资源的一部分，而不是全部。这通常发生在客户端使用Range请求头字段指定了资源的一个或多个部分时。

HTTP 206 的用途

断点续传：当下载大文件时，如果网络中断导致下载失败，使用HTTP 206和Range请求头，客户端可以从上次中断的地方继续下载，而不是重新下载整个文件。
分块下载：对于大文件或流媒体内容，服务器可以将资源分成多个部分，客户端可以并发请求这些部分，从而提高下载速度或播放流畅度。
优化网络传输：通过分块传输，客户端可以根据网络状况动态调整请求的块大小和顺序，从而优化网络传输性能。

Range 请求头字段

作用：Range请求头字段允许客户端请求资源的一个或多个部分，而不是整个资源。
语法：Range: bytes=start-end。其中，start表示起始字节位置，end表示结束字节位置。例如，Range: bytes=0-499表示请求资源的前500个字节。

HTTP 206 的响应

当服务器成功处理了Range请求时，它会返回一个HTTP 206 Partial Content响应，并在响应头中包含Content-Range字段，指示实际返回的字节范围。

image.png

mapboxGL中使用

mapboxGL中pmtiles的使用参考如下文档：

mapbox-pmtiles

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        inset: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="lib/mapbox-gl.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1/dist/mapbox-pmtiles.umd.min.js"></script>
    <script>
      const map = new mapboxgl.Map({
        container: "map",
        center: [114.06705183665042, 22.65447650819611],
        zoom: 3,
      });
      mapboxgl.Style.setSourceType(
        mapboxPmTiles.SOURCE_TYPE,
        mapboxPmTiles.PmTilesSource
      );
      map.on("load", () => {
        const PMTILES_URL = "./data/province.pmtiles";
        mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL).then((header) => {
          const bounds = [
            header.minLon,
            header.minLat,
            header.maxLon,
            header.maxLat,
          ];
          map.addSource("pmtiles", {
            type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
            url: PMTILES_URL,
            // minzoom: header.minZoom,
            // maxzoom: header.maxZoom,
            bounds: bounds,
          });
          map.addLayer({
            id: "province-fill",
            source: "pmtiles",
            "source-layer": "province",
            type: "fill",
            paint: {
              "fill-color": "#ff0000",
              "fill-opacity": 0.2,
            },
          });
          map.addLayer({
            id: "province-line",
            source: "pmtiles",
            "source-layer": "province",
            type: "line",
            paint: {
              "line-color": "#ff0000",
              "line-width": 1.2,
            },
          });
        });
      });
    </script>
  </body>
</html>