すべてのプロダクト
Search
ドキュメントセンター

PolarDB:GanosBase ベクター高速レンダリングハンズオンシリーズ 1

最終更新日:Jun 18, 2025

GanosBase の高速 2D ベクターレンダリング機能は、タイリング時間の長期化や過剰なストレージオーバーヘッドなど、従来のタイリングスキームの主な問題を効果的に解決します。さらに、ローカル更新もサポートしています。既存のシステムと比較して、GanosBase は効率、ストレージオーバーヘッド、および機能強化において大幅な改善を実現しています。GanosBase の 3D ベクター可視化機能は、2D ベクタータイリングスキームを拡張して Geometry3D データの可視化をサポートし、大規模な 3D シーンの効果的な表示を可能にします。このトピックでは、例を使用して 2D ベクターピラミッドを作成および更新し、3D ベクターオブジェクトの可視化を実装する方法について説明します。

概要

高速 2D ベクターレンダリング

従来のシステムは、主にオフラインタイリングに依存してベクターデータの可視化をサポートしています。可視化リクエストを受信すると、事前に構築されたタイルが単純に処理され、クライアントに返されます。ただし、この処理スキームには 2 つの大きな欠点があります。1 つ目は遅いことです。大規模なデータセットでオフラインタイリングを実行するには、通常、完了までに数十時間、あるいは数日かかることもあります。2 つ目はリソースを大量に消費することです。最大 16 レベルのズームをサポートするマップサービスでは、数百億のタイルを事前に保存する必要があるため、ストレージのオーバーヘッドが膨大になります。さらに、「遅い」という問題は、データ更新を非フレンドリーにします。この問題は、データ管理機能が弱い GIS システムで特に顕著です。データ更新の内容とそのタイル範囲への影響を認識していないため、小規模なローカル更新であっても、時間と労力を要するタイルの完全な再構築が必要になります。

GanosBase 高速レンダリングエンジンは、大量の 2D ベクターデータ(点、線、ポリゴンを含む)の可視化に特化した高速 2D ベクターレンダリング機能を提供します。この機能は、上記の課題を効果的に解決します。GanosBase は、スパースデータ領域のタイル構築をスキップする革新的なスパースピラミッドインデックス方式を導入しています。また、データベースクエリ最適化と可視性フィルタリングアルゴリズムを組み合わせて、表示効果に影響を与えないデータをフィルタリングします。このアプローチは、スライス時間の長期化と膨大なストレージオーバーヘッドという 2 つの大きな問題点を効果的に解決します。さらに、GanosBase は、スパースピラミッドの動的更新をサポートしています。ベクターデータが小範囲でローカル更新されると、GanosBase は影響を受けるタイルを自動的に識別し、更新を可能な限り最小限の範囲に制限するため、スパースピラミッド全体を再構築する必要がなくなります。これにより、更新効率が大幅に向上します。テストでは、7,000 万件の住宅記録を含むデータセットのスパースピラミッドの構築は、標準の 8 コア PolarDB for PostgreSQL クラスタでわずか 6 分しかかかりませんでした。さらに、100 万件を超えるレコードが更新された場合、スパースピラミッドは 1 分未満で更新できます。可視化リクエストに応じてタイルを返す平均時間は 1 ミリ秒未満です。このような高性能により、必要なディスク容量は約 3 GB のみです。

3D ベクター可視化

GanosBase は、2D ベクターの高速レンダリングをサポートするだけでなく、Alibaba Cloud の DataV チームと協力して、3D ベクターデータの可視化のサポートも開発しました。既存の 2D ベクタータイリング標準を拡張することで、GanosBase と DataV は共同で、次の図に示すように、3D ベクターオブジェクトを可視化するための 3D ベクタータイリングを実現しました。

2

手順

高速 2D ベクターレンダリング

データテーブルの準備

