@kispace-io/gs-lib 1.1.8 → 1.2.0

package/src/ml/gs-ml-adapters.ts

@@ -0,0 +1,134 @@
+import { Map, Popup, IControl, LngLatLike } from 'maplibre-gl';
+import { render as litRender } from "@kispace-io/appspace/externals/lit";
+
+/**
+ * MapLibre Control adapter for user modules
+ */
+export class GsMlControlAdapter {
+    private map: Map;
+    private container: HTMLElement;
+    private templateFunction?: Function;
+
+    constructor(map: Map) {
+        this.map = map;
+        this.container = document.createElement('div');
+        this.container.style.margin = '0';
+        this.container.style.padding = '0';
+    }
+
+    getMap(): Map {
+        return this.map;
+    }
+
+    getElement(): HTMLElement {
+        return this.container;
+    }
+
+    render(strings?: TemplateStringsArray | Function) {
+        if (strings === undefined && this.templateFunction) {
+            strings = this.templateFunction();
+        } else if (strings instanceof Function) {
+            this.templateFunction = strings as Function;
+            strings = this.templateFunction();
+        }
+        if (strings) {
+            litRender(strings, this.getElement());
+        }
+    }
+
+    style(styleJson: any) {
+        const style = this.getElement().style;
+        for (const property in styleJson) {
+            const value = styleJson[property];
+            style.setProperty(property, value);
+        }
+    }
+}
+
+/**
+ * MapLibre IControl wrapper for user modules
+ */
+export class GsMlControl implements IControl {
+    private adapter: GsMlControlAdapter;
+
+    constructor(_position?: string) {
+        this.adapter = null as any; // Will be set in onAdd
+    }
+
+    onAdd(map: Map): HTMLElement {
+        this.adapter = new GsMlControlAdapter(map);
+        return this.adapter.getElement();
+    }
+
+    onRemove(): void {
+        this.adapter.getElement().remove();
+    }
+
+    getAdapter(): GsMlControlAdapter {
+        return this.adapter;
+    }
+}
+
+/**
+ * MapLibre Overlay adapter using Popup
+ */
+export class GsMlOverlayAdapter {
+    private map: Map;
+    private popup: Popup;
+    private container: HTMLElement;
+    private templateFunction?: Function;
+
+    constructor(map: Map) {
+        this.map = map;
+        this.container = document.createElement('div');
+        this.container.style.margin = '0';
+        this.container.style.padding = '0';
+
+        this.popup = new Popup({
+            closeButton: false,
+            closeOnClick: false,
+            maxWidth: 'none'
+        });
+        this.popup.setDOMContent(this.container);
+    }
+
+    getMap(): Map {
+        return this.map;
+    }
+
+    getElement(): HTMLElement {
+        return this.container;
+    }
+
+    render(strings?: TemplateStringsArray | Function) {
+        if (strings === undefined && this.templateFunction) {
+            strings = this.templateFunction();
+        } else if (strings instanceof Function) {
+            this.templateFunction = strings as Function;
+            strings = this.templateFunction();
+        }
+        if (strings) {
+            litRender(strings, this.getElement());
+        }
+    }
+
+    style(styleJson: any) {
+        const style = this.getElement().style;
+        for (const property in styleJson) {
+            const value = styleJson[property];
+            style.setProperty(property, value);
+        }
+    }
+
+    show(coords: number[]) {
+        this.getElement().style.display = 'block';
+        this.popup.setLngLat([coords[0], coords[1]] as LngLatLike);
+        this.popup.addTo(this.map);
+    }
+
+    hide() {
+        this.getElement().style.display = 'none';
+        this.popup.remove();
+    }
+}
+

package/src/ml/gs-ml-lib.ts

