deck.gl 中实现 PMTiles 格式支持的技术解析

背景介绍

PMTiles 是一种新兴的云原生文件格式，专为从块存储服务中高效提供矢量切片(MVT)而设计。在 deck.gl 生态系统中实现对 PMTiles 的支持，可以显著简化从块存储生成和提供矢量切片的流程，避免了传统方式需要写入大量单独 MVT 文件所带来的时间和成本问题。

技术实现方案

目前 deck.gl 社区已经通过扩展包的方式实现了对 PMTiles 的支持，主要解决方案有两种：

方案一：使用 TileSourceLayer

社区提供的 @deck.gl-community/layers 包中的 TileSourceLayer 可以直接加载 PMTiles 数据源：

import {TileSourceLayer} from '@deck.gl-community/layers';
import {PMTilesSource} from '@loaders.gl/pmtiles';

const layer = new TileSourceLayer({
  tileSource: new PMTilesSource({url: 'http://example.com/tiles.pmtiles'})
});

方案二：通用数据源加载方式

通过 createDataSource 方法可以更灵活地加载多种格式的切片数据，包括 PMTiles：

import {createDataSource} from '@loaders.gl/core';
import {PMTilesSource, MVTSource} from '@loaders.gl/mvt';

const tileSource = createDataSource(
  'https://example.com/data.pmtiles',
  [PMTilesSource, MVTSource], 
  {}
);

const layer = new TileSourceLayer({ tileSource });

技术优势

1. 性能优化：PMTiles 格式针对云存储进行了优化，减少了小文件请求的数量
2. 成本效益：避免了传统方式中大量小文件存储带来的额外成本
3. 开发便捷：通过现有扩展包即可快速集成，无需等待官方支持

实际应用示例

以下是一个完整的 Svelte 应用示例，展示了如何加载不同的 PMTiles 数据源：

<script>
    import {Deck} from '@deck.gl/core';
    import {TileSourceLayer} from '@deck.gl-community/layers';
    import {createDataSource} from '@loaders.gl/core';
    import {PMTilesSource, MVTSource} from '@loaders.gl/mvt';

    const INITIAL_VIEW_STATE = {
        longitude: -122.4,
        latitude: 37.74,
        zoom: 2,
        minZoom: 1,
        maxZoom: 20,
        pitch: 0,
        bearing: 0
    };

    const data_urls = [
        "https://example.com/sample1.pmtiles",
        "https://example.com/sample2.pmtiles"
    ]

    let selected_data_url = data_urls[0];

    let map;
    onMount(() => {
        let tileSource = createDataSource(
            selected_data_url,
            [PMTilesSource, MVTSource], {}
        )

        const tileLayer = new TileSourceLayer({ tileSource });

        map = new Deck({
            canvas: "deck-canvas",
            initialViewState: INITIAL_VIEW_STATE,
            controller: true,
            layers: [tileLayer]
        });
    })
</script>
<canvas id="deck-canvas"></canvas>

总结

虽然 deck.gl 核心库尚未原生支持 PMTiles 格式，但通过社区扩展包已经可以完美实现这一功能。这种解决方案不仅保持了 deck.gl 原有的高性能特性，还充分利用了 PMTiles 的云存储优势，为开发者提供了更高效、更经济的矢量切片加载方案。随着 PMTiles 格式的普及，未来 deck.gl 官方可能会考虑将其纳入核心功能集。