Geometry 属性列を含むデータテーブルを準備します。GanosBase は、ST_GeomFromText、ST_GeomFromWKT、ST_GeomFromWKB など、ベクターデータをデータテーブルに書き込むためのさまざまな関数を備えています。GanosBase のベクター高速レンダリング機能を使用するには、データテーブルにプライマリキー ID 列と Geometry 属性列が含まれていることだけを確認してください。

  1. GanosBase の高速レンダリング機能を使用する前に、ganos_geometry_pyramid 高速レンダリング拡張機能をインストールします。

    CREATE EXTENSIION ganos_geometry_pyramid CASCADE;
  2. プライマリキー ID 列と geom 列のみを含むデータテーブルを作成します。

    CREATE TABLE try_ganos_viz(id SERIAL NOT NULL, geom Geometry);
  3. スクリプトまたはその他のツールを使用して、ベクターデータセットをテーブルにインポートします。スクリプトまたはツールは、次のような SQL 文を生成できる必要があります。

    INSERT INTO try_ganos_viz(geom) VALUES (ST_GeomFromText('WKT FORMAT TEXT', 4326));

    この SQL 文はデータを 4326 座標系形式で保存しますが、他の座標系形式を指定することもできます。

  4. すべてのデータをインポートした後、Geometry 属性列に空間インデックスを作成します。

    CREATE INDEX ON try_ganos_viz USING gist(geom);

スパースピラミッドの構築

St_BuildPyramid

スパースピラミッド構築機能は、ST_BuildPyramid 関数にカプセル化されています。詳細については、「ST_BuildPyramid」をご参照ください。以下では、例を通して詳細に紹介します。

  • デフォルトパラメータを使用してスパースピラミッドを作成します。

    SELECT ST_BuildPyramid('try_ganos_viz', 'geom', 'id', '');
  • スパースピラミッドを構築するときに並列処理レベルを指定します。この例では、32 の並列スレッドでピラミッドを構築します。

    SELECT ST_BuildPyramid('try_ganos_viz', 'geom', 'id', '{"parallel":32}');
  • スパースピラミッドを構築するときにタイルサイズと拡張を指定します。

    SELECT ST_BuildPyramid('try_ganos_viz', 'geom', 'id', '{"parallel":32, "tileSize":4096, "tileExtend":128}');
  • GanosBase では、パフォーマンスとストレージコストを総合的に考慮して、スパースピラミッドの構造を制御できます。maxLevel パラメータと splitSize パラメータを使用して、この制御を実現できます。

    • クエリのパフォーマンスをストレージコストよりも優先する場合は、splitSize 値を小さく設定できます。これにより、クエリを実行する前にできるだけ多くのタイルが事前に構築されます。タイルに含まれる要素が splitSize 値よりも少ない場合、クエリ中に動的に構築されます。

    • ストレージ コストを優先する場合は、より大きな splitSize 値を設定して、維持する必要のあるタイルの数を減らすことができます。さらに、より小さい maxLevel 値を設定してピラミッドの高さを制御することにより、タイルの数を減らすこともできます。

    次の例では、maxLevel 値が 10、splitSize 値が 1000 のスパースピラミッドが構築されます。

    SELECT ST_BuildPyramid('try_ganos_viz', 'geom', '{"maxLevel":10, "splitSize":1000}');
  • buildRules パラメータは、スパースピラミッドの構築ルールを柔軟に制御するために提供されています。たとえば、レベル 0 ~ 5 のタイルでは、面積が 100 を超えるフィーチャのみを可視化するように指定できます。これは、次の文を使用して実現できます。

    SELECT ST_BuildPyramid('try_ganos_viz', 'geom', '{"maxLevel":10, "buildRules":[
                           {"level":[0,1,2,3,4,5], "value":{"filter": "ST_Area(geom)>100"}}
    ]}');

    SQL 文の filter 条件は、WHERE 句で使用できる任意の有効な SQL 条件にすることができます。これにより、スパースピラミッドの構築中にフィーチャを柔軟にカスタマイズしてフィルタリングできます。

ST_BuildPyramidUseGeomSideLen

ST_BuildPyramidUseGeomSideLen 関数は、ベクターピラミッドを構築するための ST_BuildPyramid 関数の最適化バージョンです。面積の小さいフィーチャを多数含む大規模なデータセットを処理する場合のパフォーマンスを向上させるように設計されています。詳細については、「ST_BuildPyramidUseGeomSideLen」をご参照ください。

ST_BuildPyramidUseGeomSideLen 関数を使用する前に、データテーブルに実数属性列を作成して、各ジオメトリの ST_XMax(geom)-ST_XMin(geom) と ST_YMax(geom)-ST_YMin(geom) の大きい方の値を記録します。さらに、この新しい列にインデックスを作成する必要があります。たとえば、try_ganos_viz テーブルに max_side_len 列を追加し、その列に B ツリーインデックスを作成できます。

