PolarDB：GanosBase向量快顯功能上手系列二：增強MVT能力

背景

傳統地圖可視化服務為提高載入速度，將待顯示資料進行分層緩衝，即事先將同一份資料對應每個層級的顯示映像進行多次儲存。在使用時，根據當前瀏覽介面的層級動態擷取相應層級的映像，並將其返回給用戶端以完成可視化。這種傳統方法被稱為柵格切片，其優點在於可視化效率高且對顯示端的硬體要求較低。然而，其缺點包括預切片時間長、儲存開銷大和更新不夠友好。此外，用戶端顯示效果相對呆板，只能看到預先切好的圖片樣式所呈現的資料。對於層級間的縮放則是放大或縮小當前層的圖片，直接切換到相鄰層的圖片，導致層級間的過渡生硬。

近年來，隨著硬體技術的不斷髮展以及對顯示效果要求的提升，動態向量切片技術愈發受到歡迎。首先，向量切片是指將待顯示資料的向量資訊記錄到一種稱為向量瓦片的載體上。所記錄的資訊包括向量的類型（點、線或面）以及組成該向量的各個點在向量瓦片上的相對座標等。用戶端軟體（包括瀏覽器或GIS軟體）能夠提取向量瓦片中的向量資訊，並根據自訂的顯示樣式（如點或線的顏色、面的填充色等）繪製每個向量。和柵格切片的共同點在於，都需要根據當前用戶端軟體的顯示層級擷取同層級的瓦片。不同之處在於，柵格切片的瓦片為樣式固定的位元影像圖片，而向量瓦片則保留了各個資料的向量資訊儲存結構。通俗地講，柵格切片是將拍攝的照片直接展示給用戶端，而向量切片則是向前端軟體指明應展示的內容，並根據自訂繪畫風格逐筆逐畫地進行渲染。隨著硬體技術的發展，用戶端軟體也能夠高效地完成向量瓦片的繪製。MVT（Mapbox Vector Tile）是一種廣泛應用於儲存和傳輸向量瓦片的標準格式。主流前端軟體均支援MVT，本文後續將以MVT指代向量瓦片。動態向量切片是指後端系統根據用戶端軟體當前的顯示層級和範圍，動態產生一系列MVT（地圖向量瓦片），並將其返回給前端進行可視化展示。

向量快顯

GanosBase提供向量動態切片函數以實現向量快顯，可顯著提高可視化效率，同時有效解決了小比例尺MVT顯示耗時較長的問題。與PostGIS相比，小比例尺MVT的可視化效率提升可達60%以上。下圖展示了GanosBase的ST_AsMVTEx函數與PostGIS的ST_AsMVT的效果對比。

GanosBase提供了以下三個2D向量動態切片函數：

• ST_AsMVTGeomEx函數：為PostGIS的ST_AsMVTGeom的增強，用於將向量資料從地理空間座標系轉換為MVT的像素座標系。

• ST_AsMVTEx函數：為PostGIS的ST_AsMVT的增強，用於將一系列經過座標系轉換的向量資料的資訊彙總並寫入MVT。

• ST_IsRandomSampled函數：允許按任意百分比對資料進行隨機採樣，從而便於快速查看超巨量資料集的大致顯示樣式。

WITH mvtgeomex AS (
  SELECT ST_AsMVTGeomEx(geom, ST_Transform(ST_TileEnvelope(5, 10, 20), 4326), 2) AS geom
  FROM data_table
  WHERE geom && ST_Transform(ST_TileEnvelope(5, 10, 20), 4326)
)
SELECT ST_AsMVT(mvtgeomex.*) FROM mvtgeomex;

-- 設定scale_factor=4
WITH mvtgeomex AS (
  SELECT ST_AsMVTGeom(geom, ST_Transform(ST_TileEnvelope(5, 10, 20), 4326)) AS geom
  FROM data_table
  WHERE geom && ST_Transform(ST_TileEnvelope(5, 10, 20), 4326)
)
SELECT ST_AsMVTEX(mvtgeomex.*, 4) FROM mvtgeomex;

-- 設定scale_factor=8, mvt_size_limit=1000000
WITH mvtgeomex AS (
  SELECT ST_AsMVTGeom(geom, ST_Transform(ST_TileEnvelope(5, 10, 20), 4326)) AS geom
  FROM data_table
  WHERE geom && ST_Transform(ST_TileEnvelope(5, 10, 20), 4326)
)
SELECT ST_AsMVTEX(mvtgeomex.*, 8, 1000000) FROM mvtgeomex;

CREATE OR REPLACE FUNCTION ST_GetMVT(z integer, x integer, y integer) RETURNS BYTEA
AS $$
BEGIN
  DECLARE
    sample_rate integer;
  BEGIN
    IF z >= 0 AND z < 12 THEN
      sample_rate := 25;
    ELSIF z >= 12 AND z < 14 THEN
      sample_rate := 50;
    ELSIF z >= 14 AND z < 15 THEN
      sample_rate := 75;
    ELSE
      RETURN  
        st_asmvt(mvtgeom) FROM 
        (SELECT st_asmvtgeom(geometry, st_transform(ST_tileenvelope(z, x, y), 4326))
          FROM YOU_TABLE_NAME
          WHERE geometry && st_transform(ST_tileenvelope(z, x, y), 4326)) AS mvtgeom;
    END IF;

    -- Call ST_IsRandomSampled with the calculated sample_rate
    RETURN 
      st_asmvt(mvtgeom) FROM
      (SELECT st_asmvtgeom(geometry, st_transform(ST_tileenvelope(z, x, y), 4326))
      FROM YOU_TABLE_NAME
      WHERE st_israndomsampled(ROW(geometry), sample_rate) AND geometry && st_transform(ST_tileenvelope(z, x, y), 4326)) AS mvtgeom;
  END;