@@ -0,0 +1,124 @@
+import {GsMap} from "../gs-model";
+import "maplibre-gl/dist/maplibre-gl.css";
+import {
+    Map,
+    LngLatLike,
+    StyleSpecification
+} from 'maplibre-gl';
+import {
+    buildInitialStyle,
+    importMlControlSource,
+    importMlOverlaySource,
+    toWgs84,
+    EPSG_3857,
+    MlImporter
+} from "./gs-gs2ml";
+import {
+    GsMlControl,
+    GsMlOverlayAdapter
+} from "./gs-ml-adapters";
+import {GsLayerType, GsSourceType} from "../gs-model";
+
+export * from "../gs-model";
+export * from "./gs-gs2ml";
+
+export interface MlLibOptions {
+    containerSelector: string | HTMLElement;
+    gsMap: GsMap;
+    env?: any;
+    modules?: any;
+    importer?: MlImporter;
+}
+
+/**
+ * Main entry point to create a MapLibre map from GsMap
+ */
+export async function mlLib(options: MlLibOptions): Promise<Map> {
+    const gsMap = options.gsMap;
+
+    // Check for GROUP layer with BM source (external style)
+    const bmLayer = gsMap.layers.find(
+        l => l.type === GsLayerType.GROUP && l.source.type === GsSourceType.BM
+    );
+
+    let style: StyleSpecification | string;
+    if (bmLayer?.source.url) {
+        // Use external style URL
+        style = bmLayer.source.url;
+    } else {
+        // Build style from GsMap
+        style = buildInitialStyle(gsMap);
+    }
+
+    // Handle container
+    const container = typeof options.containerSelector === 'string'
+        ? document.querySelector(options.containerSelector) as HTMLElement
+        : options.containerSelector;
+
+    if (!container) {
+        throw new Error('Container not found');
+    }
+
+    // Convert center to WGS84 for MapLibre using the view's projection
+    const sourceProjection = gsMap.view.projection || EPSG_3857;
+    const centerWgs84 = toWgs84([gsMap.view.center[0], gsMap.view.center[1]], sourceProjection);
+
+    // Get pitch and bearing from view if available (for 3D viewing)
+    const pitch = gsMap.view.pitch || 0;
+    const bearing = gsMap.view.bearing || 0;
+
+    // Create map with 3D support
+    const map = new Map({
+        container,
+        style,
+        center: centerWgs84 as LngLatLike,
+        zoom: gsMap.view.zoom,
+        pitch,
+        bearing,
+        maxPitch: 85  // Allow steep viewing angles for 3D buildings
+    });
+
+    // Store environment
+    (map as any)._gsEnv = options.env;
+    (map as any)._gsMap = gsMap;
+
+    // Set up importer
+    let importer: MlImporter | undefined = options.importer;
+    if (!importer && options.modules) {
+        importer = async (src: string) => {
+            const module = options.modules[src];
+            if (module) {
+                if (typeof module === 'string') {
+                    return import(module);
+                }
+                return module;
+            }
+            throw new Error(`Module not found: ${src}`);
+        };
+    }
+
+    // Wait for map to load before adding controls/overlays
+    await new Promise<void>((resolve) => {
+        if (map.loaded()) {
+            resolve();
+        } else {
+            map.on('load', () => resolve());
+        }
+    });
+
+    // Add controls
+    for (const control of gsMap.controls || []) {
+        const mlControl = new GsMlControl();
+        map.addControl(mlControl, 'top-right');
+        await importMlControlSource(map, mlControl, control.src, options.env, importer);
+    }
+
+    // Add overlays
+    for (const overlay of gsMap.overlays || []) {
+        const overlayAdapter = new GsMlOverlayAdapter(map);
+        await importMlOverlaySource(map, overlayAdapter, overlay.src, options.env, importer);
+    }
+
+    return map;
+}
+

package/src/ml/gs-ml2gs.ts