ALTER TABLE try_ganos_viz
ADD COLUMN max_side_len DOUBLE PRECISION;

CREATE OR REPLACE FUNCTION add_max_len_values() RETURNS VOID AS $$
DECLARE
  t_curs CURSOR FOR
    SELECT * FROM try_ganos_viz;
  t_row usbf%ROWTYPE;
  gm GEOMETRY;
  x_min DOUBLE PRECISION;
  x_max DOUBLE PRECISION;
  y_min DOUBLE PRECISION;
  y_max DOUBLE PRECISION;
BEGIN
  FOR t_row IN t_curs LOOP
    SELECT t_row.geom INTO gm;
    SELECT ST_XMin(gm) INTO x_min;
    SELECT ST_XMax(gm) INTO x_max;
    SELECT ST_YMin(gm) INTO y_min;
    SELECT ST_YMax(gm) INTO y_max;
    UPDATE try_ganos_viz
      SET max_side_len = GREATEST(x_max - x_min, y_max - y_min)
    WHERE CURRENT OF t_curs;
  END LOOP;
END;
$$ LANGUAGE plpgsql;
SELECT add_max_len_values();

CREATE INDEX ON try_ganos_viz USING btree(max_side_len);

ST_BuildPyramidUseGeomSideLen を呼び出すときは、新しい列の名前を指定する必要があり、残りのパラメータは ST_BuildPyramid のパラメータと同じです。追加された max_side_len 列を使用して try_ganos_viz テーブルにスパースピラミッドを構築するには、次の文を実行します。

SELECT ST_BuildPyramidUseGeomSideLen('try_ganos_viz', 'geom', 'max_side_len', 'id', '{"parallel":32}');

ST_BuildPyramidUseGeomSideLen はさまざまな構成パラメータもサポートしており、スパースピラミッドの構築ルールを柔軟に調整できます。

ピラミッドの更新

テーブル内のデータが更新されると、GanosBase はピラミッドを更新するための ST_UpdatePyramid 関数を提供します。データ更新の境界ボックス範囲を指定するだけで済みます。詳細については、「ST_UpdatePyramid」をご参照ください。

  • 経度と緯度の範囲 [(lon1, lat1), (lon2, lat2)] 内に複数のデータ行を挿入したとします。影響を受けるすべてのタイルを更新したいとします(maxLevel=16 と仮定)。次の文を実行できます。

    SELECT ST_UpdatePyramid('try_ganos_viz', 'geom', 'id', ST_MakeEnvelope(0,-10,20,30, 4326), '{"updateBoxScale":100000}');

    この SQL 文では、lon1=0lat1=-10lon2=20lat2=30 と仮定します。

  • 完全な更新を実行したくない場合は、より小さい updateBoxScale パラメーター値を指定することで、より小さいレベルのタイルの更新を回避できます。次の文を実行すると、わずかに大きい範囲のタイルと、その下位レベルのタイルのみが更新されます。

    SELECT ST_UpdatePyramid('try_ganos_viz', 'geom', 'id', ST_MakeEnvelope(0,-10,20,30, 4326), '{"updateBoxScale":2}');
説明
  • ST_UpdatePyramid を呼び出すときは、並列処理の度合いを指定する必要はありません。この関数は、ST_BuildPyramid または ST_BuildPyramidUseGeomSideLen の最初の呼び出しで指定された並列処理値を自動的に使用します。

  • ピラミッドの更新には、スパースピラミッドの更新、古いタイルの削除、新しいタイルの生成が含まれるため、広範囲のデータが更新された場合は、ST_BuildPyramid または ST_BuildPyramidUseGeomSideLen を直接呼び出してピラミッドを再構築することをお勧めします。

ベクタータイルの取得

ベクタータイルには、フィーチャ情報を保持できるという利点があります。マップサービスでは、従来のラスタータイルと比較して、ベクタータイルはよりシームレスなズームを実現し、より優れた視覚効果を提供できます。GanosBase は、リアルタイムでベクタータイルを取得するための ST_Tile 関数を提供します。詳細については、「ST_Tile」をご参照ください。

次のいずれかの文を実行して、ズームレベル 1、x 座標 1、y 座標 0 で中国をカバーするタイルを取得します。

