How to call the table in the database in the front-end code after using and connecting to postgresql

[thunder-gzy]

By accessing http://127.0.0.1:8243/catalog, you can get the table information in the postgresql database, but how to call these vector data in the front end? Is there a demo?

[sharkAndshark]

A demo Openlayers code is here when there is a tiles source named world_cities:

import "./style.css";
import { Map, View } from "ol";
import MVT from "ol/format/MVT.js";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorTileSource from "ol/source/VectorTile.js";

let my_layer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVT(),
    url: "http://localhost:3000/world_cities/{z}/{x}/{y}", // you could replace the world_cities with the tile source name in your /catalog, and you could also get the URL by visiting http://127.0.0.1:8243/the_tilesource_name_in_your_catalog
  }),
});

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    my_layer,
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

[sharkAndshark]

If there are two spatial table points1 and points2, then the catalog should be like this:

{
  "tiles": {
    "points1": {  //there is a tile source named points1, you could get its url in http://your_ip:your_port/points1
      "content_type": "application/x-protobuf",
      "description": "public.points1.geom"
    },
    "points2": { ////there is a tile source named points2, you could get its url in http://your_ip:your_port/points2
      "content_type": "application/x-protobuf",
      "description": "public.points2.geom"
    }
  },
  "sprites": {},
  "fonts": {}
}

1. Visit /ctalog to get all the tile source names. points1 and points2 in this example.
2. Visit /points1 to get the URL which will be used in your Maplibre or Openlayers , and other informations in TileJson.