概述
本文介绍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的使用参考如下文档：
<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
网友评论