feat(lambda-tiler): Provide support for Arcgis online vector map. BM-78 (#2403)

* Provide support for arcgis online vector mapl]

* Fix some minor issues.

Author: Wentao-Kuang

packages/config/src/config/vector.style.ts

@@ -15,6 +15,22 @@ interface SourceRaster {
   attribution?: string;
 }
 
+/**
+ * https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
+ */
+interface Layer {
+  id: string;
+  type: string;
+  filter?: unknown[];
+  layout?: unknown;
+  minzoom?: number;
+  maxzoom?: number;
+  metadata?: unknown;
+  paint?: unknown;
+  source?: string;
+  'source-layer'?: string;
+}
+
 type Source = SourceVector | SourceRaster;
 
 export type Sources = Record<string, Source>;
@@ -41,7 +57,7 @@ export interface StyleJson {
   sources: Sources;
 
   /** Layers will be drawn in the order of this array. */
-  layers: unknown[];
+  layers: Layer[];
 }
 
 export interface ConfigVectorStyle extends BaseConfig {

packages/lambda-tiler/src/arcgis/arcgis.style.json.ts

@@ -0,0 +1,81 @@
+import { Config, Sources, StyleJson, TileSetType } from '@basemaps/config';
+import { Env, fsa } from '@basemaps/shared';
+import { HttpHeader, LambdaHttpRequest, LambdaHttpResponse } from '@linzjs/lambda';
+import { convertRelativeUrl } from '../routes/tile.style.json.js';
+import { Etag } from '../util/etag.js';
+import { NotFound, NotModified } from '../util/response.js';
+import { Validate } from '../util/validate.js';
+
+interface StyleGet {
+  Params: {
+    tileSet: string;
+  };
+}
+
+function tileserverUrl(tileSet: string, apiKey: string): string {
+  const host = Env.get(Env.PublicUrlBase) ?? '';
+  const url = `/v1/arcgis/rest/services/${tileSet}/VectorTileServer`;
+  const fullUrl = new URL(fsa.join(host, url));
+  fullUrl.searchParams.set('api', apiKey);
+  fullUrl.searchParams.set('f', 'json');
+  return fullUrl.toString().replace(/%7B/g, '{').replace(/%7D/g, '}');
+}
+
+function convertStyleJson(tileSet: string, style: StyleJson, apiKey: string): StyleJson {
+  const sources: Sources = JSON.parse(JSON.stringify(style.sources));
+  // Only keep the vector layer and update the source url
+  for (const [key, value] of Object.entries(sources)) {
+    if (value.type === 'vector') {
+      value.url = tileserverUrl(tileSet, apiKey);
+      sources[key] = value;
+    } else {
+      delete sources[key];
+    }
+  }
+
+  // Remove all the not vector layers.
+  const layers = [];
+  for (const layer of style.layers) {
+    if (layer.source != null && !sources.hasOwnProperty(layer.source)) continue;
+    layers.push(layer);
+  }
+
+  return {
+    version: 8,
+    id: style.id,
+    name: style.name,
+    sources,
+    layers,
+    metadata: style.metadata ?? {},
+    glyphs: convertRelativeUrl(style.glyphs),
+    sprite: convertRelativeUrl(style.sprite),
+  } as StyleJson;
+}
+
+export async function arcgisStyleJsonGet(req: LambdaHttpRequest<StyleGet>): Promise<LambdaHttpResponse> {
+  const apiKey = Validate.apiKey(req);
+  const tileSet = await Config.TileSet.get(Config.TileSet.id(req.params.tileSet));
+  if (tileSet?.type !== TileSetType.Vector) return NotFound();
+
+  const style = req.query.get('style');
+  const styleName = style ? style : 'topographic'; // Defalut to topographic style
+
+  // Get style Config from db
+  const dbId = Config.Style.id(styleName);
+  const styleConfig = await Config.Style.get(dbId);
+  if (styleConfig == null) return NotFound();
+
+  // Prepare sources and add linz source
+  const styleJson = convertStyleJson(tileSet.name, styleConfig.style, apiKey);
+  const data = Buffer.from(JSON.stringify(styleJson));
+
+  const cacheKey = Etag.key(data);
+  if (Etag.isNotModified(req, cacheKey)) return NotModified();
+
+  const response = new LambdaHttpResponse(200, 'ok');
+  response.header(HttpHeader.ETag, cacheKey);
+  response.header(HttpHeader.CacheControl, 'no-store');
+  response.buffer(data, 'application/json');
+  req.set('bytes', data.byteLength);
+  return response;
+}

packages/lambda-tiler/src/arcgis/vector.tile.server.ts

@@ -0,0 +1,78 @@
+import { Config, TileSetType } from '@basemaps/config';
+import { GoogleTms } from '@basemaps/geo';
+import { HttpHeader, LambdaHttpRequest, LambdaHttpResponse } from '@linzjs/lambda';
+import { convertRelativeUrl } from '../routes/tile.style.json.js';
+import { NotFound } from '../util/response.js';
+import { Validate } from '../util/validate.js';
+
+/** Zoom level for the tilematrix which will be slice by 1 during the covertion to arcgis tileserve lods */
+const MaxTileMatrixZoom = 18;
+const MinTileMatrixZoom = 18;
+
+export interface VectorTileServer {
+  Params: {
+    tileSet: string;
+  };
+}
+
+export async function arcgisTileServerGet(req: LambdaHttpRequest<VectorTileServer>): Promise<LambdaHttpResponse> {
+  const tileSet = await Config.TileSet.get(Config.TileSet.id(req.params.tileSet));
+  if (tileSet?.type !== TileSetType.Vector) return NotFound();
+  const apiKey = Validate.apiKey(req);
+  const f = req.query.get('f');
+  if (f !== 'json') return NotFound();
+  const extent = {
+    xmin: GoogleTms.extent.x,
+    ymin: GoogleTms.extent.y,
+    xmax: GoogleTms.extent.right,
+    ymax: GoogleTms.extent.bottom,
+    // TODO where is wkid from
+    spatialReference: { wkid: 102100, latestWkid: GoogleTms.projection.code },
+  };
+  const vectorTileServer = {
+    currentVersion: 10.81,
+    name: tileSet.name,
+    capabilities: 'TilesOnly',
+    type: 'indexedVector',
+    defaultStyles: '',
+    tiles: [convertRelativeUrl(`/v1/tiles/${tileSet.name}/WebMercatorQuad/{z}/{x}/{y}.pbf`, apiKey)],
+    exportTilesAllowed: false,
+    maxExportTilesCount: 0,
+    initialExtent: extent,
+    fullExtent: extent,
+    minScale: 0.0,
+    maxScale: 0.0,
+    tileInfo: {
+      rows: 512,
+      cols: 512,
+      dpi: 96,
+      format: 'pbf',
+      origin: { x: GoogleTms.extent.x, y: GoogleTms.extent.bottom },
+      spatialReference: { wkid: 102100, latestWkid: GoogleTms.projection.code },
+      lods: GoogleTms.zooms.slice(MinTileMatrixZoom, MaxTileMatrixZoom).map((c, i) => {
+        return {
+          level: i,
+          resolution: c.scaleDenominator * 0.28e-3,
+          scale: c.scaleDenominator,
+        };
+      }),
+    },
+    maxzoom: 22,
+    minLOD: 0,
+    maxLOD: 15,
+    resourceInfo: {
+      styleVersion: 8,
+      tileCompression: 'gzip',
+      cacheInfo: { storageInfo: { packetSize: 128, storageFormat: 'compactV2' } },
+    },
+  };
+
+  const json = JSON.stringify(vectorTileServer, null, 2);
+  const data = Buffer.from(json);
+
+  const response = new LambdaHttpResponse(200, 'ok');
+  response.header(HttpHeader.CacheControl, 'no-store');
+  response.buffer(data, 'application/json');
+  req.set('bytes', data.byteLength);
+  return response;
+}

packages/lambda-tiler/src/index.ts

@@ -1,5 +1,7 @@
 import { LogConfig } from '@basemaps/shared';
 import { LambdaHttpResponse, lf } from '@linzjs/lambda';
+import { arcgisStyleJsonGet } from './arcgis/arcgis.style.json.js';
+import { arcgisTileServerGet } from './arcgis/vector.tile.server.js';
 import { tileAttributionGet } from './routes/attribution.js';
 import { fontGet, fontList } from './routes/fonts.js';
 import { healthGet } from './routes/health.js';
@@ -94,3 +96,7 @@ handler.router.get('/v1/attribution/:tileSet/:tileMatrix/summary.json', tileAttr
 handler.router.get('/v1/tiles/:tileSet/:tileMatrix/WMTSCapabilities.xml', wmtsCapabilitiesGet);
 handler.router.get('/v1/tiles/:tileSet/WMTSCapabilities.xml', wmtsCapabilitiesGet);
 handler.router.get('/v1/tiles/WMTSCapabilities.xml', wmtsCapabilitiesGet);
+
+// Arcgis Vector
+handler.router.get('/v1/arcgis/rest/services/:tileSet/VectorTileServer', arcgisTileServerGet);
+handler.router.get('/v1/arcgis/rest/services/:tileSet/VectorTileServer/root.json', arcgisStyleJsonGet);