venue-js 1.3.1 → 1.4.0-next.2

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import { Map, Coordinate as Coordinate$1 } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import * as maptalks from 'maptalks';
 import { Coordinate, Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
-import { BaseObjectOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
+import { BaseObjectOptionType, BarOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
@@ -84,7 +84,9 @@ type AnchorProperties = EntityTimestamps & {
     unit_id: Id;
     locale: string;
 };
-type AnchorFeature = ImdfFeature<AnchorGeometry, AnchorProperties>;
+type AnchorFeature = ImdfFeature<AnchorGeometry, AnchorProperties> & {
+    feature_type: "anchor";
+};
 type AmenityGeometry = Point;
 type AmenityProperties = EntityTimestamps & {
     amenity_logo: Media | null;
@@ -489,6 +491,10 @@ type AnchorFeaturePopulated = AnchorFeature & {
          * [IMDF] Level that kiosk is on
          */
         level: LevelFeaturePopulated;
+        /**
+         * [venue.in.th] Venue that anchor is in
+         */
+        venue: VenueFeaturePopulated;
         /**
          * [Derived] The section this anchor is on.
          * This is added during feature enrichment and not part of the original IMDF dataset.
@@ -827,6 +833,15 @@ declare class TextSpriteMarker extends BaseObject {
     setAltitude(altitude: number): this;
 }
 
+type ImageMarkerOptions = BaseObjectOptionType & {
+    src: string;
+    bottomHeight?: number;
+    leg?: Omit<BarOptionType, 'height'> & {
+        color: string;
+    };
+};
+type AnyMarkerOptions = TextMarkerOptions | ImageMarkerOptions;
+
 type Stop = [zoom: number, value: number];
 type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
@@ -868,17 +883,15 @@ type BaseRenderManagerOptions = {
 };
 type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
-    elements: Element2DRendererOptions;
+    elements?: Element2DRendererOptions;
 } | BaseRenderManagerOptions & {
     type: "3D";
-    elements: Element3DRendererOptions;
+    elements?: Element3DRendererOptions;
 };
 type HighlightElementOptions = {
     reset: boolean;
 };
 
-type AnyMarkerOptions = TextMarkerOptions;
-
 declare class RendererManager extends EventTarget {
     #private;
     map: maptalks$1.Map;
@@ -906,7 +919,7 @@ declare class RendererManager extends EventTarget {
      * ======================================================================== */
     _getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks$1.ui.UIMarker[];
     _addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
-    createMarker(coordinate: Position, ordinal: number, text: string, options: AnyMarkerOptions): void;
+    createMarker(type: 'text' | 'image', coordinate: Position, ordinal: number, textOrPath: string, options: AnyMarkerOptions): void;
     clearMarkers(): void;
 }
 

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { Map, Coordinate as Coordinate$1 } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import * as maptalks from 'maptalks';
 import { Coordinate, Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
-import { BaseObjectOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
+import { BaseObjectOptionType, BarOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
@@ -84,7 +84,9 @@ type AnchorProperties = EntityTimestamps & {
     unit_id: Id;
     locale: string;
 };
-type AnchorFeature = ImdfFeature<AnchorGeometry, AnchorProperties>;
+type AnchorFeature = ImdfFeature<AnchorGeometry, AnchorProperties> & {
+    feature_type: "anchor";
+};
 type AmenityGeometry = Point;
 type AmenityProperties = EntityTimestamps & {
     amenity_logo: Media | null;
@@ -489,6 +491,10 @@ type AnchorFeaturePopulated = AnchorFeature & {
          * [IMDF] Level that kiosk is on
          */
         level: LevelFeaturePopulated;
+        /**
+         * [venue.in.th] Venue that anchor is in
+         */
+        venue: VenueFeaturePopulated;
         /**
          * [Derived] The section this anchor is on.
          * This is added during feature enrichment and not part of the original IMDF dataset.
@@ -827,6 +833,15 @@ declare class TextSpriteMarker extends BaseObject {
     setAltitude(altitude: number): this;
 }
 
+type ImageMarkerOptions = BaseObjectOptionType & {
+    src: string;
+    bottomHeight?: number;
+    leg?: Omit<BarOptionType, 'height'> & {
+        color: string;
+    };
+};
+type AnyMarkerOptions = TextMarkerOptions | ImageMarkerOptions;
+
 type Stop = [zoom: number, value: number];
 type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
@@ -868,17 +883,15 @@ type BaseRenderManagerOptions = {
 };
 type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
-    elements: Element2DRendererOptions;
+    elements?: Element2DRendererOptions;
 } | BaseRenderManagerOptions & {
     type: "3D";
-    elements: Element3DRendererOptions;
+    elements?: Element3DRendererOptions;
 };
 type HighlightElementOptions = {
     reset: boolean;
 };
 
-type AnyMarkerOptions = TextMarkerOptions;
-
 declare class RendererManager extends EventTarget {
     #private;
     map: maptalks$1.Map;
@@ -906,7 +919,7 @@ declare class RendererManager extends EventTarget {
      * ======================================================================== */
     _getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks$1.ui.UIMarker[];
     _addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
-    createMarker(coordinate: Position, ordinal: number, text: string, options: AnyMarkerOptions): void;
+    createMarker(type: 'text' | 'image', coordinate: Position, ordinal: number, textOrPath: string, options: AnyMarkerOptions): void;
     clearMarkers(): void;
 }
 

package/dist/index.js

@@ -455,6 +455,7 @@ var createPopulator = ({
   };
   const populateAnchor = async (anchor) => {
     const unit = await internalFindById(anchor.properties.unit_id);
+    const venue = await internalFindById(unit.properties.venue_id);
     const level = await internalFindById(unit.properties.level_id);
     const sections = await internalFilterByType("section");
     const section = sections.find((section2) => (0, import_boolean_within.booleanWithin)(anchor, section2));
@@ -464,7 +465,9 @@ var createPopulator = ({
         ...anchor.properties,
         level: await populateLevel(level),
         unit: await populateUnit(unit),
-        section: section ? await populateSection(section) : null
+        section: section ? await populateSection(section) : null,
+        venue: await populateVenue(venue),
+        ordinal: level.properties.ordinal
       }
     };
   };
@@ -2739,7 +2742,7 @@ var CameraManager = class {
 // src/IndoorMap/renderer/RendererManager.ts
 var import_lodash_es4 = require("lodash-es");
 var import_center3 = require("@turf/center");
-var THREE3 = __toESM(require("three"));
+var THREE4 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
 var maptalks4 = __toESM(require("maptalks-gl"));
@@ -3084,7 +3087,7 @@ var DEFAULT_POLYGON_OPTION = {
   offset: 0,
   altitude: 0
 };
-var get3DRendererOption = (featureType, category, options) => {
+var get3DRendererOption = (featureType, category, options = {}) => {
   try {
     const option = options[featureType] ?? element3DRendererOptions[featureType];
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
@@ -3545,6 +3548,12 @@ var Marker2DRenderer = class extends EventTarget {
     marker.addTo(this.map);
     return marker;
   };
+  createTextMarker = (position, label, options) => {
+    return null;
+  };
+  createImageMarker = (position, src, options) => {
+    return null;
+  };
   removeMarker = (marker) => {
     marker.remove();
   };
@@ -3556,6 +3565,7 @@ var Marker2DRenderer = class extends EventTarget {
 
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
 var maptalks7 = __toESM(require("maptalks-gl"));
+var THREE3 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
 var import_maptalks8 = require("maptalks");
@@ -3755,21 +3765,35 @@ var TextSpriteMarker = class extends import_maptalks9.BaseObject {
 };
 
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
-var HEIGHT_METER2 = 4;
-var MULTIORDINAL_HEIGHT_METER3 = 9;
 var Marker3DRenderer = class extends EventTarget {
   isReady = false;
   threeLayer;
   map;
-  materialByKey;
   constructor(map, options, layer) {
     super();
     this.map = map;
     this.threeLayer = layer;
   }
-  createTextMarker = (position, ordinal, label, options) => {
+  createPointMaterialFromSvg(svgPath, size = 40) {
+    return new THREE3.PointsMaterial({
+      size,
+      sizeAttenuation: false,
+      // Always same size in screen pixels (Screen pixel)
+      // color: fillStyle, 
+      alphaTest: 0.5,
+      // vertexColors: THREE.VertexColors,
+      // color: 0xffffff,
+      transparent: true,
+      blending: THREE3.NormalBlending,
+      depthTest: true,
+      // POI is hidden behind building
+      depthWrite: true,
+      map: new THREE3.TextureLoader().load(svgPath)
+    });
+  }
+  createTextMarker = (position, label, options) => {
     const combinedOptions = {
-      altitude: ordinal * HEIGHT_METER2,
+      altitude: 0,
       text: label,
       ...options ?? {}
     };
@@ -3778,17 +3802,37 @@ var Marker3DRenderer = class extends EventTarget {
     this.threeLayer.addMesh([marker]);
     return marker;
   };
-  createImageMarker = () => {
-  };
-  createMarker = (coordinates, ordinal, label, options) => {
-    return this.createTextMarker(coordinates, ordinal, label, options);
+  createImageMarker = (position, src, options) => {
+    const [lng, lat] = position;
+    let meshes = [];
+    const height = options.height ?? 0;
+    const { leg, ...markerOptions } = options;
+    const { color: legColor = "#000000", ...legOptions } = leg ?? {};
+    const material = this.createPointMaterialFromSvg(src, 40);
+    const marker = this.threeLayer.toPoint(new maptalks7.Coordinate(lng, lat), { height, ...markerOptions }, material);
+    marker.getObject3d().renderOrder = 10;
+    meshes.push(marker);
+    if (options.leg) {
+      const legMaterial = new THREE3.MeshLambertMaterial({ color: legColor, transparent: true });
+      const leg2 = this.threeLayer.toBar(new maptalks7.Coordinate(lng, lat), { ...legOptions, height }, legMaterial);
+      const legObj = leg2.getObject3d();
+      legObj.traverse((o) => {
+        if (o.isMesh && o.material) {
+          o.material.depthWrite = false;
+          o.material.depthTest = true;
+          o.renderOrder = 0;
+        }
+      });
+      meshes = [leg2, ...meshes];
+    }
+    this.threeLayer.addMesh(meshes);
+    return meshes;
   };
   removeMarker = (marker) => {
     marker.remove();
   };
   showMarkers(elements, ordinalDiff = 0) {
     elements.forEach((element) => {
-      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER3);
       element.show();
     });
   }
@@ -4327,7 +4371,11 @@ function inBBox(pt, bbox2) {
 
 // src/IndoorMap/renderer/utils/findUnitOnPoint.ts
 var findUnitOnPoint = (units, point2) => {
-  return units.find((unit) => booleanPointInPolygon(point2, polygon(unit.geometry.coordinates)));
+  try {
+    return units.find((unit) => booleanPointInPolygon(point2, polygon(unit.geometry.coordinates)));
+  } catch (err) {
+    return null;
+  }
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
@@ -4397,13 +4445,13 @@ var RendererManager = class extends EventTarget {
           }
           return bad;
         }
-        const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
+        const ambientLight = new THREE4.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
         const dirColor = 16777215;
-        const dllight = new THREE3.DirectionalLight(dirColor, 0.8);
+        const dllight = new THREE4.DirectionalLight(dirColor, 0.8);
         dllight.position.set(0, -10, 20).normalize();
         scene.add(dllight);
-        const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
+        const hemi = new THREE4.HemisphereLight(16777215, 4473924, 0.4);
         scene.add(hemi);
         _this.elementRenderer = new Element3DRenderer(map, options.elements);
         _this.markerRenderer = new Marker3DRenderer(map, {}, threeLayer);
@@ -4486,7 +4534,7 @@ var RendererManager = class extends EventTarget {
         return openings.find((o) => o.id === openingId);
       }));
       const innerElements = this.elementRenderer.createGeometry(unit);
-      const wallElements = this.elementRenderer.createRoomWall(unit, roomOpenings);
+      const wallElements = [];
       if (innerElements || wallElements) {
         const _innerElements = Array.isArray(innerElements) ? innerElements : [innerElements];
         const _wallElements = Array.isArray(wallElements) ? wallElements : [wallElements];
@@ -4541,10 +4589,12 @@ var RendererManager = class extends EventTarget {
     for (const label of groundLabels) {
       const center2 = (0, import_center3.center)(polygon(label.geometry.coordinates)).geometry.coordinates;
       const unit = findUnitOnPoint(units, center2);
-      const element = this.elementRenderer.createGroundLabel(label, unit);
-      if (element) {
-        const _elements = Array.isArray(element) ? element : [element];
-        this.addElementsToManager(label.id, _elements, label.properties.ordinal);
+      if (unit) {
+        const element = this.elementRenderer.createGroundLabel(label, unit);
+        if (element) {
+          const _elements = Array.isArray(element) ? element : [element];
+          this.addElementsToManager(label.id, _elements, label.properties.ordinal);
+        }
       }
     }
     if (this.options.type === "3D") {
@@ -4626,10 +4676,11 @@ var RendererManager = class extends EventTarget {
       this.markerRenderer.hideMarkers(markers, ordinal);
     }
   };
-  createMarker(coordinate, ordinal, text, options) {
-    const marker = this.markerRenderer.createMarker(coordinate, ordinal, text, options);
+  createMarker(type, coordinate, ordinal, textOrPath, options) {
+    const meshes = type === "text" ? this.markerRenderer.createTextMarker(coordinate, textOrPath, options) : this.markerRenderer.createImageMarker(coordinate, textOrPath, options);
     const markerId = `${this.markersMap.size + 1}`;
-    this._addMarkersToManager(markerId, [marker], ordinal);
+    const markerMeshes = Array.isArray(meshes) ? meshes : [meshes];
+    this._addMarkersToManager(markerId, markerMeshes, ordinal);
   }
   clearMarkers() {
     for (const [markerId, marker] of this.markersMap) {
@@ -4769,6 +4820,7 @@ var IndoorMap = class extends EventTarget {
     this.#dataClient = value;
     if (!this.options.camera?.defaultView?.center) {
       this.#dataClient.filterByType("venue").then((venues) => {
+        this.#venues = venues;
         const venueCenters = (0, import_center4.default)(featureCollection(venues));
         const [x, y] = venueCenters.geometry.coordinates;
         const center2 = new import_maptalks_gl.Coordinate(x, y);