SELECT ST_Tile('try_ganos_viz', '1_1_0');

SELECT ST_Tile('try_ganos_viz', 1, 0, 1);

ラスタータイルの取得

GanosBase は、現在も広く使用されているラスタータイルもサポートしています。ラスタータイルは画像ベースのタイルであり、ベクタータイルとは異なり、クライアント側での動的レンダリングをサポートしていません。そのため、クライアント側のシステムパフォーマンスへの要求は少なくなります。GanosBase は、ST_AsPng 関数を提供します。これにより、データベース側でベクターデータをラスタータイルに動的にレンダリングし、結果をクライアントに返すことができます。この関数は基本的なラスターシンボル化機能を備えており、複雑なシンボル化を必要としない軽量のシナリオに適しています。詳細については、「ST_AsPng」をご参照ください。

次の文を実行して、タイル ID が「1_1_0」のラスタータイルを返します。これは、指定されたレンダリングパラメータに従ってレンダリングされ、PNG 形式で出力されます。

SELECT ST_AsPng('try_ganos_viz', '1_1_0', '{"point_size":5, "line_width":2, "line_color":"#003399FF", 
                "fill_color":"#6699CCCC", "background":"#FFFFFF00"}');

3D ベクター可視化

データテーブルの準備

Geometry3D 属性列を含むデータテーブルを準備します。ST_GeomFromText、ST_GeomFromWKT、ST_GeomFromWKB などの関数を使用して、データをテーブルにインポートできます。

  1. GanosBase の 3D ベクター可視化機能を使用する前に、ganos_geometry 3D ベクター可視化拡張機能をインストールします。

    CREATE EXTENSIION ganos_geometry CASCADE;
  2. プライマリキー idgeom 列のみを含むデータテーブルを作成します。

    CREATE TABLE try_ganos_viz3d(id SERIAL NOT NULL, geom Geometry);

3D ベクタータイルの取得

3D ベクターデータ可視化機能を使用する前に、GanosBase が提供する 2 つの関数、ST_AsMVTGeom3D と ST_AsMVT3D を呼び出す必要があります。

  • ST_AsMVTGeom3D

    ST_AsMVTGeom3D 関数は、PostGIS の ST_AsMVTGeom の拡張機能であり、特に 3D ベクターデータ用に設計されています。 Geometry3D データの座標空間を MVT 座標空間への変換を可能にし、オプションでタイルの境界ボックスに基づいてデータをクリップします。 詳細については、「ST_AsMVTGeom3D」をご参照ください。 次の例は、その使用方法を示しています。

    SELECT ST_AsText(ST_AsMVTGeom3D(ST_Transform('SRID=4326; LINESTRING(-10 -10 30, -10 -20 30)'::geometry, 3857), ST_TileEnvelope(1, 0, 0))) AS geom;

    サンプル結果:

                                            geom                                        
    ------------------------------------------------------------------------------------
     MULTILINESTRING Z ((3868.44444444444 4324.7197219642 30,3868.44444444444 4352 30))
    (1 row)
  • ST_AsMVT3D

    ST_AsMVT3D 関数は、PostGIS の 2D ベクターデータ用の ST_AsMVT 関数と同様に機能し、複数のデータ行を単一の 3D ベクタータイルに集約します。各データ行は、MVT 座標空間の Geometry3D データに変換され、これらの集約データがタイルレイヤーを形成します。詳細については、「ST_AsMVT3D」をご参照ください。次の例は、その使用方法を示しています。

    WITH mvtgeom AS
    (
      SELECT ST_AsMVTGeom3D(
        ST_Transform('SRID=4326; MULTIPOLYGON(((100 50 0, -100 50 1, -100 -50 2, 100 -50 3, 100 50 0)), ((0 0 0, 1 0 1, 2 2 2, 0 0 0)))'::geometry, 3857),
        ST_TileEnvelope(1, 0, 0)) AS geom,  'test' AS name -- geometry と name を選択
    )
    SELECT ST_AsMVT3D(mvtgeom.*) FROM mvtgeom; -- mvtgeom から MVT を選択

    サンプル結果:

                                                                                                                         st_asmvt3d                                                                                                                     
    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
     \x1a760a0764656661756c74125812020000180322500d8044a842b83116ff23d80105802400080f0d810481041d162e000e2e590e0f0dd920dc0405168024d70106c727f3160d0f0dc827f4160e1600f31615c72700080f0d0000001600cc1808c80300000f1a046e616d6522060a04746573742880207802
    (1 行)

