美文网首页GIS加油站
PMTiles介绍与MapboxGL中使用

PMTiles介绍与MapboxGL中使用

作者: 牛老师讲GIS | 来源:发表于2024-08-11 21:40 被阅读0次

概述

本文介绍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 ContentHTTP协议中的一种状态码,它表示服务器已经成功处理了部分GET请求。这个状态码主要用于实现断点续传或分块下载,对于处理大文件下载、流媒体播放和优化网络传输性能具有重要意义。

HTTP 206 的定义

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

HTTP 206 的用途

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

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的使用参考如下文档:

<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>
image.png

相关文章

网友评论

    本文标题:PMTiles介绍与MapboxGL中使用

    本文链接:https://www.haomeiwen.com/subject/urthkjtx.html