END;
$$ LANGUAGE plpgsql;

最佳實務

以下使用代碼構建一個簡單的可視化程式，用於查看動態向量切片的效果。該程式包含一個Python檔案和一個HTML檔案。且這兩個檔案置於同一目錄中，在執行Python代碼後，在瀏覽器地址欄輸入localhost:50000即可訪問。需要注意的是，需要事先安裝該Python代碼運行所需的依賴包（在終端執行命令：pip install psycopg2-binary Flask）。

以下Python代碼使用ST_IsRandomSampled函數，設定的採樣率為10%。請注意，需根據具體資料庫情況替換串連參數、表名和欄位名。此外，您也可以參照程式碼範例，根據所需功能更新SQL語句。

from psycopg2 import pool
from threading import Semaphore
from flask import Flask, Response, send_from_directory
import binascii


## 串連參數
CONNECTION = "dbname=資料庫名 user=使用者名稱 host=HOST port=連接埠 password=密碼"

TABLE_NAME = "表名"
GEOMETRY_FIELD_NAME = "幾何欄位名"


class ReallyThreadedConnectionPool(pool.ThreadedConnectionPool):
    def __init__(self, minconn, maxconn, *args, **kwargs):
        self._semaphore = Semaphore(maxconn)
        super().__init__(minconn, maxconn, *args, **kwargs)

    def getconn(self, *args, **kwargs):
        self._semaphore.acquire()
        return super().getconn(*args, **kwargs)

    def putconn(self, *args, **kwargs):
        super().putconn(*args, **kwargs)
        self._semaphore.release()


class MvtViewer:
    def __init__(self, connect):
        self.connect = ReallyThreadedConnectionPool(5, 10, connect)

    def poll_query(self, query: str):
        pg_connection = self.connect.getconn()
        pg_cursor = pg_connection.cursor()
        pg_cursor.execute(query)
        record = pg_cursor.fetchone()
        pg_connection.commit()
        pg_cursor.close()
        self.connect.putconn(pg_connection)
        if record is not None:
            return record[0]

    def get_mvt(self, x, y, z):
        bounds = f"st_transform(st_tileenvelope({z},{x},{y}),4326)"
        # 根據需要使用的函數，更新下列sql語句
        sql = f'SELECT encode(ST_AsMVT(tile,\'mvt\'),\'hex\') FROM (SELECT  ST_AsMVTGeom({GEOMETRY_FIELD_NAME},{bounds}, 4096, 512, true) as {GEOMETRY_FIELD_NAME} FROM {TABLE_NAME} where({GEOMETRY_FIELD_NAME} && {bounds} AND ST_IsRandomSampled(ROW({GEOMETRY_FIELD_NAME}), 10)) ) AS tile'
        result = self.poll_query(sql)
        result = binascii.a2b_hex(result)
        print("{} {} {}={}".format(z, x, y, len(result)))
        return result


app = Flask(__name__)
mvtViewer = MvtViewer(CONNECTION)


@app.route('/mvt/<int:z>/<int:x>/<int:y>')
def vector_mvt(z, x, y):
    mvt = mvtViewer.get_mvt(x, y, z)
    return Response(
        response=mvt,
        mimetype="application/vnd.mapbox-vector-tile"
    )


@app.route('/<asset>')
def pyramid_asset(asset):
    return send_from_directory("./", asset)


@app.route('/')
def pyramid_demo():
    return send_from_directory("./", "viewer.html")


if __name__ == "__main__":
    app.run(port=50000, host="0.0.0.0", threaded=True)

HTML檔案的內容如下，變數CENTER表示初始可視化經緯度，注意根據資料集類型更新type變數。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pyramid Viewer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.min.js"></script>
</head>

<body>
  <div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;"></div>
  <script>
    let CENTER = [目標經度, 目標緯度]
    <!-- 樣本： let CENTER = [106, 29] -->
    let YOUR_TOKEN = 'pk.eyJ1Ijoia3pmaWxlIiwiYSI6ImNqbHZueXdlZjB2cG4zdnFucGl1OHJsMjkifQ.kW_Utrh8ETQltRk6fnpa_A'

    mapboxgl.accessToken = YOUR_TOKEN;
    const map = new mapboxgl.Map({
      container: 'map',
      style: { "version": 8, "layers": [], "sources": {} },
      center: CENTER,
      zoom: 8
    })
    map.on("load", () => {
      map.addSource('mvt_source', {
        type: 'vector',
        minzoom: 3,
        tiles: [`${window.location.href}mvt/{z}/{x}/{y}`],
        tileSize: 512,
      });
      map.addLayer({
        minzoom: 3,
        id: 'mvt',
        // 面是fill,點是circle,線是line
        type: 'line',
        source: 'mvt_source',
        'source-layer': 'mvt',
      });
    });
  </script>
</body>

</html>

總結

GanosBase新增了增強2D向量動態切片函數ST_IsRandomSampled、ST_AsMVTGeomEx和ST_AsMVTEx。其中，ST_IsRandomSampled能夠在全域範圍內減少不同層級的MVT大小。ST_AsMVTGeomEx和ST_AsMVTEx則能夠顯著減小小比例尺MVT的體積。這三個函數可以單獨使用，也可以結合使用。您可以根據需要設定合適的參數值，以更好地發揮新增函數的效果。