ベストプラクティス

この例では、GanosBase の高速 2D ベクターレンダリング機能を使用して、Web マップサービスを迅速に構築する方法について説明します。

フルスタックアーキテクチャ

この Web マップサービスは、データベースサーバー、Python ベースのバックエンド、およびクライアントサイドアプリケーションの 3 つの主要コンポーネントで構成されています。全体的なアーキテクチャは、以下の図に示されています。

データベース

マップデータをデータベースにインポートし、スパースピラミッドを構築するために必要なインデックスを作成します。詳細については、「高速 2D ベクターレンダリング」をご参照ください。

サーバーサイドコード

コードの簡潔さを実現し、論理的な記述に焦点を当てるために、バックエンド言語として Python、Web フレームワークとして Flask、データベース接続のために Psycopg2 ( pip install psycopg2 でインストール可能) を使用します。実装は基本的な機能を提供します。パフォーマンスのボトルネックが発生した場合、特定のプラットフォームおよびフレームワークに基づいて最適化を行い、応答時間を改善できます。バックエンドでは、最初にベクターピラミッドを確立し、次に 2 つのインターフェイスを実装します。ベクタータイルインターフェイスは points テーブルのデータを利用し、ラスタータイルインターフェイスは buildings テーブルのデータを利用し、フロントエンドで直接呼び出すためのスタイルが定義されています。明確にするために、バックエンドコードはベクターとラスターの両方のインターフェイスを提供しますが、実際のプラクティスではニーズに合ったインターフェイスを選択できます。

# -*- coding: utf-8 -*-
# @File : Vector.py

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

# 接続パラメーター。
CONNECTION = "dbname=<database_name> user=<user_name> password=<user_password> host=<host> port=<port>"


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 VectorViewer:
    def __init__(self, connect, table_name, column_name, fid):
        self.table_name = table_name
        self.column_name = column_name
        # 接続プールを作成します。
        self.connect = ReallyThreadedConnectionPool(5, 10, connect)
        # ピラミッドテーブル名を定義します。
        self.pyramid_table = f"{self.table_name}_{self.column_name}"
        self.fid = fid
        self.tileSize = 512
        # self._build_pyramid()

    def _build_pyramid(self):
        """ピラミッドを作成する"""
        config = {
            "name": self.pyramid_table,
            "tileSize": self.tileSize
        }
        sql = f"select st_BuildPyramid('{self.table_name}','{self.column_name}','{self.fid}','{json.dumps(config)}')"
        self.poll_query(sql)

    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]


class PngViewer(VectorViewer):
    def get_png(self, x, y, z):
        # デフォルトパラメーター。
        config = {
            "point_size": 5,
            "line_width": 2,
            "line_color": "#003399FF",
            "fill_color": "#6699CCCC",
            "background": "#FFFFFF00"
        }
        # psycopg2 を使用する場合、バイナリデータを 16 進数文字列として返す方が効率的です。
        sql = f"select encode(st_aspng('{self.pyramid_table}','{z}_{x}_{y}','{json.dumps(config)}'),'hex')"
        result = self.poll_query(sql)
        # データが 16 進数文字列として返された場合、変換を実行して元のバイナリデータに戻します。
        result = binascii.a2b_hex(result)
        return result


class MvtViewer(VectorViewer):
    def get_mvt(self, x, y, z):
        # psycopg2 を使用する場合、バイナリデータを 16 進数文字列として返す方が効率的です。
        sql = f"select encode(st_tile('{self.pyramid_table}','{z}_{x}_{y}'),'hex')"
        result = self.poll_query(sql)
        # データが 16 進数文字列として返された場合、変換を実行して元のバイナリデータに戻します。
        result = binascii.a2b_hex(result)
        return result


app = Flask(__name__)


@app.route('/vector')
def vector_demo():
    return send_from_directory("./", "Vector.html")

# テーブル名、フィールド名などを定義します。


pngViewer = PngViewer(CONNECTION, 'usbf', 'geom', 'gid')


@app.route('/vector/png/<int:z>/<int:x>/<int:y>')
def vector_png(z, x, y):
    png = pngViewer.get_png(x, y, z)
    return Response(
        response=png,
        mimetype="image/png"
    )