@@ -0,0 +1,66 @@
+import {
+    GsFeature,
+    GsGeometry,
+    GsState,
+    KEY_UUID,
+    ensureUuid
+} from "../gs-model";
+import { toWebMercator, EPSG_4326 } from "./gs-gs2ml";
+
+/**
+ * Convert coordinates from WGS84 to EPSG:3857 for any geometry type
+ */
+function convertCoordinatesToMercator(coords: any, geometryType: string): any {
+    switch (geometryType) {
+        case 'Point':
+            return toWebMercator(coords as [number, number], EPSG_4326);
+        case 'LineString':
+        case 'MultiPoint':
+            return (coords as [number, number][]).map(c => toWebMercator(c, EPSG_4326));
+        case 'Polygon':
+        case 'MultiLineString':
+            return (coords as [number, number][][]).map(ring => ring.map(c => toWebMercator(c, EPSG_4326)));
+        case 'MultiPolygon':
+            return (coords as [number, number][][][]).map(poly => poly.map(ring => ring.map(c => toWebMercator(c, EPSG_4326))));
+        default:
+            return coords;
+    }
+}
+
+/**
+ * Convert GeoJSON geometry to GsGeometry (with coordinate conversion to EPSG:3857)
+ */
+export function toGsGeometry(geometry: GeoJSON.Geometry): GsGeometry {
+    if (geometry.type === 'GeometryCollection') {
+        throw new Error('GeometryCollection is not supported');
+    }
+    const geom = geometry as GeoJSON.Point | GeoJSON.LineString | GeoJSON.Polygon | GeoJSON.MultiPoint | GeoJSON.MultiLineString | GeoJSON.MultiPolygon;
+    const coordsMercator = convertCoordinatesToMercator(geom.coordinates, geom.type);
+    
+    return ensureUuid({
+        type: geom.type,
+        coordinates: coordsMercator
+    } as GsGeometry);
+}
+
+/**
+ * Convert MapLibre/GeoJSON feature to GsFeature (with coordinate conversion to EPSG:3857)
+ */
+export function toGsFeature(feature: GeoJSON.Feature): GsFeature {
+    const geometry = feature.geometry;
+    if (geometry.type === 'GeometryCollection') {
+        throw new Error('GeometryCollection is not supported');
+    }
+    const geom = geometry as GeoJSON.Point | GeoJSON.LineString | GeoJSON.Polygon | GeoJSON.MultiPoint | GeoJSON.MultiLineString | GeoJSON.MultiPolygon;
+    const coordsMercator = convertCoordinatesToMercator(geom.coordinates, geom.type);
+    
+    return ensureUuid({
+        geometry: ensureUuid({
+            type: geom.type,
+            coordinates: coordsMercator
+        } as GsGeometry),
+        state: feature.properties || {},
+        uuid: feature.properties?.[KEY_UUID] || feature.id?.toString()
+    } as GsFeature);
+}
+

package/src/ml/gs-mlns.ts

@@ -0,0 +1,50 @@
+/**
+ * MapLibre library re-exports
+ * Centralized re-exports for MapLibre to provide a single source of truth.
+ */
+
+// Re-export MapLibre GL
+export {
+    Map,
+    Marker,
+    Popup,
+    NavigationControl,
+    GeolocateControl,
+    ScaleControl,
+    FullscreenControl,
+    AttributionControl,
+    LngLat,
+    LngLatBounds,
+    Point,
+    MercatorCoordinate
+} from 'maplibre-gl';
+
+// Re-export types
+export type {
+    MapOptions,
+    StyleSpecification,
+    LayerSpecification,
+    SourceSpecification,
+    GeoJSONSourceSpecification,
+    RasterSourceSpecification,
+    VectorSourceSpecification,
+    MapMouseEvent,
+    MapLayerMouseEvent,
+    IControl,
+    MarkerOptions,
+    PopupOptions,
+    LngLatLike,
+    LngLatBoundsLike,
+    PointLike,
+    FitBoundsOptions,
+    CameraOptions,
+    AnimationOptions,
+    ExpressionSpecification,
+    FilterSpecification
+} from 'maplibre-gl';
+
+// Default export for convenience
+import maplibregl from 'maplibre-gl';
+export { maplibregl };
+export default maplibregl;
+

package/src/ml/index.ts

@@ -0,0 +1,41 @@
+// MapLibre renderer exports
+// Import from '@kispace-io/gs-lib/ml' for MapLibre-specific functionality
+
+// Core model (needed for types)
+export * from "../gs-model"
+
+// Renderer interface
+export * from "../map-renderer"
+
+// MapLibre-specific exports
+export * from "./gs-ml-lib"
+export * from "./gs-ml2gs"
+export * from "./gs-ml-adapters"
+export {
+    toGeoJsonFeature,
+    toGeoJsonFeatureCollection,
+    toMlSource,
+    toMlLayers,
+    toMlFillPaint,
+    toMlLinePaint,
+    toMlCirclePaint,
+    toMlFillExtrusionPaint,
+    buildInitialStyle,
+    toWgs84,
+    toWebMercator,
+    transformCoords,
+    EPSG_3857,
+    EPSG_4326,
+    importMlControlSource,
+    importMlOverlaySource,
+    ML_KEY_GS_LAYER_UUID,
+    ML_KEY_GS_SOURCE_UUID,
+    type MlImporter
+} from "./gs-gs2ml"
+
+// MapLibre namespace
+export * as ml from "./gs-mlns"
+
+// MapLibre renderer implementation
+export { MapLibreMapRenderer } from "./maplibre-map-renderer"
+