mvtViewer = MvtViewer(CONNECTION, 'points', 'geom', 'gid')

@app.route('/vector/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"
    )


if __name__ == "__main__":
    app.run(port=5000, threaded=True)

上記のコードを Vector.py ファイルとして保存し、python Vector.py コマンドを使用して実行してサービスを開始します。コードから、使用されているプログラミング言語またはフレームワークに関係なく、ベクタータイルまたはラスタータイルの SQL 文をインターフェイスにカプセル化しさえすれば、同じ機能を実現できることがわかります。

従来のマップサービスを公開するのと比較して、GanosBase のベクターピラミッド機能を使用してオンラインの可視化を実現することは、より軽量で実用的な選択肢です。

  • ラスタータイルの場合、スタイルを制御するためにコードを変更すると、柔軟性が大幅に向上します。

  • サードパーティのコンポーネントを導入したり、特別な最適化を実行したりすることなく、満足のいく応答パフォーマンスを実現できます。

  • このサービスは、使い慣れたプログラミング言語とフレームワークを自由に選択でき、複雑な専門的なパラメーター構成を必要としないため、地理の専門家以外の人にも使いやすいものとなっています。

クライアントサイドコード

この例では、Mapbox をフロントエンドマップフレームワークとして使用して、バックエンドによって提供されるベクタータイルレイヤーとラスタータイルレイヤーを可視化します。また、ベクタータイルレイヤーのレンダリングパラメーターも構成します。説明を簡単にするために、フロントエンドコードにはベクターレイヤーとラスターレイヤーの両方が含まれていますが、特定の要件に基づいて必要なレイヤーを選択できます。バックエンドコードと同じディレクトリに Vector.html という名前の新しいファイルを作成し、次のコードを追加します。バックエンドサービスを開始した後、http://localhost:5000/vector からアクセスできます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ベクタータイルのデモ</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.min.css"
      rel="stylesheet"
    />
  </head>
  <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <body>
    <div id="map" style="height: 100vh" />
    <script>
      const sources = {
        osm: {
          type: "raster",
          tiles: ["https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
          tileSize: 256,
        },
      };
      const layers = [
        {
          id: "base_map",
          type: "raster",
          source: "osm",
          layout: { visibility: "visible" },
        },
      ];
      const map = new mapboxgl.Map({
        container: "map",
        style: { version: 8, layers, sources },
      });
      map.on("load", async () => {
        map.resize();

        // ラスタータイルデータソースを追加します。
        map.addSource("png_source", {
          type: "raster",
          minzoom: 1,
          tiles: [`${window.location.href}/png/{z}/{x}/{y}`],
          tileSize: 512,
        });
        // ラスタータイルレイヤーを追加します。
        map.addLayer({
          id: "png_layer",
          type: "raster",
          layout: { visibility: "visible" },
          source: "png_source",
        });

        // ベクタータイルデータソースを追加します。
        map.addSource("mvt_source", {
          type: "vector",
          minzoom: 1,
          tiles: [`${window.location.href}/mvt/{z}/{x}/{y}`],
          tileSize: 512,
        });

        // ベクタータイルレイヤーを追加し、ベクタータイルにスタイルを適用します。
        map.addLayer({
          id: "mvt_layer",
          paint: {
            "circle-radius": 4,
            "circle-color": "#6699CC",
            "circle-stroke-width": 2,
            "circle-opacity": 0.8,
            "circle-stroke-color": "#ffffff",
            "circle-stroke-opacity": 0.9,
          },
          type: "circle",
          source: "mvt_source",
          "source-layer": "points_geom",
        });

      });
    </script>
  </body>
</html>

概要

GanosBase の高速 2D ベクターレンダリング機能は、数十億規模レベルの 2D ベクターデータを効果的に可視化でき、従来のタイリング方式におけるタイリング時間とストレージオーバーヘッドの課題を大幅に解決します。さらに、この機能はローカル更新をサポートしています。既存のシステムと比較して、GanosBase は効率、ストレージオーバーヘッド、および機能強化において大幅な改善を実現しています。GanosBase の 3D ベクター可視化機能は、2D ベクタータイリング方式を拡張して Geometry3D データの可視化をサポートし、大規模 3D シーンの効果的な表示を可能にします。