venue-js 1.2.0 → 1.3.0-next.1

package/dist/index.js

@@ -30,12 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ALL_FEATURE_TYPES: () => ALL_FEATURE_TYPES,
-  ALWAYS_VISIBLE_FEATURE_TYPES: () => ALWAYS_VISIBLE_FEATURE_TYPES,
   BASE_LAYER_NAME: () => BASE_LAYER_NAME,
   DEFAULT_BASE_URL: () => DEFAULT_BASE_URL,
-  DEFAULT_HIGHLIGHT_OPTIONS: () => DEFAULT_HIGHLIGHT_OPTIONS,
   DEFAULT_LOCALE: () => DEFAULT_LOCALE,
-  DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS: () => DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
   DESTINATION_MARKER_ID: () => DESTINATION_MARKER_ID,
   GEOJSON_FEATURE_TYPES: () => GEOJSON_FEATURE_TYPES,
   HIGHLIGHT_LAYER_NAME: () => HIGHLIGHT_LAYER_NAME,
@@ -49,8 +46,10 @@ __export(index_exports, {
   MARKER_LAYER_NAME: () => MARKER_LAYER_NAME,
   NONIMDF_FEATURE_TYPES: () => NONIMDF_FEATURE_TYPES,
   ORIGIN_MARKER_ID: () => ORIGIN_MARKER_ID,
+  OccupantHelpers: () => occupant_helper_exports,
   POI_MARKER_LAYER_NAME: () => POI_MARKER_LAYER_NAME,
   QueryObserver: () => import_query_core2.QueryObserver,
+  TextSpriteMarker: () => TextSpriteMarker,
   USER_LOCATION_ELEMENT_ID: () => USER_LOCATION_ELEMENT_ID,
   USER_LOCATION_LAYER_NAME: () => USER_LOCATION_LAYER_NAME,
   VENUE_EVENTS: () => VENUE_EVENTS,
@@ -76,6 +75,16 @@ __export(index_exports, {
   getRelatedLocationsByOccupant: () => getRelatedLocationsByOccupant,
   getSuitablyValueBetweenBearings: () => getSuitablyValueBetweenBearings,
   isClickableFeature: () => isClickableFeature,
+  isValidCoordinate: () => isValidCoordinate,
+  isValidLineString: () => isValidLineString,
+  isValidLineStringCoordinates: () => isValidLineStringCoordinates,
+  isValidMultiPolygon: () => isValidMultiPolygon,
+  isValidMultiPolygonCoordinates: () => isValidMultiPolygonCoordinates,
+  isValidPoint: () => isValidPoint,
+  isValidPolygon: () => isValidPolygon,
+  isValidPolygonCoordinates: () => isValidPolygonCoordinates,
+  matchFilter: () => matchFilter,
+  matchFilters: () => matchFilters,
   safeFetchFeature: () => safeFetchFeature,
   styledFeatureGenerator: () => styledFeatureGenerator
 });
@@ -158,7 +167,8 @@ var defaultFeatureQueryOptionsMap = {
     // refresh every 5 min
   },
   element: {},
-  page: {}
+  page: {},
+  model3d: {}
 };
 
 // src/data/api/delivery-project.ts
@@ -174,6 +184,14 @@ async function fetchDeliveryApi(projectId, apiKey, featureType, baseUrl = DEFAUL
       const items = await res.json();
       return items;
     }
+    case "model3d": {
+      const res = await fetch(
+        `${baseUrl}/delivery/projects/${projectId}/${featureType}.geojson?api-key=${apiKey}`
+      );
+      if (res.status !== 200) return [];
+      const items = await res.json();
+      return items.features;
+    }
     case "sponsored-content": {
       const res = await fetch(
         `${baseUrl}/delivery/projects/${projectId}/sponsored-content.json?api-key=${apiKey}`
@@ -274,6 +292,115 @@ var safeFetchFeature = async (featureType, params) => {
   }
 };
 
+// src/data/utils/geometry-validator.ts
+var isValidCoordinate = (point2) => {
+  return point2.length === 2 && point2.every((coord) => typeof coord === "number");
+};
+function isValidLinearRingCoordinates(ring) {
+  if (ring.length < 4) {
+    return false;
+  }
+  return ring.every(isValidCoordinate) && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1];
+}
+var isValidPolygonCoordinates = (polygon2) => {
+  if (Array.isArray(polygon2[0]) && (polygon2[0].length === 0 || typeof polygon2[0][0] === "number")) {
+    return isValidLinearRingCoordinates(polygon2);
+  }
+  if (Array.isArray(polygon2) && polygon2.length > 0 && Array.isArray(polygon2[0])) {
+    if (!isValidLinearRingCoordinates(polygon2[0])) {
+      return false;
+    }
+    for (let i = 1; i < polygon2.length; i++) {
+      if (!isValidLinearRingCoordinates(polygon2[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+};
+var isValidMultiPolygonCoordinates = (multipolygon) => {
+  return multipolygon.every(isValidPolygonCoordinates);
+};
+var isValidLineStringCoordinates = (lineString2) => {
+  if (!Array.isArray(lineString2) || lineString2.length < 2) {
+    return false;
+  }
+  const firstPoint = lineString2[0];
+  const lastPoint = lineString2[lineString2.length - 1];
+  if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1]) {
+    return false;
+  }
+  return lineString2.every(isValidCoordinate);
+};
+var isValidMultiPolygon = (geometry) => {
+  const { type, coordinates } = geometry;
+  return type === "MultiPolygon" && isValidMultiPolygonCoordinates(coordinates);
+};
+var isValidPolygon = (geometry) => {
+  const { type, coordinates } = geometry;
+  return type === "Polygon" && isValidPolygonCoordinates(coordinates);
+};
+var isValidLineString = (geometry) => {
+  const { type, coordinates } = geometry;
+  return type === "LineString" && isValidLineStringCoordinates(coordinates);
+};
+var isValidPoint = (geometry) => {
+  const { type, coordinates } = geometry;
+  return type === "Point" && isValidCoordinate(coordinates);
+};
+
+// src/data/utils/match-filters.ts
+function isInFilter(filter) {
+  return typeof filter === "object" && filter !== null && "$in" in filter && Array.isArray(filter.$in);
+}
+var someIntersect = (a, b) => a.some((v2) => b.includes(v2));
+function matchFilter(value, filter) {
+  if (Array.isArray(value)) {
+    if (isInFilter(filter)) return someIntersect(value, filter.$in);
+    return value.includes(filter);
+  } else {
+    if (isInFilter(filter)) return filter.$in.includes(value);
+    return value === filter;
+  }
+}
+function matchFilters(item, filters) {
+  return Object.entries(filters).every(([key, filter]) => {
+    return matchFilter(item.properties[key], filter);
+  });
+}
+
+// src/data/utils/occupant-helper.ts
+var occupant_helper_exports = {};
+__export(occupant_helper_exports, {
+  getOccupantCorrelatedLocations: () => getOccupantCorrelatedLocations,
+  getOccupantMainLocation: () => getOccupantMainLocation,
+  getOccupantMarkerLocations: () => getOccupantMarkerLocations
+});
+var import_lodash_es = require("lodash-es");
+var getOccupantMainLocation = (occupant) => {
+  return occupant.properties.kiosk || occupant.properties.unit;
+};
+var getOccupantCorrelatedLocations = (occupant) => {
+  const allCorrelatedLocations = [
+    ...occupant.properties.units,
+    ...occupant.properties.kiosks
+  ];
+  return (0, import_lodash_es.compact)(allCorrelatedLocations);
+};
+var getOccupantMarkerLocations = (occupant, options) => {
+  const placementType = options?.type ? options.type : occupant.properties.show_name_on_all_units ? "ALL_LOCATIONS" : "ONCE_PER_LEVEL";
+  const mainLocation = getOccupantMainLocation(occupant);
+  const mainLocationLevel = mainLocation?.properties?.level_id;
+  const allCorrelatedLocations = getOccupantCorrelatedLocations(occupant);
+  if (placementType === "ALL_LOCATIONS") {
+    return (0, import_lodash_es.compact)([mainLocation, ...allCorrelatedLocations]);
+  }
+  const otherLevelLocations = allCorrelatedLocations.filter((f) => f.properties.level_id !== mainLocationLevel);
+  const onePerLevelLocations = [...new Map(otherLevelLocations.map((loc) => [loc.properties.level_id, loc])).values()];
+  return (0, import_lodash_es.compact)([mainLocation, ...onePerLevelLocations]);
+};
+
 // src/data/getDataClient.ts
 var import_query_core = require("@tanstack/query-core");
 
@@ -429,8 +556,8 @@ var createPopulator = ({
         venue,
         promotions,
         privileges,
-        kiosk,
-        unit,
+        kiosk: kiosk ? await populateKiosk(kiosk) : null,
+        unit: unit ? await populateUnit(unit) : null,
         kiosks: await Promise.all(kiosks.map(populateKiosk)),
         units: await Promise.all(units.map(populateUnit))
       }
@@ -522,26 +649,6 @@ var createPopulator = ({
   };
 };
 
-// src/data/utils/match-filters.ts
-function isInFilter(filter) {
-  return typeof filter === "object" && filter !== null && "$in" in filter && Array.isArray(filter.$in);
-}
-var someIntersect = (a, b) => a.some((v) => b.includes(v));
-function matchFilter(value, filter) {
-  if (Array.isArray(value)) {
-    if (isInFilter(filter)) return someIntersect(value, filter.$in);
-    return value.includes(filter);
-  } else {
-    if (isInFilter(filter)) return filter.$in.includes(value);
-    return value === filter;
-  }
-}
-function matchFilters(item, filters) {
-  return Object.entries(filters).every(([key, filter]) => {
-    return matchFilter(item.properties[key], filter);
-  });
-}
-
 // src/data/getDataClient.ts
 var getDataClient = (options) => {
   const observers = /* @__PURE__ */ new Map();
@@ -670,8 +777,9 @@ var getDataClient = (options) => {
 
 // src/IndoorMap/IndoorMap.ts
 var import_maptalks_gl = require("maptalks-gl");
-var import_tween2 = __toESM(require("@tweenjs/tween.js"));
-var import_lodash7 = __toESM(require("lodash"));
+var import_transcoders = require("@maptalks/transcoders.draco");
+var import_tween = __toESM(require("@tweenjs/tween.js"));
+var import_lodash6 = __toESM(require("lodash"));
 
 // ../../node_modules/@turf/helpers/dist/esm/index.js
 var earthRadius = 63710088e-1;
@@ -723,6 +831,28 @@ function point(coordinates, properties, options = {}) {
   };
   return feature(geom, properties, options);
 }
+function polygon(coordinates, properties, options = {}) {
+  for (const ring of coordinates) {
+    if (ring.length < 4) {
+      throw new Error(
+        "Each LinearRing of a Polygon must have 4 or more Positions."
+      );
+    }
+    if (ring[ring.length - 1].length !== ring[0].length) {
+      throw new Error("First and last Position are not equivalent.");
+    }
+    for (let j = 0; j < ring[ring.length - 1].length; j++) {
+      if (ring[ring.length - 1][j] !== ring[0][j]) {
+        throw new Error("First and last Position are not equivalent.");
+      }
+    }
+  }
+  const geom = {
+    type: "Polygon",
+    coordinates
+  };
+  return feature(geom, properties, options);
+}
 function lineString(coordinates, properties, options = {}) {
   if (coordinates.length < 2) {
     throw new Error("coordinates must be an array of two or more positions");
@@ -744,6 +874,13 @@ function featureCollection(features, options = {}) {
   fc.features = features;
   return fc;
 }
+function multiPoint(coordinates, properties, options = {}) {
+  const geom = {
+    type: "MultiPoint",
+    coordinates
+  };
+  return feature(geom, properties, options);
+}
 function isNumber(num) {
   return !isNaN(num) && num !== null && !Array.isArray(num);
 }
@@ -751,133 +888,8 @@ function isNumber(num) {
 // src/IndoorMap/IndoorMap.ts
 var import_distance = __toESM(require("@turf/distance"));
 var import_center4 = __toESM(require("@turf/center"));
-
-// ../../node_modules/@turf/meta/dist/esm/index.js
-function coordEach(geojson, callback, excludeWrapCoord) {
-  if (geojson === null) return;
-  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
-  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
-    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
-    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
-    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
-    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
-      var multiFeatureIndex = 0;
-      var geometryIndex = 0;
-      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
-      if (geometry === null) continue;
-      coords = geometry.coordinates;
-      var geomType = geometry.type;
-      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
-      switch (geomType) {
-        case null:
-          break;
-        case "Point":
-          if (callback(
-            coords,
-            coordIndex,
-            featureIndex,
-            multiFeatureIndex,
-            geometryIndex
-          ) === false)
-            return false;
-          coordIndex++;
-          multiFeatureIndex++;
-          break;
-        case "LineString":
-        case "MultiPoint":
-          for (j = 0; j < coords.length; j++) {
-            if (callback(
-              coords[j],
-              coordIndex,
-              featureIndex,
-              multiFeatureIndex,
-              geometryIndex
-            ) === false)
-              return false;
-            coordIndex++;
-            if (geomType === "MultiPoint") multiFeatureIndex++;
-          }
-          if (geomType === "LineString") multiFeatureIndex++;
-          break;
-        case "Polygon":
-        case "MultiLineString":
-          for (j = 0; j < coords.length; j++) {
-            for (k = 0; k < coords[j].length - wrapShrink; k++) {
-              if (callback(
-                coords[j][k],
-                coordIndex,
-                featureIndex,
-                multiFeatureIndex,
-                geometryIndex
-              ) === false)
-                return false;
-              coordIndex++;
-            }
-            if (geomType === "MultiLineString") multiFeatureIndex++;
-            if (geomType === "Polygon") geometryIndex++;
-          }
-          if (geomType === "Polygon") multiFeatureIndex++;
-          break;
-        case "MultiPolygon":
-          for (j = 0; j < coords.length; j++) {
-            geometryIndex = 0;
-            for (k = 0; k < coords[j].length; k++) {
-              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
-                if (callback(
-                  coords[j][k][l],
-                  coordIndex,
-                  featureIndex,
-                  multiFeatureIndex,
-                  geometryIndex
-                ) === false)
-                  return false;
-                coordIndex++;
-              }
-              geometryIndex++;
-            }
-            multiFeatureIndex++;
-          }
-          break;
-        case "GeometryCollection":
-          for (j = 0; j < geometry.geometries.length; j++)
-            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
-              return false;
-          break;
-        default:
-          throw new Error("Unknown Geometry Type");
-      }
-    }
-  }
-}
-
-// ../../node_modules/@turf/bbox/dist/esm/index.js
-function bbox(geojson, options = {}) {
-  if (geojson.bbox != null && true !== options.recompute) {
-    return geojson.bbox;
-  }
-  const result = [Infinity, Infinity, -Infinity, -Infinity];
-  coordEach(geojson, (coord) => {
-    if (result[0] > coord[0]) {
-      result[0] = coord[0];
-    }
-    if (result[1] > coord[1]) {
-      result[1] = coord[1];
-    }
-    if (result[2] < coord[0]) {
-      result[2] = coord[0];
-    }
-    if (result[3] < coord[1]) {
-      result[3] = coord[1];
-    }
-  });
-  return result;
-}
-var index_default = bbox;
-
-// src/IndoorMap/IndoorMap.ts
-var import_transform_scale = __toESM(require("@turf/transform-scale"));
-var import_bbox_polygon = __toESM(require("@turf/bbox-polygon"));
-var import_three8 = require("three");
+var import_three6 = require("three");
+var import_maptalks10 = require("maptalks.three");
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -895,7 +907,6 @@ var GEOLOCATION = "geolocation";
 var ORIGIN_MARKER = "origin-marker";
 var DESTINATION_MARKER = "destination-marker";
 var DECORATION = "decoration";
-var ALWAYS_VISIBLE_FEATURE_TYPES = [VENUE, FOOTPRINT];
 var BASE_LAYER_NAME = "base";
 var POI_MARKER_LAYER_NAME = "poi";
 var MARKER_LAYER_NAME = "marker";
@@ -907,13 +918,6 @@ var USER_LOCATION_ELEMENT_ID = "user_location";
 var LAST_USER_LOCATION_ELEMENT_ID_PREFIX = "last_user_location-";
 var LOCALE_SYMBOL_KEY = "locale_symbol";
 var DEFAULT_LOCALE = "en";
-var DEFAULT_HIGHLIGHT_OPTIONS = {
-  symbolSet: null
-};
-var DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS = {
-  symbolSet: null,
-  defaultMarker: false
-};
 var LAYERS = [
   BASE_LAYER_NAME,
   POI_MARKER_LAYER_NAME,
@@ -963,11 +967,10 @@ var VENUE_EVENTS = {
 
 // src/IndoorMap/utils/createElements.js
 var import_lodash4 = __toESM(require("lodash"));
-var import_maptalks5 = require("maptalks");
+var import_maptalks4 = require("maptalks");
 var import_center2 = __toESM(require("@turf/center"));
 var import_buffer = __toESM(require("@turf/buffer"));
-var import_three5 = require("three");
-var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
+var import_three4 = require("three");
 
 // src/IndoorMap/object3d/Billboard.js
 var maptalks = __toESM(require("maptalks"));
@@ -999,7 +1002,7 @@ var Billboard = class extends import_maptalks.BaseObject {
     this._initOptions(options);
     const {
       altitude = OPTIONS.altitude,
-      scale: scale2 = OPTIONS.scale,
+      scale: scale3 = OPTIONS.scale,
       alphaTest = OPTIONS.alphaTest,
       legColor = OPTIONS.legColor,
       showLeg = OPTIONS.showLeg
@@ -1033,8 +1036,8 @@ var Billboard = class extends import_maptalks.BaseObject {
       const sprite = new import_three.Sprite(material);
       sprite.material.sizeAttenuation = false;
       sprite.scale.set(
-        scale2 * naturalWidth / divider,
-        scale2 * naturalHeight / divider,
+        scale3 * naturalWidth / divider,
+        scale3 * naturalHeight / divider,
         1
       );
       this.getObject3d().add(sprite);
@@ -1043,7 +1046,7 @@ var Billboard = class extends import_maptalks.BaseObject {
     const position = layer.coordinateToVector3(coordinate, z);
     import_lodash.default.set(this.properties, "default.position", position);
     import_lodash.default.set(this.properties, "default.altitude", altitude);
-    import_lodash.default.set(this.properties, "default.scale", scale2);
+    import_lodash.default.set(this.properties, "default.scale", scale3);
     this.getObject3d().position.copy(position);
   }
   setLineHeight(altitude) {
@@ -1056,315 +1059,25 @@ var Billboard = class extends import_maptalks.BaseObject {
   }
 };
 
-// src/IndoorMap/object3d/GroundLabel.ts
-var maptalks2 = __toESM(require("maptalks"));
+// src/IndoorMap/object3d/SpriteMarker.ts
 var import_maptalks2 = require("maptalks.three");
 var import_three2 = require("three");
-var import_d3plus_shape = require("d3plus-shape");
-var import_lodash_es = require("lodash-es");
-var OPTIONS2 = {
-  // Allowing click through and prevent interaction
-  interactive: false,
-  altitude: 0
-};
-var defaultFlatLabelOptions = {
-  fontSize: 14,
-  fontFamily: "Manrope",
-  fontWeight: 600,
-  margin: 0,
-  scaleMin: 0.5,
-  lineHeight: 1.05,
-  scaleStep: 0.05,
-  textAlign: "center",
-  textBaseline: "middle",
-  fillStyle: "#000"
+var import_lodash2 = __toESM(require("lodash"));
+var DEFAULT_SCALE = 0.05;
+var DEFAULT_ALTITUDE = 0;
+var DEFAULT_ALPHATEST = 0.3;
+var DEFAULT_OPTIONS = {
+  scale: DEFAULT_SCALE,
+  altitude: DEFAULT_ALTITUDE,
+  alphaTest: DEFAULT_ALPHATEST,
+  highlight: {
+    options: {
+      scale: DEFAULT_SCALE * 1.25
+    },
+    material: null
+  }
 };
-var defaultRectAngleToCalc = (0, import_lodash_es.range)(-90, 92, 2);
-var getMaterial = (text, flatLabelOptions) => {
-  const options = (0, import_lodash_es.merge)({}, defaultFlatLabelOptions, flatLabelOptions);
-  const {
-    fontSize: initialFontSize,
-    fontFamily,
-    fontWeight,
-    margin,
-    scaleMin,
-    scaleStep,
-    fillStyle,
-    lineHeight,
-    textAlign,
-    strokeStyle,
-    lineWidth,
-    textBaseline
-  } = options;
-  const pixelMultiplier = 4;
-  const SIZE = 100 * pixelMultiplier;
-  const fontSize = initialFontSize * (pixelMultiplier * 1.25);
-  const canvas = document.createElement("canvas");
-  canvas.width = canvas.height = SIZE;
-  const ctx = canvas.getContext("2d");
-  ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", Arial`;
-  ctx.textAlign = textAlign;
-  ctx.textBaseline = textBaseline;
-  ctx.fillStyle = fillStyle;
-  ctx.strokeStyle = strokeStyle;
-  ctx.lineWidth = lineWidth;
-  const wrapText = (ctx2, text2, maxWidth) => {
-    const words = text2.trim().split(/\s+/);
-    if (words.length <= 1) return [text2];
-    const lines = [];
-    const MAX_LINES = 3;
-    let currentLine = words[0];
-    for (let i = 1; i < words.length; i++) {
-      const lineToMeasure = currentLine + " " + words[i];
-      if (ctx2.measureText(lineToMeasure).width > maxWidth) {
-        lines.push(currentLine);
-        currentLine = words[i];
-      } else {
-        currentLine = lineToMeasure;
-      }
-    }
-    lines.push(currentLine);
-    return lines.slice(0, MAX_LINES);
-  };
-  const hasManualBreaks = text.includes("\n");
-  let texts;
-  if (hasManualBreaks) {
-    texts = text.split(/\n/g);
-  } else {
-    const maxWidth = SIZE - 2 * margin;
-    texts = wrapText(ctx, text, maxWidth);
-  }
-  let textWidth = (0, import_lodash_es.max)(texts.map((text2) => ctx.measureText(text2).width));
-  let scale2 = 1;
-  while (scale2 > 0 && textWidth + 2 * margin > SIZE) {
-    scale2 -= scaleStep;
-    ctx.font = `${fontWeight} ${scale2 * fontSize}px "${fontFamily}", Arial`;
-    textWidth = (0, import_lodash_es.max)(texts.map((text2) => ctx.measureText(text2).width));
-  }
-  const center2 = { x: 0.5 * SIZE, y: 0.5 * SIZE };
-  if (scale2 > scaleMin) {
-    const totalHeight = texts.length * (fontSize * scale2 * lineHeight);
-    const startY = center2.y - totalHeight / 2 + fontSize * scale2 * lineHeight * 0.5;
-    texts.forEach((text2, index) => {
-      const yOffset = startY + index * (fontSize * scale2 * lineHeight);
-      if (strokeStyle && lineWidth) {
-        ctx.strokeText(text2, center2.x, yOffset);
-      }
-      ctx.fillText(text2, center2.x, yOffset);
-    });
-  }
-  const texture = new import_three2.Texture(canvas);
-  texture.needsUpdate = true;
-  const material = new import_three2.MeshPhongMaterial({
-    map: texture,
-    transparent: true,
-    // @ref: https://threejs.org/docs/#api/en/materials/Material.alphaTest
-    alphaTest: 0.3
-  });
-  return material;
-};
-var GroundLabel = class extends import_maptalks2.BaseObject {
-  #angle = 0;
-  #bearing = 0;
-  #text = "";
-  #offsetX = 0;
-  #offsetY = 0;
-  #originalPosition = null;
-  #layer = null;
-  constructor(bound, options, layer) {
-    options = maptalks2.Util.extend({}, OPTIONS2, options, {
-      layer,
-      coordinate: bound
-    });
-    const {
-      altitude,
-      text,
-      fontSize,
-      fillStyle,
-      textAlign,
-      fontFamily,
-      textBaseline,
-      strokeStyle,
-      lineWidth,
-      angle = defaultRectAngleToCalc,
-      maxFontScale,
-      offsetX = 0,
-      offsetY = 0,
-      ...properties
-    } = options;
-    super();
-    this._initOptions(options);
-    this.properties = properties;
-    this.#offsetX = offsetX;
-    this.#offsetY = offsetY;
-    this.#layer = layer;
-    const material = getMaterial(text, {
-      fillStyle,
-      fontSize,
-      textAlign,
-      textBaseline,
-      fontFamily,
-      strokeStyle,
-      lineWidth
-    });
-    const rectAngles = (0, import_lodash_es.isArray)(angle) ? angle : [angle];
-    material.needsUpdate = true;
-    const rect = (0, import_d3plus_shape.largestRect)(bound, {
-      cache: true,
-      /**
-       * Black magic here:
-       * For some reason if we allow angle -90 or 90, some polygon will use that angle even if it's wrong angle to use.
-       * So we remove -90 and 90 from choices, and use -85 & 85 instead.
-       */
-      angle: rectAngles
-    });
-    const { cx, cy, width, angle: calculatedAngle } = rect;
-    this.#text = text;
-    this.#angle = calculatedAngle;
-    const geometry = new import_three2.PlaneGeometry(1, 1);
-    this._createMesh(geometry, material);
-    const z = layer.altitudeToVector3(altitude, altitude).x;
-    const basePosition = layer.coordinateToVector3({ x: cx, y: cy }, z);
-    this.#originalPosition = basePosition.clone();
-    const finalPosition = this.#calculateFinalPosition(basePosition);
-    const scale2 = width / 6456122659e-13;
-    const finalScale = maxFontScale && scale2 > maxFontScale ? maxFontScale : scale2;
-    this.getObject3d().scale.set(finalScale, finalScale, finalScale);
-    this.getObject3d().position.copy(finalPosition);
-    this.getObject3d().rotation.z = Math.PI / 180 * this.#angle;
-  }
-  #calculateFinalPosition(basePosition) {
-    if (this.#offsetX === 0 && this.#offsetY === 0) {
-      return basePosition;
-    }
-    const offsetCoordinate = {
-      x: this.#offsetX,
-      y: this.#offsetY
-    };
-    const z = this.#layer.altitudeToVector3(0, 0).x;
-    const offsetVector = this.#layer.coordinateToVector3(offsetCoordinate, z);
-    const zeroVector = this.#layer.coordinateToVector3({ x: 0, y: 0 }, z);
-    const worldOffsetX = offsetVector.x - zeroVector.x;
-    const worldOffsetY = offsetVector.y - zeroVector.y;
-    return {
-      x: basePosition.x + worldOffsetX,
-      y: basePosition.y + worldOffsetY,
-      z: basePosition.z
-    };
-  }
-  #updatePosition() {
-    if (this.#originalPosition && this.#layer) {
-      const finalPosition = this.#calculateFinalPosition(this.#originalPosition);
-      this.getObject3d().position.copy(finalPosition);
-    }
-  }
-  set bearing(value) {
-    this.#bearing = value;
-    const degree = this.#angle + this.#bearing;
-    const angle = degree > 90 || degree < -90 ? this.#angle + 180 : this.#angle;
-    this.getObject3d().rotation.z = Math.PI / 180 * angle;
-  }
-  get angle() {
-    return this.#angle;
-  }
-  get currentAngle() {
-    return this.#angle;
-  }
-  get text() {
-    return this.#text;
-  }
-  get offsetX() {
-    return this.#offsetX;
-  }
-  get offsetY() {
-    return this.#offsetY;
-  }
-  get offset() {
-    return { x: this.#offsetX, y: this.#offsetY };
-  }
-  set offsetX(value) {
-    if ((0, import_lodash_es.isNumber)(value)) {
-      this.#offsetX = value;
-      this.#updatePosition();
-    }
-  }
-  set offsetY(value) {
-    if ((0, import_lodash_es.isNumber)(value)) {
-      this.#offsetY = value;
-      this.#updatePosition();
-    }
-  }
-  set angle(newAngle) {
-    if ((0, import_lodash_es.isNumber)(newAngle)) {
-      this.#angle = newAngle;
-      this.getObject3d().rotation.z = Math.PI / 180 * this.#angle;
-    }
-  }
-  setOffset(offsetX, offsetY) {
-    if ((0, import_lodash_es.isNumber)(offsetX) && (0, import_lodash_es.isNumber)(offsetY)) {
-      this.#offsetX = offsetX;
-      this.#offsetY = offsetY;
-      this.#updatePosition();
-    }
-  }
-  addOffset(deltaX, deltaY) {
-    if ((0, import_lodash_es.isNumber)(deltaX) && (0, import_lodash_es.isNumber)(deltaY)) {
-      this.#offsetX += deltaX;
-      this.#offsetY += deltaY;
-      this.#updatePosition();
-    }
-  }
-  resetOffset() {
-    this.#offsetX = 0;
-    this.#offsetY = 0;
-    this.#updatePosition();
-  }
-  moveToPosition(targetX, targetY) {
-    if (this.#originalPosition && this.#layer) {
-      const currentCenter = this.#layer.vector3ToCoordinate(
-        this.#originalPosition
-      );
-      this.#offsetX = targetX - currentCenter.x;
-      this.#offsetY = targetY - currentCenter.y;
-      this.#updatePosition();
-    }
-  }
-  updateText(newText, options = {}) {
-    this.#text = newText;
-    const materialOptions = {
-      fillStyle: options.fillStyle || this.properties.fillStyle,
-      fontSize: options.fontSize || this.properties.fontSize,
-      textAlign: options.textAlign || this.properties.textAlign,
-      textBaseline: options.textBaseline || this.properties.textBaseline,
-      fontFamily: options.fontFamily || this.properties.fontFamily,
-      strokeStyle: options.strokeStyle || this.properties.strokeStyle,
-      lineWidth: options.lineWidth || this.properties.lineWidth
-    };
-    const newMaterial = getMaterial(newText, materialOptions);
-    this.getObject3d().material = newMaterial;
-    newMaterial.needsUpdate = true;
-  }
-};
-
-// src/IndoorMap/object3d/SpriteMarker.ts
-var import_maptalks3 = require("maptalks.three");
-var import_three3 = require("three");
-var import_lodash2 = __toESM(require("lodash"));
-var DEFAULT_SCALE = 0.05;
-var DEFAULT_ALTITUDE = 0;
-var DEFAULT_ALPHATEST = 0.3;
-var DEFAULT_OPTIONS = {
-  scale: DEFAULT_SCALE,
-  altitude: DEFAULT_ALTITUDE,
-  alphaTest: DEFAULT_ALPHATEST,
-  highlight: {
-    options: {
-      scale: DEFAULT_SCALE * 1.25
-    },
-    material: null
-  }
-};
-var SpriteMarker = class extends import_maptalks3.BaseObject {
+var SpriteMarker = class extends import_maptalks2.BaseObject {
   #default = null;
   #highlight = null;
   constructor(coordinate, options, material, layer, properties) {
@@ -1373,18 +1086,18 @@ var SpriteMarker = class extends import_maptalks3.BaseObject {
     this._createGroup();
     const {
       altitude = DEFAULT_OPTIONS.altitude,
-      scale: scale2 = DEFAULT_OPTIONS.scale,
+      scale: scale3 = DEFAULT_OPTIONS.scale,
       highlight = DEFAULT_OPTIONS.highlight,
       alphaTest = DEFAULT_OPTIONS.alphaTest
     } = options;
     this.properties = { ...properties };
     const modifiedAltitude = altitude + 2;
-    this.#default = { options: { scale: scale2, altitude: modifiedAltitude }, material };
+    this.#default = { options: { scale: scale3, altitude: modifiedAltitude }, material };
     this.#highlight = import_lodash2.default.merge({}, DEFAULT_OPTIONS.highlight, highlight);
-    if (material && material instanceof import_three3.SpriteMaterial)
+    if (material && material instanceof import_three2.SpriteMaterial)
       material.alphaTest = alphaTest;
-    const sprite = new import_three3.Sprite(material);
-    sprite.scale.set(scale2, scale2, scale2);
+    const sprite = new import_three2.Sprite(material);
+    sprite.scale.set(scale3, scale3, scale3);
     const obj3d = this.getObject3d();
     obj3d.add(sprite);
     const z = layer.altitudeToVector3(modifiedAltitude, modifiedAltitude).x;
@@ -1394,7 +1107,7 @@ var SpriteMarker = class extends import_maptalks3.BaseObject {
   }
   // Different objects need to implement their own methods
   setSymbol(material) {
-    if (material && material instanceof import_three3.SpriteMaterial) {
+    if (material && material instanceof import_three2.SpriteMaterial) {
       const sprite = this.getObject3d().children[0];
       if (!sprite) return this;
       sprite.material = material;
@@ -1429,10 +1142,10 @@ var SpriteMarker = class extends import_maptalks3.BaseObject {
 };
 
 // src/IndoorMap/object3d/NavigationPath.ts
-var maptalks3 = __toESM(require("maptalks"));
-var import_maptalks4 = require("maptalks.three");
-var import_three4 = require("three");
-var OPTIONS3 = {
+var maptalks2 = __toESM(require("maptalks"));
+var import_maptalks3 = require("maptalks.three");
+var import_three3 = require("three");
+var OPTIONS2 = {
   altitude: 0
 };
 var DEFAULT_LINE_OPTION = {
@@ -1444,18 +1157,18 @@ var DEFAULT_LINE_EFFECT_OPTION = {
   opacity: 1
 };
 var ENABLE_ANIMATED_PATH = true;
-var NavigationPath = class extends import_maptalks4.BaseObject {
+var NavigationPath = class extends import_maptalks3.BaseObject {
   constructor(feature2, layer, properties, options, lineOptions = DEFAULT_LINE_OPTION, outlineOption = DEFAULT_LINE_EFFECT_OPTION) {
-    options = maptalks3.Util.extend({}, OPTIONS3, options, {
+    options = maptalks2.Util.extend({}, OPTIONS2, options, {
       layer
     });
     super();
     this._initOptions(options);
-    const { altitude = OPTIONS3.altitude } = options;
+    const { altitude = OPTIONS2.altitude } = options;
     this.properties = { ...properties };
     this._createGroup();
     const { color: lineColor, opacity: lineOpacity } = lineOptions || DEFAULT_LINE_OPTION;
-    const staticMaterial = new import_three4.MeshBasicMaterial({
+    const staticMaterial = new import_three3.MeshBasicMaterial({
       transparent: true,
       color: lineColor || "#fff",
       opacity: lineOpacity || 1,
@@ -1463,12 +1176,12 @@ var NavigationPath = class extends import_maptalks4.BaseObject {
     });
     const uniforms = {
       time: { value: 0 },
-      color: { value: new import_three4.Color(lineColor || "#fff") },
+      color: { value: new import_three3.Color(lineColor || "#fff") },
       opacity: { value: lineOpacity || 1 }
     };
     this._uniforms = uniforms;
     this._t = 0;
-    const animatedMaterial = new import_three4.ShaderMaterial({
+    const animatedMaterial = new import_three3.ShaderMaterial({
       uniforms,
       transparent: true,
       depthWrite: false,
@@ -1491,7 +1204,7 @@ var NavigationPath = class extends import_maptalks4.BaseObject {
         }
       `
     });
-    const pathGeometry = maptalks3.GeoJSON.toGeometry(feature2);
+    const pathGeometry = maptalks2.GeoJSON.toGeometry(feature2);
     const line = layer.toPath(
       pathGeometry,
       {
@@ -1502,7 +1215,7 @@ var NavigationPath = class extends import_maptalks4.BaseObject {
       ENABLE_ANIMATED_PATH ? animatedMaterial : staticMaterial
     );
     const { color: outlineColor, opacity: outlineOpacity } = outlineOption || {};
-    const outlineMaterial = new import_three4.MeshBasicMaterial({
+    const outlineMaterial = new import_three3.MeshBasicMaterial({
       transparent: true,
       color: outlineColor || "#fff",
       opacity: outlineOpacity || 1
@@ -1549,8 +1262,8 @@ var createPolygonFromLineString = (geometry) => {
   const right = (0, import_line_offset.default)(line, -0.3, { units: "meters" });
   const leftCoords = left.geometry.coordinates;
   const rightCoords = right.geometry.coordinates.reverse();
-  const polygon = [...leftCoords, ...rightCoords, leftCoords[0]];
-  return [polygon];
+  const polygon2 = [...leftCoords, ...rightCoords, leftCoords[0]];
+  return [polygon2];
 };
 
 // src/IndoorMap/utils/svg.ts
@@ -1584,14 +1297,14 @@ var createSVGPathFromMarkerSymbol = (style) => {
     markerFill,
     markerPath
   } = style;
-  const scale2 = markerWidth / 24;
-  return `<path d="${markerPath}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${markerFill}"/>`;
+  const scale3 = markerWidth / 24;
+  return `<path d="${markerPath}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale3})" fill="${markerFill}"/>`;
 };
 
 // src/IndoorMap/utils/createElements.js
 var GeometryType = {
-  Polygon: import_maptalks5.Polygon,
-  MultiPolygon: import_maptalks5.MultiPolygon
+  Polygon: import_maptalks4.Polygon,
+  MultiPolygon: import_maptalks4.MultiPolygon
 };
 var ORDINAL_HEIGHT = 0;
 var VENUE_Z_INDEX = 0;
@@ -1726,8 +1439,8 @@ var createObstructionalFixture = (feature2, style = {}, options = {}) => {
   if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
   if (inheritFillColorToLine) symbolStyle.lineColor = symbolStyle.polygonFill;
   if (geometry.type === "LineString") {
-    const polygon = createPolygonFromLineString(geometry);
-    return new GeometryType["Polygon"](polygon, {
+    const polygon2 = createPolygonFromLineString(geometry);
+    return new GeometryType["Polygon"](polygon2, {
       properties: {
         altitude: getAltitude(properties)
       },
@@ -1795,7 +1508,7 @@ var createPrincipalOpening = (feature2, style, options = {}) => {
   const symbolStyle = { ...style };
   if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
   try {
-    return new import_maptalks5.LineString(geometry.coordinates, {
+    return new import_maptalks4.LineString(geometry.coordinates, {
       properties: {
         altitude: getAltitude(properties)
       },
@@ -1812,7 +1525,7 @@ var createEmergencyExitOpening = (feature2, style, options = {}) => {
   const symbolStyle = { ...style };
   if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
   try {
-    return new import_maptalks5.LineString(geometry.coordinates, {
+    return new import_maptalks4.LineString(geometry.coordinates, {
       properties: {
         altitude: getAltitude(properties)
       },
@@ -1829,7 +1542,7 @@ var createPedestrianOpening = (feature2, style, options = {}) => {
   const symbolStyle = { ...style };
   if (allowOverride) import_lodash4.default.merge(symbolStyle, properties.style);
   try {
-    return new import_maptalks5.LineString(geometry.coordinates, {
+    return new import_maptalks4.LineString(geometry.coordinates, {
       properties: {
         id,
         feature_type: "opening",
@@ -1843,48 +1556,6 @@ var createPedestrianOpening = (feature2, style, options = {}) => {
     console.log(`error creating pedestrian opening:`, feature2);
   }
 };
-var loadModel3d = (model3d, coordinate, threeLayer) => {
-  return new Promise((resolve, reject) => {
-    const loader = new import_GLTFLoader.GLTFLoader();
-    const { url, properties: modelProperties } = model3d;
-    loader.load(
-      url,
-      (gltf) => {
-        const object3d = gltf.scene;
-        object3d.rotation.x = import_lodash4.default.get(modelProperties, "rotation.x");
-        object3d.rotation.y = import_lodash4.default.get(modelProperties, "rotation.y");
-        object3d.scale.set(...import_lodash4.default.get(modelProperties, "scale") || []);
-        const object = threeLayer.toModel(object3d, {
-          coordinate
-        });
-        object.getObject3d().traverse((child) => {
-          if (child.isMesh === true) {
-            child.material.transparent = true;
-            child.material.metalness = 0.1;
-          }
-        });
-        resolve(object);
-      },
-      (xhr) => {
-      },
-      (error) => {
-        reject(error);
-      }
-    );
-  });
-};
-var create3DModels = async (models, defaultCoordinate, properties, threeLayer) => {
-  let modelObjs = [];
-  for (let j = 0; j < models.length; j++) {
-    const model = models[j];
-    const positionCoord = import_lodash4.default.get(model, "properties.position");
-    const coord = positionCoord || defaultCoordinate;
-    const object = await loadModel3d(model, coord, threeLayer);
-    object.properties = properties;
-    modelObjs.push(object);
-  }
-  return modelObjs;
-};
 var createExtrudePolygon = (geometry, threeLayer, material, height, properties = {}, options) => {
   const { offset = 0, altitude = 0 } = options;
   const offsetGeometry = (0, import_buffer.default)(geometry, offset, { units: "meters" });
@@ -1929,7 +1600,7 @@ var getFeatureMarkerConfig = (feature2, mapConfig = {}) => {
   };
 };
 var createSpriteMaterialByLabelSymbol = (labelSymbol = []) => {
-  const material = new import_three5.SpriteMaterial();
+  const material = new import_three4.SpriteMaterial();
   try {
     const [base, icon] = labelSymbol;
     const { markerWidth: baseWidth = 24 } = base;
@@ -1938,7 +1609,7 @@ var createSpriteMaterialByLabelSymbol = (labelSymbol = []) => {
     const baseSVG = createSVGPathFromMarkerSymbol(base);
     const iconSVG = createSVGPathFromMarkerSymbol(icon);
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${viewBoxDimension}" height="${viewBoxDimension}">${baseSVG}${iconSVG}</svg>`;
-    const textureLoader = new import_three5.TextureLoader();
+    const textureLoader = new import_three4.TextureLoader();
     const scaleFactor = 200 / 24;
     svgToPng(svg, scaleFactor).then((png) => {
       const texture = textureLoader.load(png, () => {
@@ -2095,7 +1766,7 @@ var styledFeatureGenerator = (mapTheme) => {
     switch (renderType) {
       case "Logo":
         import_lodash4.default.set(priorityMarkerSymbol, "markerFile", logoUrl);
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties) + markerHeight,
             ...baseProperties
@@ -2103,7 +1774,7 @@ var styledFeatureGenerator = (mapTheme) => {
           symbol: priorityLabelSymbol
         });
       case "Logo + Name":
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             name: occupantName.en,
             altitude: getAltitude(properties) + markerHeight,
@@ -2123,7 +1794,7 @@ var styledFeatureGenerator = (mapTheme) => {
           }
         });
       case "None":
-        return new import_maptalks5.ui.UIMarker(coordinates, {
+        return new import_maptalks4.ui.UIMarker(coordinates, {
           properties: { ...baseProperties },
           content: createStyledUIMarkerElement({
             style: { display: "none" },
@@ -2134,7 +1805,7 @@ var styledFeatureGenerator = (mapTheme) => {
       case "Name":
       default:
         if (textMarkerType === "marker") {
-          return new import_maptalks5.Marker(coordinates, {
+          return new import_maptalks4.Marker(coordinates, {
             properties: {
               name: occupantName.en,
               altitude: getAltitude(properties) + markerHeight,
@@ -2164,7 +1835,7 @@ var styledFeatureGenerator = (mapTheme) => {
           `occupant-${import_lodash4.default.toLower(renderType)}-${renderPriority}`
         );
         const style = { ...uiMarkerSymbol, ...uiMarkerPrioritySymbol };
-        return new import_maptalks5.ui.UIMarker(coordinates, {
+        return new import_maptalks4.ui.UIMarker(coordinates, {
           properties: { ...baseProperties },
           content: createStyledUIMarkerElement({
             style,
@@ -2241,7 +1912,7 @@ var styledFeatureGenerator = (mapTheme) => {
         const { geometry, properties } = feature2;
         const coordinates = getCenterFromGeometry(geometry);
         const markerSymbol = getElementSymbol("pin-marker");
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties)
           },
@@ -2256,7 +1927,7 @@ var styledFeatureGenerator = (mapTheme) => {
       const coordinates = getCenterFromGeometry(geometry);
       const markerSymbol = getElementSymbol("origin-marker");
       try {
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties)
           },
@@ -2278,7 +1949,7 @@ var styledFeatureGenerator = (mapTheme) => {
       const coordinates = getCenterFromGeometry(geometry);
       const symbol = getElementSymbol("pin-marker");
       try {
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties) + markerHeight
           },
@@ -2303,7 +1974,7 @@ var styledFeatureGenerator = (mapTheme) => {
         "highlighted-logo-marker"
       );
       try {
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties) + markerHeight
           },
@@ -2319,7 +1990,7 @@ var styledFeatureGenerator = (mapTheme) => {
         const { geometry, properties } = feature2;
         const coordinates = getCenterFromGeometry(geometry);
         const symbolStyle = getElementSymbol("user-location") || {};
-        const marker = new import_maptalks5.Marker(coordinates, {
+        const marker = new import_maptalks4.Marker(coordinates, {
           properties: {
             altitude: getAltitude(properties),
             ordinal: properties.ordinal !== null ? properties.ordinal : null
@@ -2348,7 +2019,7 @@ var styledFeatureGenerator = (mapTheme) => {
         const coordinates = getCenterFromGeometry(geometry);
         const symbolStyle = getElementSymbol("last-user-location") || {};
         const options = getElementOptions("last-user-location") || {};
-        const marker = new import_maptalks5.Marker(coordinates, {
+        const marker = new import_maptalks4.Marker(coordinates, {
           properties: {
             ...options,
             altitude: getAltitude(properties),
@@ -2380,14 +2051,14 @@ var styledFeatureGenerator = (mapTheme) => {
       const coordinates = import_lodash4.default.get(geometry, "coordinates");
       const logoUrl = import_lodash4.default.get(properties, "logo.url");
       if (markerSymbol) {
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: markerProperties,
           symbol: markerSymbol
         });
       }
       if (!logoUrl) {
         const symbol = getElementSymbol("pin-marker");
-        return new import_maptalks5.Marker(coordinates, {
+        return new import_maptalks4.Marker(coordinates, {
           properties: markerProperties,
           symbol
         });
@@ -2395,7 +2066,7 @@ var styledFeatureGenerator = (mapTheme) => {
       const labelSymbol = getLabelSymbol("highlight-occupant-logo");
       const priorityMarkerSymbol = import_lodash4.default.last(labelSymbol) || {};
       import_lodash4.default.set(priorityMarkerSymbol, "markerFile", logoUrl);
-      return new import_maptalks5.Marker(coordinates, {
+      return new import_maptalks4.Marker(coordinates, {
         properties: markerProperties,
         symbol: labelSymbol
       });
@@ -2412,7 +2083,7 @@ var styledFeatureGenerator = (mapTheme) => {
       const kioskHeight = import_lodash4.default.get(kioskConfig, "height", 0);
       const markerHeight = unitHeight + kioskHeight;
       const symbol = getElementSymbol("highlight-amenity-marker");
-      return new import_maptalks5.Marker(coordinates, {
+      return new import_maptalks4.Marker(coordinates, {
         properties: {
           ...feature2,
           altitude: markerHeight
@@ -2489,24 +2160,24 @@ var styledFeatureGenerator = (mapTheme) => {
         switch (geometry.type) {
           case "Point":
             return [
-              geometry?.getCoordinates ? geometry?.getCoordinates() : new import_maptalks5.Coordinate(geometry.coordinates)
+              geometry?.getCoordinates ? geometry?.getCoordinates() : new import_maptalks4.Coordinate(geometry.coordinates)
             ];
           case "Polygon":
             return [
-              geometry?.getCenter ? geometry?.getCenter() : new import_maptalks5.Polygon(geometry.coordinates).getCenter()
+              geometry?.getCenter ? geometry?.getCenter() : new import_maptalks4.Polygon(geometry.coordinates).getCenter()
             ];
           case "MultiPolygon":
             return [
-              geometry?.getCenter ? geometry?.getCenter() : new import_maptalks5.MultiPolygon(geometry.coordinates).getCenter()
+              geometry?.getCenter ? geometry?.getCenter() : new import_maptalks4.MultiPolygon(geometry.coordinates).getCenter()
             ];
           case "LineString":
           default:
-            return geometry?.getCoordinates ? geometry?.getCoordinates() : new import_maptalks5.LineString(geometry.coordinates).getCoordinates();
+            return geometry?.getCoordinates ? geometry?.getCoordinates() : new import_maptalks4.LineString(geometry.coordinates).getCoordinates();
         }
       }).flatten().value();
       const stepPathLineSymbol = getElementSymbol("navigation-path");
       const startPathSymbolMarker = getElementSymbol("navigation-path-start");
-      const line = new import_maptalks5.LineString(mergedCoordinates, {
+      const line = new import_maptalks4.LineString(mergedCoordinates, {
         smoothness: 0.5,
         symbol: [...stepPathLineSymbol, startPathSymbolMarker]
       });
@@ -2547,115 +2218,23 @@ var styledFeatureGenerator = (mapTheme) => {
       };
       switch (type) {
         case "Polygon":
-          return new import_maptalks5.Polygon(coordinates, formattedProperties);
+          return new import_maptalks4.Polygon(coordinates, formattedProperties);
         case "MultiPolygon":
-          return new import_maptalks5.MultiPolygon(coordinates, formattedProperties);
+          return new import_maptalks4.MultiPolygon(coordinates, formattedProperties);
         case "LineString":
-          return new import_maptalks5.LineString(coordinates, formattedProperties);
+          return new import_maptalks4.LineString(coordinates, formattedProperties);
         case "MultiLineString":
-          return new import_maptalks5.MultiLineString(coordinates, formattedProperties);
+          return new import_maptalks4.MultiLineString(coordinates, formattedProperties);
         default:
           return null;
       }
     },
-    /** Three JS */
-    create3DFootprint: async (feature2, threeLayer, options) => {
-      const objects = [];
-      const extrudeHeight = import_lodash4.default.get(options, "height");
-      if (!extrudeHeight) return objects;
-      const { properties } = feature2;
-      const footprintProperties = getFeatureProperties(feature2);
-      const hasModel3ds = Array.isArray(properties.model3d) && properties.model3d.length > 0;
-      if (hasModel3ds) {
-        const models = properties.model3d;
-        const center2 = (0, import_center2.default)(feature2);
-        const coordinate = import_lodash4.default.get(center2, "geometry.coordinates");
-        for (const model of models) {
-          const object = await loadModel3d(model, coordinate, threeLayer);
-          object.properties = footprintProperties;
-          objects.push(object);
-        }
-      } else {
-        const color = footprintProperties.defaultColor;
-        if (color === "transparent") return;
-        const material = new import_three5.MeshLambertMaterial({
-          color,
-          transparent: true
-        });
-        const object = createExtrudePolygon(
-          feature2.geometry,
-          threeLayer,
-          material,
-          extrudeHeight,
-          footprintProperties,
-          {}
-        );
-        objects.push(object);
-      }
-      return objects;
-    },
-    create3DGroundLabel: (label, threeLayer) => {
-      const text = label.properties.name;
-      const bound = label.geometry.coordinates[0];
-      if (import_lodash4.default.isNil(bound)) throw new Error("Invalid coordinates");
-      const groundLabelSymbol = getElementSymbol("ground-label");
-      const featureSymbol = import_lodash4.default.get(label, "properties", {});
-      const groundLabelOptions = import_lodash4.default.merge(
-        {},
-        { text },
-        groundLabelSymbol,
-        featureSymbol
-      );
-      return new GroundLabel(bound, groundLabelOptions, threeLayer);
-    },
-    createOccupantGroundLabel: (feature2, location, mapConfig, threeLayer) => {
-      const text = feature2.properties.name.en;
-      const bound = location.geometry.coordinates[0];
-      if (import_lodash4.default.isNil(bound)) throw new Error("Invalid coordinates");
-      const groundLabelSymbol = getElementSymbol("occupant-flat-label");
-      const groundLabelOptions = getElementOptions("occupant-flat-label");
-      const baseAltitude = getAltitude(location.properties);
-      const extrudeHeight = import_lodash4.default.get(
-        mapConfig,
-        "extrudeConfig.unit.room.height",
-        0
-      );
-      const totalAltitude = baseAltitude + extrudeHeight + 0.05;
-      const customAngle = import_lodash4.default.get(feature2, "properties.style.angle");
-      const offsetX = import_lodash4.default.get(feature2, "properties.style.offsetX", 0);
-      const offsetY = import_lodash4.default.get(feature2, "properties.style.offsetY", 0);
-      const featureSymbol = {
-        name: text,
-        ordinal: location.properties.ordinal,
-        venue_id: feature2.properties.venue_id
-      };
-      const mergedGroundLabelOptions = import_lodash4.default.merge(
-        {},
-        { text },
-        groundLabelSymbol,
-        groundLabelOptions,
-        featureSymbol,
-        {
-          altitude: totalAltitude,
-          offsetX,
-          offsetY,
-          // set custom angle
-          ...!import_lodash4.default.isNil(customAngle) ? { angle: customAngle } : {}
-        }
-      );
-      const groundLabel = new GroundLabel(
-        bound,
-        mergedGroundLabelOptions,
-        threeLayer
-      );
-      return groundLabel;
-    },
     create3DBillboard: (billboard, threeLayer) => {
       const { id, feature_type, properties } = billboard;
       const {
         logo,
         altitude,
-        scale: scale2,
+        scale: scale3,
         alphaTest,
         legColor,
         showLeg,
@@ -2669,7 +2248,7 @@ var styledFeatureGenerator = (mapTheme) => {
       };
       const options = {
         altitude,
-        scale: scale2,
+        scale: scale3,
         alphaTest,
         legColor,
         showLeg,
@@ -2792,44 +2371,6 @@ var styledFeatureGenerator = (mapTheme) => {
         markerProperties
       );
     },
-    createVenue3DModel: async (venue, threeLayer) => {
-      const { id, feature_type, properties } = venue;
-      const { category, model3d } = properties;
-      const modelProperty = {
-        id,
-        feature_type,
-        category
-      };
-      const center2 = (0, import_center2.default)(venue);
-      const centerCoord = import_lodash4.default.get(center2, "geometry.coordinates");
-      const modelPosition = import_lodash4.default.get(model3d, "properties.position", centerCoord);
-      const models = await create3DModels(
-        model3d,
-        modelPosition,
-        modelProperty,
-        threeLayer
-      );
-      return models;
-    },
-    create3DFixture: async (fixture, threeLayer) => {
-      const { id, feature_type, properties } = fixture;
-      const { category, ordinal, model3d } = properties;
-      const modelProperty = {
-        id,
-        feature_type,
-        category,
-        ordinal
-      };
-      const center2 = (0, import_center2.default)(fixture);
-      const coordinate = import_lodash4.default.get(center2, "geometry.coordinates");
-      const models = await create3DModels(
-        model3d,
-        coordinate,
-        modelProperty,
-        threeLayer
-      );
-      return models;
-    },
     createExtrudedUnit: (unit, threeLayer, options) => {
       const extrudeHeight = import_lodash4.default.get(options, "height");
       if (!extrudeHeight) return;
@@ -2841,15 +2382,15 @@ var styledFeatureGenerator = (mapTheme) => {
       };
       const color = unitProperty.defaultColor;
       if (color === "transparent") return;
-      const material = new import_three5.MeshLambertMaterial({
+      const material = new import_three4.MeshLambertMaterial({
         color,
         transparent: true
       });
       if (unit.geometry.type === "LineString") {
-        const polygon = createPolygonFromLineString(unit.geometry);
+        const polygon2 = createPolygonFromLineString(unit.geometry);
         const geometry = {
           type: "Polygon",
-          coordinates: polygon
+          coordinates: polygon2
         };
         return createExtrudePolygon(
           geometry,
@@ -2869,24 +2410,6 @@ var styledFeatureGenerator = (mapTheme) => {
         options3d
       );
       return object;
-    },
-    createAmbientLight: (config) => {
-      const { color: colorString = "0xffffff", intensity = 1 } = config;
-      const color = parseInt(colorString, 16);
-      const ambientLight = new import_three5.AmbientLight(color, intensity);
-      return ambientLight;
-    },
-    createDirectionalLight: (config) => {
-      const {
-        color: colorString = "0xffffff",
-        intensity = 1,
-        position: positionString = [0, 0, 0]
-      } = config;
-      const color = parseInt(colorString, 16);
-      const [x, y, z] = positionString;
-      const light = new import_three5.DirectionalLight(color, intensity);
-      light.position.set(x, y, z).normalize();
-      return light;
     }
   };
 };
@@ -2969,9 +2492,9 @@ var getRelatedLocationsByAmenity = (feature2) => {
 var getRelatedLocationIdsByFeature = (feature2) => {
   switch (feature2?.feature_type) {
     case "amenity":
-      return getRelatedLocationsByAmenity(feature2).map((v) => v?.id);
+      return getRelatedLocationsByAmenity(feature2).map((v2) => v2?.id);
     case "occupant":
-      return getRelatedLocationsByOccupant(feature2).map((v) => v?.id);
+      return getRelatedLocationsByOccupant(feature2).map((v2) => v2?.id);
     default:
       return [];
   }
@@ -3016,48 +2539,134 @@ var getSuitablyValueBetweenBearings = (newBearing, currentBearing) => {
   return newBearing;
 };
 
-// src/IndoorMap/utils/createHighlightElement.ts
-var import_three6 = require("three");
-var import_lodash5 = __toESM(require("lodash"));
-var import_tween = __toESM(require("@tweenjs/tween.js"));
-var DEFAULT_ALTITUDE_FACTOR = 0.5;
-var createHighlighBillboardController = (obj, { altitudeFactor = DEFAULT_ALTITUDE_FACTOR } = {}) => {
-  const controller = { start: () => {
-  }, clear: () => {
-  } };
-  if (!(obj instanceof Billboard)) return controller;
-  const altitude = obj.properties.default.altitude;
-  const newAltitude = import_lodash5.default.clamp(altitude * altitudeFactor, 0, altitude);
-  const tween = new import_tween.default.Tween({ altitude }).to({ altitude: newAltitude }, 800).easing(import_tween.default.Easing.Quartic.Out).onUpdate((newUpdate) => {
-    obj.setLineHeight(newUpdate.altitude);
+// src/IndoorMap/camera/CameraManager.ts
+var import_maptalks5 = require("maptalks");
+
+// ../../node_modules/@turf/meta/dist/esm/index.js
+function coordEach(geojson, callback, excludeWrapCoord) {
+  if (geojson === null) return;
+  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
+  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
+    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
+    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
+    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
+    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
+      var multiFeatureIndex = 0;
+      var geometryIndex = 0;
+      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
+      if (geometry === null) continue;
+      coords = geometry.coordinates;
+      var geomType = geometry.type;
+      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
+      switch (geomType) {
+        case null:
+          break;
+        case "Point":
+          if (callback(
+            coords,
+            coordIndex,
+            featureIndex,
+            multiFeatureIndex,
+            geometryIndex
+          ) === false)
+            return false;
+          coordIndex++;
+          multiFeatureIndex++;
+          break;
+        case "LineString":
+        case "MultiPoint":
+          for (j = 0; j < coords.length; j++) {
+            if (callback(
+              coords[j],
+              coordIndex,
+              featureIndex,
+              multiFeatureIndex,
+              geometryIndex
+            ) === false)
+              return false;
+            coordIndex++;
+            if (geomType === "MultiPoint") multiFeatureIndex++;
+          }
+          if (geomType === "LineString") multiFeatureIndex++;
+          break;
+        case "Polygon":
+        case "MultiLineString":
+          for (j = 0; j < coords.length; j++) {
+            for (k = 0; k < coords[j].length - wrapShrink; k++) {
+              if (callback(
+                coords[j][k],
+                coordIndex,
+                featureIndex,
+                multiFeatureIndex,
+                geometryIndex
+              ) === false)
+                return false;
+              coordIndex++;
+            }
+            if (geomType === "MultiLineString") multiFeatureIndex++;
+            if (geomType === "Polygon") geometryIndex++;
+          }
+          if (geomType === "Polygon") multiFeatureIndex++;
+          break;
+        case "MultiPolygon":
+          for (j = 0; j < coords.length; j++) {
+            geometryIndex = 0;
+            for (k = 0; k < coords[j].length; k++) {
+              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
+                if (callback(
+                  coords[j][k][l],
+                  coordIndex,
+                  featureIndex,
+                  multiFeatureIndex,
+                  geometryIndex
+                ) === false)
+                  return false;
+                coordIndex++;
+              }
+              geometryIndex++;
+            }
+            multiFeatureIndex++;
+          }
+          break;
+        case "GeometryCollection":
+          for (j = 0; j < geometry.geometries.length; j++)
+            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
+              return false;
+          break;
+        default:
+          throw new Error("Unknown Geometry Type");
+      }
+    }
+  }
+}
+
+// ../../node_modules/@turf/bbox/dist/esm/index.js
+function bbox(geojson, options = {}) {
+  if (geojson.bbox != null && true !== options.recompute) {
+    return geojson.bbox;
+  }
+  const result = [Infinity, Infinity, -Infinity, -Infinity];
+  coordEach(geojson, (coord) => {
+    if (result[0] > coord[0]) {
+      result[0] = coord[0];
+    }
+    if (result[1] > coord[1]) {
+      result[1] = coord[1];
+    }
+    if (result[2] < coord[0]) {
+      result[2] = coord[0];
+    }
+    if (result[3] < coord[1]) {
+      result[3] = coord[1];
+    }
   });
-  controller.start = () => {
-    tween.start();
-  };
-  controller.clear = () => {
-    tween.stop().to({ altitude }, 1600).startFromCurrentValues();
-  };
-  return controller;
-};
-var createHighlighExtrudeObjectController = (obj, { color }) => {
-  const controller = { start: () => {
-  }, clear: () => {
-  } };
-  if (obj?.type !== "ExtrudePolygon" || import_lodash5.default.isNil(obj?.object3d?.material?.color) || import_lodash5.default.isNil(color))
-    return controller;
-  controller.start = () => {
-    obj.object3d.material.color = new import_three6.Color(color);
-  };
-  controller.clear = () => {
-    const objectDefaultColor = import_lodash5.default.get(obj, "properties.defaultColor");
-    obj.object3d.material.color = new import_three6.Color(objectDefaultColor);
-  };
-  return controller;
-};
+  return result;
+}
+var index_default = bbox;
 
 // src/IndoorMap/camera/CameraManager.ts
-var ZOOM_OUT_LEVEL = 21;
-var ZOOM_IN_LEVEL = 24;
+var import_transform_scale = __toESM(require("@turf/transform-scale"));
+var import_bbox_polygon = __toESM(require("@turf/bbox-polygon"));
 var CameraManager = class {
   map;
   constructor(map, options) {
@@ -3066,339 +2675,438 @@ var CameraManager = class {
       this.setView(options?.defaultView);
     }
   }
-  /** Private method */
-  #animateflyTo(viewOptions = {}, options = {}, callbackOption = () => {
-  }) {
-    const { start, end } = {
-      start: (frame) => {
-      },
-      end: (frame) => {
-      },
-      ...callbackOption
-    };
-    this.map.flyTo(viewOptions, options, (frame) => {
-      if (frame.state.playState === "running" && frame.state.progress === 0)
-        start(frame);
-      if (frame.state.playState === "finished") end(frame);
-    });
-  }
   /** Public methods */
   getView = () => {
     return this.map.getView();
   };
-  getZoom = () => {
-    return this.map.getView().zoom;
-  };
   setView = (value) => {
-    this.map.setView(value);
+    if (this.map && Object.keys(value).length !== 0) {
+      this.map.setView(value);
+    }
   };
-  flyTo = (center2, options = {}) => {
-    const currentView = this.getView();
-    const {
-      zoom = ZOOM_OUT_LEVEL,
-      pitch = 60,
-      duration = 600,
-      easing = "out",
-      bearing = currentView.bearing
-    } = options;
-    this.#animateflyTo(
-      {
-        center: center2,
-        zoom,
-        pitch,
-        bearing
-      },
-      { duration, easing }
-    );
+  animateTo = (view, options = {}, step) => {
+    this.map.animateTo(view, options, step);
   };
-  flyToAndZoomIn = (centerPoint, options = {}) => {
-    const {
-      zoom = ZOOM_IN_LEVEL,
-      pitch = 60,
-      duration = 600,
-      easing = "out"
-    } = options;
-    this.#animateflyTo(
-      {
-        center: centerPoint,
-        zoom,
-        pitch
-      },
-      { duration, easing }
+  setMaxExtent(extent) {
+    return this.map.setMaxExtent(extent);
+  }
+  getFeatureExtent = (feature2, scaleFactor = 1) => {
+    const [minX, minY, maxX, maxY] = index_default(
+      (0, import_transform_scale.default)((0, import_bbox_polygon.default)(index_default(feature2)), scaleFactor)
     );
+    return new import_maptalks5.Extent(minX, minY, maxX, maxY);
+  };
+  getExtentZoom = (extent, options = {
+    isFraction: false,
+    padding: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }) => {
+    const { isFraction = false, padding } = options;
+    return this.map.getFitZoom(extent, isFraction, padding);
   };
+  set maxZoom(value) {
+    this.map.setMaxZoom(value);
+    const spatialReference = {
+      projection: "EPSG:3857",
+      resolutions: (function() {
+        const resolutions = [];
+        const d = 2 * 6378137 * Math.PI;
+        for (let i = 0; i < value; i++) {
+          resolutions[i] = d / (256 * Math.pow(2, i));
+        }
+        return resolutions;
+      })()
+    };
+    this.map.setSpatialReference(spatialReference);
+  }
+  set minZoom(value) {
+    this.map.setMinZoom(value);
+  }
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
-var import_min = __toESM(require("lodash/min"));
+var import_lodash_es3 = require("lodash-es");
 var import_center3 = require("@turf/center");
-var import_maptalks8 = require("maptalks.three");
 var THREE3 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
-var maptalks4 = __toESM(require("maptalks"));
-var THREE2 = __toESM(require("three"));
-var import_GLTFLoader2 = require("three/examples/jsm/loaders/GLTFLoader");
-var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
+var maptalks4 = __toESM(require("maptalks-gl"));
+var THREE = __toESM(require("three"));
+var import_maptalks7 = require("maptalks.three");
 var import_buffer2 = __toESM(require("@turf/buffer"));
+var import_clean_coords = require("@turf/clean-coords");
+var import_polygon_to_line = require("@turf/polygon-to-line");
+var import_nearest_point_on_line = require("@turf/nearest-point-on-line");
+var import_length = require("@turf/length");
+var import_along = require("@turf/along");
+var import_point_to_line_distance = require("@turf/point-to-line-distance");
 
-// src/IndoorMap/renderer/3d/element3DRendererOptions.ts
-var element3DRendererOptions = {
-  unit: {
-    default: { color: "#ffffff", height: 4 },
-    byCategory: {
-      walkway: { color: "#cccccc", height: 0.1 },
-      terrace: { color: "#cccccc", height: 0.1 },
-      unenclosedarea: { color: "#cccccc", height: 0.2 },
-      nonpublic: { color: "#999999", height: 0.3 },
-      escalator: { height: 0.2 },
-      room: { color: "#ffffff", height: 2, bottomHeight: 0.12 }
-    }
-  },
-  kiosk: {
-    default: { color: "#666666", height: 0.6, bottomHeight: 0.12 }
-  },
-  fixture: {
-    default: { color: "#ffffff", height: 0.5 },
-    byCategory: {
-      water: { color: "#ACD7EC", height: 0.1 },
-      vegetation: { color: "#91C499", height: 0.5 }
-    }
-  }
-};
-
-// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var import_maptalks6 = require("maptalks");
-var THREE = __toESM(require("three"));
-var import_maptalks7 = require("maptalks.three");
-var import_lodash6 = require("lodash");
-
-// src/IndoorMap/renderer/utils/interpolateStops.ts
-var interpolateStops = ({ stops }, zoom) => {
-  if (zoom <= stops[0][0]) return stops[0][1];
-  if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
-  for (let i = 0; i < stops.length - 1; i++) {
-    const [z1, v1] = stops[i];
-    const [z2, v2] = stops[i + 1];
-    if (zoom >= z1 && zoom <= z2) {
-      const t = (zoom - z1) / (z2 - z1);
-      return v1 + t * (v2 - v1);
-    }
-  }
+// src/IndoorMap/renderer/3d/objects/GroundLabel.ts
+var maptalks3 = __toESM(require("maptalks-gl"));
+var import_maptalks6 = require("maptalks.three");
+var import_three5 = require("three");
+var import_d3plus_shape = require("d3plus-shape");
+var import_lodash_es2 = require("lodash-es");
+var OPTIONS3 = {
+  // Allowing click through and prevent interaction
+  interactive: false,
+  altitude: 0
 };
-
-// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var OPTIONS4 = {
-  // Texture options
-  text: "",
+var defaultFlatLabelOptions = {
+  fontSize: 14,
+  fontFamily: "Manrope",
+  fontWeight: 600,
+  margin: 0,
+  scaleMin: 0.5,
+  lineHeight: 1.05,
+  scaleStep: 0.05,
   textAlign: "center",
-  color: "#ffffff",
-  fontFamily: "sans-serif",
-  fontSize: 28,
-  fontWeight: 400,
-  background: "rgba(0, 0, 0, 0.2)",
-  lineHeight: 32,
-  padding: 8,
-  strokeColor: "#000000",
-  strokeWidth: 6,
-  strokeStyle: "round",
-  // Sprite options
-  /* Overall scale multiplier  */
-  scale: 1,
-  altitude: 0,
-  opacity: 1
+  textBaseline: "middle",
+  fillStyle: "#000"
 };
-var TextSpriteMarker = class extends import_maptalks7.BaseObject {
-  #altitudeOffset = 0;
-  constructor(coordinate, options, layer, properties = {}) {
-    options = import_maptalks6.Util.extend({}, OPTIONS4, options, { layer });
-    super();
-    this._coordinate = new import_maptalks6.Coordinate(coordinate);
-    this._initOptions(options);
-    this._createGroup();
-    this.properties = { ...properties };
-    const sprite = this._createSprite();
-    this.getObject3d().add(sprite);
-    this._updatePosition();
-    this.type = "TextSpriteMarker";
+var defaultRectAngleToCalc = (0, import_lodash_es2.range)(-90, 92, 2);
+var getMaterial = (text, flatLabelOptions) => {
+  const options = (0, import_lodash_es2.merge)({}, defaultFlatLabelOptions, flatLabelOptions);
+  const {
+    fontSize: initialFontSize,
+    fontFamily,
+    fontWeight,
+    margin,
+    scaleMin,
+    scaleStep,
+    fillStyle,
+    lineHeight,
+    textAlign,
+    strokeStyle,
+    lineWidth,
+    textBaseline
+  } = options;
+  const pixelMultiplier = 4;
+  const SIZE = 100 * pixelMultiplier;
+  const fontSize = initialFontSize * (pixelMultiplier * 1.25);
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = SIZE;
+  const ctx = canvas.getContext("2d");
+  ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", Arial`;
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+  ctx.fillStyle = fillStyle;
+  ctx.strokeStyle = strokeStyle;
+  ctx.lineWidth = lineWidth;
+  const wrapText = (ctx2, text2, maxWidth) => {
+    const words = text2.trim().split(/\s+/);
+    if (words.length <= 1) return [text2];
+    const lines = [];
+    const MAX_LINES = 3;
+    let currentLine = words[0];
+    for (let i = 1; i < words.length; i++) {
+      const lineToMeasure = currentLine + " " + words[i];
+      if (ctx2.measureText(lineToMeasure).width > maxWidth) {
+        lines.push(currentLine);
+        currentLine = words[i];
+      } else {
+        currentLine = lineToMeasure;
+      }
+    }
+    lines.push(currentLine);
+    return lines.slice(0, MAX_LINES);
+  };
+  const hasManualBreaks = text.includes("\n");
+  let texts;
+  if (hasManualBreaks) {
+    texts = text.split(/\n/g);
+  } else {
+    const maxWidth = SIZE - 2 * margin;
+    texts = wrapText(ctx, text, maxWidth);
   }
-  getOptions() {
-    return super.getOptions();
+  let textWidth = (0, import_lodash_es2.max)(texts.map((text2) => ctx.measureText(text2).width));
+  let scale3 = 1;
+  while (scale3 > 0 && textWidth + 2 * margin > SIZE) {
+    scale3 -= scaleStep;
+    ctx.font = `${fontWeight} ${scale3 * fontSize}px "${fontFamily}", Arial`;
+    textWidth = (0, import_lodash_es2.max)(texts.map((text2) => ctx.measureText(text2).width));
   }
-  _createSprite() {
-    const options = this.getOptions();
-    const texture = this._createTextTexture(options.text, options);
-    const material = new THREE.SpriteMaterial({
-      map: texture,
-      transparent: true,
-      alphaTest: 0.1
+  const center2 = { x: 0.5 * SIZE, y: 0.5 * SIZE };
+  if (scale3 > scaleMin) {
+    const totalHeight = texts.length * (fontSize * scale3 * lineHeight);
+    const startY = center2.y - totalHeight / 2 + fontSize * scale3 * lineHeight * 0.5;
+    texts.forEach((text2, index) => {
+      const yOffset = startY + index * (fontSize * scale3 * lineHeight);
+      if (strokeStyle && lineWidth) {
+        ctx.strokeText(text2, center2.x, yOffset);
+      }
+      ctx.fillText(text2, center2.x, yOffset);
     });
-    const sprite = new THREE.Sprite(material);
-    const w = texture.image.width;
-    const h = texture.image.height;
-    const base = 1 / 16;
-    const normalizedScale = options.scale / this.getMap().getGLRes();
-    sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
-    this.#altitudeOffset = Math.max(
-      h * base * options.scale * 0.5,
-      0.05
-      // minimum lift in world units
-    );
-    return sprite;
   }
-  _createTextTexture(text, options = {}) {
+  const texture = new import_three5.Texture(canvas);
+  texture.needsUpdate = true;
+  const material = new import_three5.MeshPhongMaterial({
+    map: texture,
+    transparent: true,
+    // @ref: https://threejs.org/docs/#api/en/materials/Material.alphaTest
+    alphaTest: 0.3
+  });
+  return material;
+};
+var GroundLabel = class extends import_maptalks6.BaseObject {
+  #angle = 0;
+  #bearing = 0;
+  #text = "";
+  #offsetX = 0;
+  #offsetY = 0;
+  #originalPosition = null;
+  #layer = null;
+  constructor(bound, text, options, layer) {
+    options = maptalks3.Util.extend({}, OPTIONS3, options, {
+      layer,
+      coordinate: bound
+    });
     const {
-      padding,
+      altitude = 0,
+      bottomHeight = 0,
       fontSize,
+      fillStyle,
+      textAlign,
       fontFamily,
-      fontWeight,
-      lineHeight,
-      background,
-      color,
+      textBaseline,
+      strokeStyle,
+      lineWidth,
+      angle = defaultRectAngleToCalc,
+      maxFontScale,
+      offsetX = 0,
+      offsetY = 0,
+      ...properties
+    } = options;
+    super();
+    this._initOptions(options);
+    this.properties = properties;
+    this.#offsetX = offsetX;
+    this.#offsetY = offsetY;
+    this.#layer = layer;
+    const material = getMaterial(text, {
+      fillStyle,
+      fontSize,
       textAlign,
-      strokeColor,
-      strokeWidth,
-      maxWidth
-    } = options || {};
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    const paragraphs = String(text).split("\n");
-    const wrappedLines = [];
-    paragraphs.forEach((paragraph) => {
-      if ((0, import_lodash6.isNil)(maxWidth) || isNaN(maxWidth)) {
-        wrappedLines.push(paragraph);
-        return;
-      }
-      const words = paragraph.split(/\s+/);
-      let currentLine = "";
-      words.forEach((word) => {
-        const testLine = currentLine ? currentLine + " " + word : word;
-        const testWidth = ctx.measureText(testLine).width;
-        if (testWidth > maxWidth && currentLine) {
-          wrappedLines.push(currentLine);
-          currentLine = word;
-        } else {
-          currentLine = testLine;
-        }
-      });
-      if (currentLine) {
-        wrappedLines.push(currentLine);
-      }
+      textBaseline,
+      fontFamily,
+      strokeStyle,
+      lineWidth
     });
-    const lines = wrappedLines.length ? wrappedLines : [""];
-    const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
-    const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
-    const finalHeight = lineHeight * lines.length + padding * 2;
-    canvas.width = finalWidth;
-    canvas.height = finalHeight;
-    const ctx2 = canvas.getContext("2d");
-    ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    ctx2.textAlign = textAlign;
-    if (background && background !== "transparent") {
-      ctx2.fillStyle = background;
-      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    const rectAngles = (0, import_lodash_es2.isArray)(angle) ? angle : [angle];
+    material.needsUpdate = true;
+    const rect = (0, import_d3plus_shape.largestRect)(bound, {
+      cache: true,
+      /**
+       * Black magic here:
+       * For some reason if we allow angle -90 or 90, some polygon will use that angle even if it's wrong angle to use.
+       * So we remove -90 and 90 from choices, and use -85 & 85 instead.
+       */
+      angle: rectAngles
+    });
+    const { cx, cy, width, angle: calculatedAngle } = rect;
+    this.#text = text;
+    this.#angle = calculatedAngle;
+    const geometry = new import_three5.PlaneGeometry(1, 1);
+    this._createMesh(geometry, material);
+    const z = layer.altitudeToVector3(altitude + bottomHeight, altitude + bottomHeight).x;
+    const basePosition = layer.coordinateToVector3([cx, cy], z);
+    this.#originalPosition = basePosition.clone();
+    const finalPosition = this.#calculateFinalPosition(basePosition);
+    const scale3 = width / 6456122659e-13;
+    const finalScale = maxFontScale && scale3 > maxFontScale ? maxFontScale : scale3;
+    this.getObject3d().scale.set(finalScale, finalScale, finalScale);
+    this.getObject3d().position.copy(finalPosition);
+    this.getObject3d().rotation.z = Math.PI / 180 * this.#angle;
+  }
+  #calculateFinalPosition(basePosition) {
+    if (this.#offsetX === 0 && this.#offsetY === 0) {
+      return basePosition;
+    }
+    const offsetCoordinate = [this.#offsetX, this.#offsetY];
+    const z = this.#layer.altitudeToVector3(0, 0).x;
+    const offsetVector = this.#layer.coordinateToVector3(offsetCoordinate, z);
+    const zeroVector = this.#layer.coordinateToVector3([0, 0], z);
+    const worldOffsetX = offsetVector.x - zeroVector.x;
+    const worldOffsetY = offsetVector.y - zeroVector.y;
+    return {
+      x: basePosition.x + worldOffsetX,
+      y: basePosition.y + worldOffsetY,
+      z: basePosition.z
+    };
+  }
+  #updatePosition() {
+    if (this.#originalPosition && this.#layer) {
+      const finalPosition = this.#calculateFinalPosition(this.#originalPosition);
+      this.getObject3d().position.copy(finalPosition);
     }
-    lines.forEach((line, i) => {
-      const y = padding + lineHeight * (i + 0.8);
-      let x = padding;
-      if (textAlign === "center") x = canvas.width / 2;
-      if (textAlign === "right" || textAlign === "end")
-        x = canvas.width - padding;
-      if (strokeWidth > 0) {
-        ctx2.lineWidth = strokeWidth;
-        ctx2.lineJoin = "round";
-        ctx2.miterLimit = 2;
-        ctx2.strokeStyle = strokeColor;
-        ctx2.strokeText(line, x, y);
-      }
-      ctx2.fillStyle = color;
-      ctx2.fillText(line, x, y);
-    });
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-    texture.minFilter = THREE.LinearFilter;
-    return texture;
   }
-  _updatePosition() {
-    const options = this.getOptions();
-    const layer = options.layer;
-    if (!layer) return;
-    const altitude = (options.altitude || 0) + this.#altitudeOffset;
-    const z = layer.altitudeToVector3(altitude, altitude).x;
-    const position = layer.coordinateToVector3(this._coordinate, z);
-    (0, import_lodash6.set)(this.properties, "default.position", position);
-    this.getObject3d().position.copy(position);
+  set bearing(value) {
+    this.#bearing = value;
+    const degree = this.#angle + this.#bearing;
+    const angle = degree > 90 || degree < -90 ? this.#angle + 180 : this.#angle;
+    this.getObject3d().rotation.z = Math.PI / 180 * angle;
   }
-  _animation() {
-    const layer = this.getLayer();
-    if (!this.isAdd || !layer) return;
-    if (this._visible === true) {
-      const zoom = layer.map.getZoom();
-      const object3d = this.getObject3d();
-      const { opacity } = this.getOptions();
-      let opacityValue;
-      if (typeof opacity === "number") {
-        opacityValue = opacity ?? 1;
-      } else if (Array.isArray(opacity.stops)) {
-        opacityValue = interpolateStops(opacity, zoom);
-      } else {
-        throw new Error(`Unknown opacity value ${opacity}`);
-      }
-      const visible = opacityValue > 0.5;
-      object3d.visible = visible;
+  get angle() {
+    return this.#angle;
+  }
+  get currentAngle() {
+    return this.#angle;
+  }
+  get text() {
+    return this.#text;
+  }
+  get offsetX() {
+    return this.#offsetX;
+  }
+  get offsetY() {
+    return this.#offsetY;
+  }
+  get offset() {
+    return { x: this.#offsetX, y: this.#offsetY };
+  }
+  set offsetX(value) {
+    if ((0, import_lodash_es2.isNumber)(value)) {
+      this.#offsetX = value;
+      this.#updatePosition();
     }
   }
-  setText(text) {
-    const options = this.getOptions();
-    options.text = text;
-    const newSprite = this._createSprite();
-    const group = this.getObject3d();
-    group.children.forEach((child) => group.remove(child));
-    group.add(newSprite);
-    this._updatePosition();
+  set offsetY(value) {
+    if ((0, import_lodash_es2.isNumber)(value)) {
+      this.#offsetY = value;
+      this.#updatePosition();
+    }
+  }
+  set angle(newAngle) {
+    if ((0, import_lodash_es2.isNumber)(newAngle)) {
+      this.#angle = newAngle;
+      this.getObject3d().rotation.z = Math.PI / 180 * this.#angle;
+    }
+  }
+  setOffset(offsetX, offsetY) {
+    if ((0, import_lodash_es2.isNumber)(offsetX) && (0, import_lodash_es2.isNumber)(offsetY)) {
+      this.#offsetX = offsetX;
+      this.#offsetY = offsetY;
+      this.#updatePosition();
+    }
+  }
+  addOffset(deltaX, deltaY) {
+    if ((0, import_lodash_es2.isNumber)(deltaX) && (0, import_lodash_es2.isNumber)(deltaY)) {
+      this.#offsetX += deltaX;
+      this.#offsetY += deltaY;
+      this.#updatePosition();
+    }
+  }
+  resetOffset() {
+    this.#offsetX = 0;
+    this.#offsetY = 0;
+    this.#updatePosition();
+  }
+  moveToPosition(targetX, targetY) {
+    if (this.#originalPosition && this.#layer) {
+      const currentCenter = this.#layer.vector3ToCoordinate(
+        this.#originalPosition
+      );
+      this.#offsetX = targetX - currentCenter.x;
+      this.#offsetY = targetY - currentCenter.y;
+      this.#updatePosition();
+    }
+  }
+  updateText(newText, options = {}) {
+    this.#text = newText;
+    const materialOptions = {
+      fillStyle: options.fillStyle || this.properties.fillStyle,
+      fontSize: options.fontSize || this.properties.fontSize,
+      textAlign: options.textAlign || this.properties.textAlign,
+      textBaseline: options.textBaseline || this.properties.textBaseline,
+      fontFamily: options.fontFamily || this.properties.fontFamily,
+      strokeStyle: options.strokeStyle || this.properties.strokeStyle,
+      lineWidth: options.lineWidth || this.properties.lineWidth
+    };
+    const newMaterial = getMaterial(newText, materialOptions);
+    this.getObject3d().material = newMaterial;
+    newMaterial.needsUpdate = true;
   }
+  _animation() {
+    const map = this.getMap();
+    if (!map) return;
+    const bearing = map.getBearing();
+    this.bearing = bearing;
+  }
+  // Add bottomHeight to altitude as final altitude position
   setAltitude(altitude) {
     const bottomHeight = this.options.bottomHeight ?? 0;
-    return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
+    return super.setAltitude(altitude + bottomHeight);
   }
 };
 
-// src/IndoorMap/renderer/3d/Element3DRenderer.ts
+// src/IndoorMap/renderer/3d/element3DRendererOptions.ts
+var element3DRendererOptions = {
+  unit: {
+    default: { color: "#ffffff", height: 0.2 },
+    byCategory: {
+      walkway: { color: "#cccccc", height: 0.1 },
+      terrace: { color: "#cccccc", height: 0.1 },
+      unenclosedarea: { color: "#cccccc", height: 0.2 },
+      nonpublic: { color: "#999999", height: 0.3 },
+      escalator: { height: 0.2 },
+      parking: { color: "#999999", height: 0.1 },
+      room: { color: "#ffffff", height: 0.5, bottomHeight: 0.12 }
+    }
+  },
+  kiosk: {
+    default: { color: "#666666", height: 0.6, bottomHeight: 0.12 }
+  },
+  fixture: {
+    default: { color: "#ffffff", height: 0.5 },
+    byCategory: {
+      water: { color: "#ACD7EC", height: 0.1 },
+      vegetation: { color: "#91C499", height: 0.5 },
+      wall: { color: "#787878", topColor: "#ffffff", height: 4.2, width: 1 }
+    }
+  }
+};
+
+// src/IndoorMap/renderer/3d/utils/get3DRendererOption.ts
 var DEFAULT_POLYGON_OPTION = {
   color: "#FFFFFF",
   offset: 0,
   altitude: 0
 };
-var HEIGHT_METER = 4;
-var MULTIORDINAL_HEIGHT_METER = 9;
-var getGeometryOption = (feature2, options) => {
+var get3DRendererOption = (featureType, category, options) => {
   try {
-    const option = options[feature2.feature_type] ?? element3DRendererOptions[feature2.feature_type];
-    const category = feature2.properties.category;
+    const option = options[featureType] ?? element3DRendererOptions[featureType];
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
   } catch (err) {
-    console.log(err.message, { options, feature: feature2 });
+    console.log(err.message, { options, featureType, category });
   }
 };
+
+// src/IndoorMap/renderer/3d/Element3DRenderer.ts
+var import_line_split = __toESM(require("@turf/line-split"));
+var HEIGHT_METER = 4;
+var MULTIORDINAL_HEIGHT_METER = 9;
 var Element3DRenderer = class extends EventTarget {
   options;
   map;
+  gltfLayer;
   threeLayer;
-  dracoLoader;
+  scene;
   lineMaterial;
   materialByColorMap;
-  markerRenderer;
   // Renderer is Ready
   isReady = false;
-  constructor(map, options, layer) {
+  constructor(map, options) {
     super();
     this.options = options;
     this.map = map;
-    this.dracoLoader = new import_DRACOLoader.DRACOLoader();
-    this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
-    this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
-    this.threeLayer = layer;
+    const groupLayer = this.map.getLayer("group");
+    this.threeLayer = groupLayer.getLayer("three");
+    this.gltfLayer = groupLayer.getLayer("gltf");
+    this.lineMaterial = new THREE.LineBasicMaterial({ color: "#000" });
     this.render();
   }
   animation() {
@@ -3413,7 +3121,7 @@ var Element3DRenderer = class extends EventTarget {
     if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
     const existingMaterial = this.materialByColorMap.get(color);
     if (existingMaterial) return existingMaterial;
-    const created = new THREE2.MeshLambertMaterial({ color, transparent: true });
+    const created = new THREE.MeshLambertMaterial({ color, transparent: true });
     created.toneMapped = false;
     this.materialByColorMap.set(color, created);
     return created;
@@ -3425,49 +3133,65 @@ var Element3DRenderer = class extends EventTarget {
       bottomHeight: bottomHeightOptions,
       color: colorOptions,
       ...options
-    } = getGeometryOption(feature2, this.options);
+    } = get3DRendererOption(feature2.feature_type, feature2.properties.category, this.options);
     const _this = this;
     const createPolygon = (geometry, feature3) => {
-      const [outerRing, ...innerRings] = geometry.coordinates;
-      const offsetFeature = offset !== 0 ? (0, import_buffer2.default)(geometry, offset, { units: "meters" }) : feature3;
-      const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#ffffff";
-      if (color === "transparent") return;
-      const material = this.getOrCreateMaterialByColor(color);
-      const altitude = feature3.properties.ordinal * HEIGHT_METER;
-      const height = feature3.properties.height ?? heightOptions ?? HEIGHT_METER;
-      const bottomHeight = feature3.properties.bottomHeight ?? bottomHeightOptions ?? 0;
-      const extrudedPolygon = this.threeLayer.toExtrudePolygon(
-        offsetFeature,
-        { asynchronous: true, ...options, height, bottomHeight, altitude },
-        material
-      );
-      extrudedPolygon.on("click", (e) => {
-        console.log(e.target.options.polygon.id);
-      });
-      const topLineStrings = [
-        new maptalks4.LineString(outerRing),
-        ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
-      ];
-      const topLines = this.threeLayer.toLines(
-        topLineStrings,
-        { altitude, bottomHeight: bottomHeight + height + 1e-3, interactive: false },
-        this.lineMaterial
-      );
-      const bottomLineStrings = [
-        new maptalks4.LineString(outerRing),
-        ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
-      ];
-      const bottomLines = this.threeLayer.toLines(
-        bottomLineStrings,
-        { altitude, bottomHeight, interactive: false },
-        this.lineMaterial
-      );
-      return [extrudedPolygon, topLines, bottomLines];
+      try {
+        const [outerRing, ...innerRings] = geometry.coordinates;
+        const offsetFeature = offset !== 0 ? (0, import_buffer2.default)(geometry, offset, { units: "meters" }) : feature3;
+        const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#ffffff";
+        if (color === "transparent") return;
+        const material = this.getOrCreateMaterialByColor(color);
+        const altitude = 0;
+        const height = feature3.properties.height ?? heightOptions ?? HEIGHT_METER;
+        const bottomHeight = feature3.properties.bottomHeight ?? bottomHeightOptions ?? 0;
+        const extrudedPolygon = this.threeLayer.toExtrudePolygon(
+          offsetFeature,
+          { asynchronous: true, ...options, height, bottomHeight, altitude },
+          material
+        );
+        const topLineStrings = [
+          new maptalks4.LineString(outerRing),
+          ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
+        ];
+        const topLines = this.threeLayer.toLines(
+          topLineStrings,
+          { altitude, bottomHeight: bottomHeight + height + 1e-3, interactive: false },
+          this.lineMaterial
+        );
+        const bottomLineStrings = [
+          new maptalks4.LineString(outerRing),
+          ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
+        ];
+        const bottomLines = this.threeLayer.toLines(
+          bottomLineStrings,
+          { altitude, bottomHeight, interactive: false },
+          this.lineMaterial
+        );
+        return [extrudedPolygon, topLines, bottomLines];
+      } catch (err) {
+        return [];
+      }
+    };
+    const createLineString = (geometry, feature3) => {
+      try {
+        const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#000000";
+        const material = this.getOrCreateMaterialByColor(color);
+        const extrudedLine = this.threeLayer.toExtrudeLine(
+          new maptalks4.LineString(geometry.coordinates),
+          { height: heightOptions, ...options },
+          material
+        );
+        return [extrudedLine];
+      } catch (err) {
+        return [];
+      }
     };
     try {
       switch (feature2.geometry.type) {
         case "MultiPolygon": {
           const { coordinates } = feature2.geometry;
+          if (!coordinates) return [];
           const multiMeshes = coordinates.flatMap((polygonCoordinates) => {
             const meshes = createPolygon({ type: "Polygon", coordinates: polygonCoordinates }, feature2);
             this.threeLayer.addMesh(meshes);
@@ -3476,70 +3200,126 @@ var Element3DRenderer = class extends EventTarget {
           return multiMeshes;
         }
         case "Polygon": {
+          const { coordinates } = feature2.geometry;
+          if (!coordinates) return [];
           const meshes = createPolygon(feature2.geometry, feature2);
           this.threeLayer.addMesh(meshes);
           return meshes;
         }
+        case "LineString": {
+          const { coordinates } = feature2.geometry;
+          if (!coordinates) return [];
+          const meshes = createLineString(feature2.geometry, feature2);
+          this.threeLayer.addMesh(meshes);
+          return meshes;
+        }
       }
     } catch (err) {
-      console.log(`error createGeometry`, { feature: feature2, options });
+      console.log(`error createGeometry`, err, { feature: feature2, options });
     }
   };
+  createRoomWall(unit, openings = []) {
+    const polygons = unit.geometry.type === "Polygon" ? [unit.geometry.coordinates] : unit.geometry.coordinates;
+    return polygons.map((plg) => {
+      return plg.map((ring) => {
+        const roomWall = (0, import_clean_coords.cleanCoords)((0, import_polygon_to_line.polygonToLine)(polygon([ring])));
+        if (openings.length === 0) {
+          const color = "#ababab";
+          const material = this.getOrCreateMaterialByColor(color);
+          const extrudedWall = this.threeLayer.toExtrudeLine(
+            new maptalks4.LineString(roomWall.geometry.coordinates),
+            { height: 4, width: 1 },
+            material
+          );
+          return extrudedWall;
+        }
+        let openingPoints = [];
+        openings.forEach((opening) => {
+          const doorCoords = opening?.geometry?.coordinates;
+          const p0 = point(doorCoords[0]);
+          const p1 = point(doorCoords[doorCoords.length - 1]);
+          const s0 = (0, import_nearest_point_on_line.nearestPointOnLine)(roomWall, p0, { units: "meters" });
+          const s1 = (0, import_nearest_point_on_line.nearestPointOnLine)(roomWall, p1, { units: "meters" });
+          const d0 = s0.properties.dist;
+          const d1 = s1.properties.dist;
+          if (d0 > 1 || d1 > 1) {
+          } else {
+            openingPoints = openingPoints.concat([s0.geometry.coordinates, s1.geometry.coordinates]);
+          }
+        });
+        try {
+          const split = (0, import_line_split.default)(roomWall, multiPoint(openingPoints));
+          const wallsOnly = split.features.filter((seg) => {
+            const mid = (0, import_along.along)(seg, (0, import_length.length)(seg, { units: "meters" }) / 2, { units: "meters" });
+            for (const opening of openings) {
+              const dist = (0, import_point_to_line_distance.pointToLineDistance)(mid, opening, { units: "meters" });
+              if (dist < 0.05) return false;
+            }
+            return true;
+          });
+          const wallMeshes = wallsOnly.map((feature2, i) => {
+            const color = "#ababab";
+            const material = this.getOrCreateMaterialByColor(color);
+            const extrudedLine = this.threeLayer.toExtrudeLine(
+              new maptalks4.LineString(feature2.geometry.coordinates),
+              { height: 3, width: 0.4, id: unit.id },
+              material
+            );
+            extrudedLine.getObject3d().userData = {
+              unitId: unit.id,
+              coords: feature2.geometry.coordinates
+            };
+            return extrudedLine;
+          }).flat();
+          this.threeLayer.addMesh(wallMeshes);
+          return wallMeshes;
+        } catch (e) {
+          console.log(e.message, { unit, roomWall });
+          return [];
+        }
+      }).flat();
+    }).flat();
+  }
   async createEscalator(f, coordinate, options) {
+    const model = {
+      url: "https://cdn.venue.in.th/static/glb/escalator.glb",
+      size: 4.4
+    };
     const { direction: dir, angle } = options;
-    const model = await this.loadModel3d({
-      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb",
-      properties: {
-        rotation: {
-          x: 0.5 * Math.PI,
-          // Rotate the model up (new_escalator.glb)
-          y: 0,
-          z: 0
-        },
-        position: { x: 0, y: 0, z: 0 },
-        scale: 0.01
+    const rotationZ = dir === "up" ? 180 + angle : angle;
+    var escalatorMarker = new maptalks4.GLTFMarker(coordinate, {
+      symbol: {
+        url: model.url,
+        rotationZ,
+        translationX: dir === "up" ? 0 : model.size * Math.cos(Math.PI * rotationZ / 180),
+        translationY: dir === "up" ? 0 : model.size * Math.sin(Math.PI * rotationZ / 180),
+        translationZ: dir === "up" ? -0.05 * model.size : -0.5 * model.size
       }
     });
-    model.rotation.y += dir === "up" ? Math.PI + angle : angle;
-    const box = new THREE2.Box3().setFromObject(model);
-    const pivotPoint = dir === "up" ? new THREE2.Vector3(0, 0, 0) : new THREE2.Vector3(
-      1 * (box.min.x + box.max.x),
-      1 * (box.min.y + box.max.y),
-      0.6 * box.max.z
-    );
-    const pivot = new THREE2.Group();
-    pivot.add(model);
-    model.position.sub(pivotPoint);
-    model.updateMatrixWorld(true);
-    const altitude = f.properties.ordinal * HEIGHT_METER;
-    const baseObjectModel = this.threeLayer.toModel(pivot, {
-      coordinate,
-      altitude
-    });
-    this.threeLayer.addMesh(baseObjectModel);
-    return baseObjectModel;
-  }
-  async createTree(coordinate, ordinal) {
-    const model = await this.loadModel3d({
-      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/arbol.glb",
-      properties: {
-        rotation: {
-          x: 0.5 * Math.PI,
-          // Rotate the model up (new_escalator.glb)
-          y: 0,
-          z: 0
-        },
-        position: { x: 0, y: 0, z: 0 },
-        scale: 0.01
+    escalatorMarker.addTo(this.gltfLayer);
+    return escalatorMarker;
+  }
+  // Note: Move to another renderer and keep this file on Geometry only?
+  createGroundLabel(f, unit) {
+    const text = f.properties.name;
+    const bound = f.geometry.coordinates[0];
+    const { height: unitHeight } = get3DRendererOption("unit", unit.properties.category, this.options);
+    const options = { bottomHeight: unitHeight + 5e-3 };
+    const groundLabel = new GroundLabel(bound, text, options, this.threeLayer);
+    this.threeLayer.addMesh(groundLabel);
+    return groundLabel;
+  }
+  async createModel3d(f) {
+    const marker = new maptalks4.GLTFMarker(f.properties.center, {
+      symbol: {
+        url: f.properties.model
       }
     });
-    const altitude = ordinal * HEIGHT_METER;
-    const baseObjectModel = this.threeLayer.toModel(model, {
-      coordinate,
-      altitude
-    });
-    this.threeLayer.addMesh(baseObjectModel);
-    return baseObjectModel;
+    marker.addTo(this.gltfLayer);
+    return marker;
+  }
+  async createBuilding(coordinate, ordinal) {
+    return Promise.resolve(null);
   }
   createElement(f) {
     switch (f.feature_type) {
@@ -3562,34 +3342,35 @@ var Element3DRenderer = class extends EventTarget {
       }
     });
   }
-  async loadModel3d(model3d) {
-    const loader = new import_GLTFLoader2.GLTFLoader();
-    loader.setDRACOLoader(this.dracoLoader);
-    const { url, properties: modelProperties } = model3d;
-    const gltf = await loader.loadAsync(url);
-    const model = gltf.scene;
-    model.rotation.x = modelProperties.rotation.x;
-    model.rotation.y = modelProperties.rotation.y;
-    model.position.x = modelProperties.position.x;
-    model.position.y = modelProperties.position.y;
-    model.position.z = modelProperties.position.z;
-    const scale2 = modelProperties.scale;
-    model.scale.set(scale2, scale2, scale2);
-    return model;
-  }
-  createMarker = (coordinates, ordinal, text) => {
-    const options = {
-      // scale: 0.05,
-      // altitude: ordinal * HEIGHT_METER,
-      text
-      // interactive: true,
-    };
-    const marker = new TextSpriteMarker(coordinates, options, this.threeLayer);
-    this.threeLayer.addMesh([marker]);
-    return marker;
-  };
-  removeMarker = () => {
-  };
+  createHighlightController(element) {
+    if (!(element instanceof import_maptalks7.BaseObject)) {
+      return null;
+    }
+    switch (element.type) {
+      case "ExtrudePolygon":
+      case "ExtrudeLine": {
+        const mesh = element.getObject3d();
+        const originalMaterial = mesh.material;
+        const highlightMaterial = this.getOrCreateMaterialByColor("#ff0000");
+        return {
+          start: () => {
+            mesh.material = highlightMaterial;
+          },
+          clear: () => {
+            mesh.material = originalMaterial;
+          }
+        };
+      }
+      default: {
+        return {
+          start() {
+          },
+          clear() {
+          }
+        };
+      }
+    }
+  }
   render() {
     this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
     if (this.threeLayer._needsUpdate) {
@@ -3648,7 +3429,7 @@ var getGeometryProperties = (feature2) => ({
   category: feature2.properties.category,
   name: feature2.properties.name?.en
 });
-var getGeometryOption2 = (feature2, options) => {
+var getGeometryOption = (feature2, options) => {
   try {
     const option = options[feature2.feature_type] ?? element2DRendererOptions[feature2.feature_type];
     const category = feature2.properties.category;
@@ -3675,7 +3456,7 @@ var Element2DRenderer = class extends EventTarget {
   }
   createGeometry = (imdfFeature) => {
     const feature2 = getGeometryProperties(imdfFeature);
-    const { symbol, ...options } = getGeometryOption2(imdfFeature, this.options);
+    const { symbol, ...options } = getGeometryOption(imdfFeature, this.options);
     const altitude = feature2.properties.ordinal * 10;
     const geometry = maptalks5.Geometry.fromJSON({
       feature: feature2,
@@ -3694,10 +3475,18 @@ var Element2DRenderer = class extends EventTarget {
       return geometry;
     }
   };
+  createRoomWall(unit, openings) {
+    return null;
+  }
   async createEscalator(f, coordinates) {
     return Promise.resolve(null);
   }
-  async createTree(f, coordinates) {
+  createGroundLabel(f, unit) {
+    const text = f.properties.name;
+    const bound = f.geometry.coordinates[0];
+    return null;
+  }
+  async createBuilding(coordinate, ordinal) {
     return Promise.resolve(null);
   }
   createElement = (imdfFeature) => {
@@ -3717,6 +3506,15 @@ var Element2DRenderer = class extends EventTarget {
       element.hide();
     });
   }
+  createHighlightController(element) {
+    if (!(element instanceof maptalks5.Geometry)) return null;
+    return {
+      start() {
+      },
+      clear() {
+      }
+    };
+  }
 };
 
 // src/IndoorMap/renderer/2d/Marker2DRenderer.ts
@@ -3727,6 +3525,7 @@ var Marker2DRenderer = class extends EventTarget {
   markerLayer;
   constructor(map) {
     super();
+    this.map = map;
   }
   createMarker = (coordinates, ordinal, content) => {
     const marker = new maptalks6.ui.UIMarker(coordinates, {
@@ -3747,74 +3546,204 @@ var Marker2DRenderer = class extends EventTarget {
   }
 };
 
-// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
-var maptalks7 = __toESM(require("maptalks"));
-
-// src/IndoorMap/renderer/utils/svg2material.ts
-var import_three7 = require("three");
-var svgToDataURL = (svgString, scaleFactor = 1) => {
-  const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
-  const url = URL.createObjectURL(svgBlob);
-  const img = new Image();
-  return new Promise((resolve, reject) => {
-    img.onload = function() {
-      const newWidth = img.width * scaleFactor;
-      const newHeight = img.height * scaleFactor;
-      const canvas = document.createElement("canvas");
-      canvas.width = newWidth;
-      canvas.height = newHeight;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, newWidth, newHeight);
-      const pngDataUrl = canvas.toDataURL("image/png");
-      resolve(pngDataUrl);
-    };
-    img.onerror = function(error) {
-      reject(error);
-    };
-    img.src = url;
-  });
+// src/IndoorMap/renderer/3d/Marker3DRenderer.ts
+var maptalks7 = __toESM(require("maptalks-gl"));
+
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var import_maptalks8 = require("maptalks");
+var THREE2 = __toESM(require("three"));
+var import_maptalks9 = require("maptalks.three");
+var import_lodash5 = require("lodash");
+
+// src/IndoorMap/renderer/utils/interpolateStops.ts
+var interpolateStops = ({ stops }, zoom) => {
+  if (zoom <= stops[0][0]) return stops[0][1];
+  if (zoom >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [z1, v1] = stops[i];
+    const [z2, v2] = stops[i + 1];
+    if (zoom >= z1 && zoom <= z2) {
+      const t = (zoom - z1) / (z2 - z1);
+      return v1 + t * (v2 - v1);
+    }
+  }
+};
+
+// src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
+var OPTIONS4 = {
+  // Texture options
+  text: "",
+  textAlign: "center",
+  color: "#ffffff",
+  fontFamily: "sans-serif",
+  fontSize: 28,
+  fontWeight: 400,
+  background: "transparent",
+  lineHeight: 32,
+  padding: 8,
+  strokeColor: "#000000",
+  strokeWidth: 3,
+  strokeStyle: "round",
+  // Sprite options
+  /* Overall scale multiplier  */
+  scale: 1,
+  altitude: 0,
+  opacity: 1
 };
-var createSVGPathFromMarkerSymbol2 = (style) => {
-  const {
-    markerWidth = 24,
-    markerDx = 0,
-    markerDy = 0,
-    // markerFill,
-    markerPath,
-    fill = "#000000"
-  } = style;
-  const scale2 = markerWidth / 24;
-  const strokeWidth = 2;
-  const halfStrokeWidth = 0.5 * strokeWidth;
-  if (Array.isArray(markerPath)) {
-    return markerPath.map(
-      ({ path, fill: fill2 }) => `<path d="${path}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill2}" stroke="#ffffff" stroke-width="${strokeWidth}" />`
+var TextSpriteMarker = class extends import_maptalks9.BaseObject {
+  #altitudeOffset = 0;
+  constructor(coordinate, options, layer, properties = {}) {
+    options = import_maptalks8.Util.extend({}, OPTIONS4, options, { layer });
+    super();
+    this._coordinate = new import_maptalks8.Coordinate(coordinate);
+    this._initOptions(options);
+    this._createGroup();
+    this.properties = { ...properties };
+    const sprite = this._createSprite();
+    this.getObject3d().add(sprite);
+    this._updatePosition();
+    this.type = "TextSpriteMarker";
+  }
+  getOptions() {
+    return super.getOptions();
+  }
+  _createSprite() {
+    const options = this.getOptions();
+    const texture = this._createTextTexture(options.text, options);
+    const material = new THREE2.SpriteMaterial({
+      map: texture,
+      transparent: true,
+      alphaTest: 0.1
+    });
+    const sprite = new THREE2.Sprite(material);
+    const w = texture.image.width;
+    const h = texture.image.height;
+    const base = 1 / 16;
+    const normalizedScale = options.scale / this.getMap().getGLRes();
+    sprite.scale.set(w * base * normalizedScale, h * base * normalizedScale, 1);
+    this.#altitudeOffset = Math.max(
+      h * base * options.scale * 0.5,
+      0.05
+      // minimum lift in world units
     );
+    return sprite;
   }
-  return `<path d="${markerPath}" style="transform:translate(${markerDx}px, ${markerDy}px) scale(${scale2})" fill="${fill}" />`;
-};
-var createSpriteMaterialByLabelSymbol2 = (labelSymbol) => {
-  const material = new import_three7.SpriteMaterial();
-  try {
-    const [base, icon] = labelSymbol ?? [{}, {}];
-    const { markerWidth: baseWidth = 24 } = base;
-    const { markerWidth: iconWidth = 24 } = icon;
-    const viewBoxDimension = Math.max(baseWidth, iconWidth);
-    const baseSVG = createSVGPathFromMarkerSymbol2(base);
-    const iconSVG = icon ? createSVGPathFromMarkerSymbol2(icon) : "";
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${viewBoxDimension}" height="${viewBoxDimension}">${baseSVG}${iconSVG}</svg>`;
-    const textureLoader = new import_three7.TextureLoader();
-    const scaleFactor = 200 / 24;
-    svgToDataURL(svg, scaleFactor).then((png) => {
-      const texture = textureLoader.load(png, () => {
-        material.map = texture;
-        material.needsUpdate = true;
+  _createTextTexture(text, options = {}) {
+    const {
+      padding,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      lineHeight,
+      background,
+      color,
+      textAlign,
+      strokeColor,
+      strokeWidth,
+      maxWidth
+    } = options || {};
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const paragraphs = String(text).split("\n");
+    const wrappedLines = [];
+    paragraphs.forEach((paragraph) => {
+      if ((0, import_lodash5.isNil)(maxWidth) || isNaN(maxWidth)) {
+        wrappedLines.push(paragraph);
+        return;
+      }
+      const words = paragraph.split(/\s+/);
+      let currentLine = "";
+      words.forEach((word) => {
+        const testLine = currentLine ? currentLine + " " + word : word;
+        const testWidth = ctx.measureText(testLine).width;
+        if (testWidth > maxWidth && currentLine) {
+          wrappedLines.push(currentLine);
+          currentLine = word;
+        } else {
+          currentLine = testLine;
+        }
       });
+      if (currentLine) {
+        wrappedLines.push(currentLine);
+      }
     });
-  } catch (error) {
-    console.warn(`Error createSpriteMaterialByLabelSymbol: `, labelSymbol);
+    const lines = wrappedLines.length ? wrappedLines : [""];
+    const widest = Math.max(...lines.map((l) => ctx.measureText(l).width), 0);
+    const finalWidth = (maxWidth ? Math.min(widest, maxWidth) : widest) + padding * 2;
+    const finalHeight = lineHeight * lines.length + padding * 2;
+    canvas.width = finalWidth;
+    canvas.height = finalHeight;
+    const ctx2 = canvas.getContext("2d");
+    ctx2.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx2.textAlign = textAlign;
+    if (background && background !== "transparent") {
+      ctx2.fillStyle = background;
+      ctx2.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    lines.forEach((line, i) => {
+      const y = padding + lineHeight * (i + 0.8);
+      let x = padding;
+      if (textAlign === "center") x = canvas.width / 2;
+      if (textAlign === "right" || textAlign === "end")
+        x = canvas.width - padding;
+      if (strokeWidth > 0) {
+        ctx2.lineWidth = strokeWidth;
+        ctx2.lineJoin = "round";
+        ctx2.miterLimit = 2;
+        ctx2.strokeStyle = strokeColor;
+        ctx2.strokeText(line, x, y);
+      }
+      ctx2.fillStyle = color;
+      ctx2.fillText(line, x, y);
+    });
+    const texture = new THREE2.CanvasTexture(canvas);
+    texture.needsUpdate = true;
+    texture.minFilter = THREE2.LinearFilter;
+    return texture;
+  }
+  _updatePosition() {
+    const options = this.getOptions();
+    const layer = options.layer;
+    if (!layer) return;
+    const altitude = (options.altitude || 0) + this.#altitudeOffset;
+    const z = layer.altitudeToVector3(altitude, altitude).x;
+    const position = layer.coordinateToVector3(this._coordinate, z);
+    (0, import_lodash5.set)(this.properties, "default.position", position);
+    this.getObject3d().position.copy(position);
+  }
+  _animation() {
+    const layer = this.getLayer();
+    if (!this.isAdd || !layer) return;
+    if (this._visible === true) {
+      const zoom = layer.map.getZoom();
+      const object3d = this.getObject3d();
+      const { opacity } = this.getOptions();
+      let opacityValue;
+      if (typeof opacity === "number") {
+        opacityValue = opacity ?? 1;
+      } else if (Array.isArray(opacity.stops)) {
+        opacityValue = interpolateStops(opacity, zoom);
+      } else {
+        throw new Error(`Unknown opacity value ${opacity}`);
+      }
+      const visible = opacityValue > 0.5;
+      object3d.visible = visible;
+    }
+  }
+  setText(text) {
+    const options = this.getOptions();
+    options.text = text;
+    const newSprite = this._createSprite();
+    const group = this.getObject3d();
+    group.children.forEach((child) => group.remove(child));
+    group.add(newSprite);
+    this._updatePosition();
+  }
+  setAltitude(altitude) {
+    const bottomHeight = this.options.bottomHeight ?? 0;
+    return super.setAltitude(altitude + bottomHeight + this.#altitudeOffset);
   }
-  return material;
 };
 
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
@@ -3864,67 +3793,547 @@ var Marker3DRenderer = class extends EventTarget {
       }
     });
   }
-  /** Marker */
-  getOrCreateIconMaterial(key) {
-    if (!this.materialByKey) this.materialByKey = /* @__PURE__ */ new Map();
-    const existingMaterial = this.materialByKey.get(key);
-    if (existingMaterial) return existingMaterial;
-    const baseSymbol = {
-      markerType: "path",
-      markerPath: [
-        {
-          path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
-          fill: "#ff0000"
-        }
-      ],
-      markerPathWidth: 24,
-      markerPathHeight: 24
-    };
-    const markerSymbol = {
-      markerType: "path",
-      markerPath: [],
-      // TODO: Get Path by featureType.category
-      // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
-      markerPathWidth: 24,
-      markerPathHeight: 24,
-      markerWidth: 24,
-      markerHeight: 24,
-      markerDy: 1.5,
-      markerDx: 1.5
-    };
-    const created = createSpriteMaterialByLabelSymbol2([
-      baseSymbol,
-      markerSymbol
-    ]);
-    this.materialByKey.set(key, created);
-    return created;
+  /** Marker */
+  // getOrCreateIconMaterial(key) {
+  //   if (!this.materialByKey) this.materialByKey = new Map()
+  //   const existingMaterial = this.materialByKey.get(key)
+  //   if (existingMaterial) return existingMaterial
+  //   // Create new
+  //   const baseSymbol: maptalks.Path = {
+  //     markerType: "path",
+  //     markerPath: [
+  //       {
+  //         path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
+  //         fill: "#ff0000",
+  //       },
+  //     ],
+  //     markerPathWidth: 24,
+  //     markerPathHeight: 24
+  //   }
+  //   const markerSymbol: maptalks.PathMarkerSymbol = {
+  //     markerType: "path",
+  //     markerPath: [],
+  //     // TODO: Get Path by featureType.category
+  //     // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
+  //     markerPathWidth: 24,
+  //     markerPathHeight: 24,
+  //     markerWidth: 24,
+  //     markerHeight: 24,
+  //     markerDy: 1.5,
+  //     markerDx: 1.5,
+  //   }
+  //   const created = createSpriteMaterialByLabelSymbol([
+  //     baseSymbol,
+  //     markerSymbol,
+  //   ])
+  //   this.materialByKey.set(key, created)
+  //   return created
+  // }
+};
+
+// src/IndoorMap/renderer/utils/angleBetweenLineString.ts
+var getLineCenter = (line) => {
+  let x = 0, y = 0;
+  for (const [lx, ly] of line) {
+    x += lx;
+    y += ly;
+  }
+  const len = line.length;
+  return [x / len, y / len];
+};
+var angleBetweenLineStrings = (line1, line2) => {
+  const [x1, y1] = getLineCenter(line1);
+  const [x2, y2] = getLineCenter(line2);
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.atan2(dy, dx);
+};
+
+// ../../node_modules/point-in-polygon-hao/node_modules/robust-predicates/esm/util.js
+var epsilon = 11102230246251565e-32;
+var splitter = 134217729;
+var resulterrbound = (3 + 8 * epsilon) * epsilon;
+function sum(elen, e, flen, f, h) {
+  let Q, Qnew, hh, bvirt;
+  let enow = e[0];
+  let fnow = f[0];
+  let eindex = 0;
+  let findex = 0;
+  if (fnow > enow === fnow > -enow) {
+    Q = enow;
+    enow = e[++eindex];
+  } else {
+    Q = fnow;
+    fnow = f[++findex];
+  }
+  let hindex = 0;
+  if (eindex < elen && findex < flen) {
+    if (fnow > enow === fnow > -enow) {
+      Qnew = enow + Q;
+      hh = Q - (Qnew - enow);
+      enow = e[++eindex];
+    } else {
+      Qnew = fnow + Q;
+      hh = Q - (Qnew - fnow);
+      fnow = f[++findex];
+    }
+    Q = Qnew;
+    if (hh !== 0) {
+      h[hindex++] = hh;
+    }
+    while (eindex < elen && findex < flen) {
+      if (fnow > enow === fnow > -enow) {
+        Qnew = Q + enow;
+        bvirt = Qnew - Q;
+        hh = Q - (Qnew - bvirt) + (enow - bvirt);
+        enow = e[++eindex];
+      } else {
+        Qnew = Q + fnow;
+        bvirt = Qnew - Q;
+        hh = Q - (Qnew - bvirt) + (fnow - bvirt);
+        fnow = f[++findex];
+      }
+      Q = Qnew;
+      if (hh !== 0) {
+        h[hindex++] = hh;
+      }
+    }
+  }
+  while (eindex < elen) {
+    Qnew = Q + enow;
+    bvirt = Qnew - Q;
+    hh = Q - (Qnew - bvirt) + (enow - bvirt);
+    enow = e[++eindex];
+    Q = Qnew;
+    if (hh !== 0) {
+      h[hindex++] = hh;
+    }
+  }
+  while (findex < flen) {
+    Qnew = Q + fnow;
+    bvirt = Qnew - Q;
+    hh = Q - (Qnew - bvirt) + (fnow - bvirt);
+    fnow = f[++findex];
+    Q = Qnew;
+    if (hh !== 0) {
+      h[hindex++] = hh;
+    }
+  }
+  if (Q !== 0 || hindex === 0) {
+    h[hindex++] = Q;
+  }
+  return hindex;
+}
+function estimate(elen, e) {
+  let Q = e[0];
+  for (let i = 1; i < elen; i++) Q += e[i];
+  return Q;
+}
+function vec(n) {
+  return new Float64Array(n);
+}
+
+// ../../node_modules/point-in-polygon-hao/node_modules/robust-predicates/esm/orient2d.js
+var ccwerrboundA = (3 + 16 * epsilon) * epsilon;
+var ccwerrboundB = (2 + 12 * epsilon) * epsilon;
+var ccwerrboundC = (9 + 64 * epsilon) * epsilon * epsilon;
+var B = vec(4);
+var C1 = vec(8);
+var C2 = vec(12);
+var D = vec(16);
+var u = vec(4);
+function orient2dadapt(ax, ay, bx, by, cx, cy, detsum) {
+  let acxtail, acytail, bcxtail, bcytail;
+  let bvirt, c, ahi, alo, bhi, blo, _i, _j, _0, s1, s0, t1, t0, u32;
+  const acx = ax - cx;
+  const bcx = bx - cx;
+  const acy = ay - cy;
+  const bcy = by - cy;
+  s1 = acx * bcy;
+  c = splitter * acx;
+  ahi = c - (c - acx);
+  alo = acx - ahi;
+  c = splitter * bcy;
+  bhi = c - (c - bcy);
+  blo = bcy - bhi;
+  s0 = alo * blo - (s1 - ahi * bhi - alo * bhi - ahi * blo);
+  t1 = acy * bcx;
+  c = splitter * acy;
+  ahi = c - (c - acy);
+  alo = acy - ahi;
+  c = splitter * bcx;
+  bhi = c - (c - bcx);
+  blo = bcx - bhi;
+  t0 = alo * blo - (t1 - ahi * bhi - alo * bhi - ahi * blo);
+  _i = s0 - t0;
+  bvirt = s0 - _i;
+  B[0] = s0 - (_i + bvirt) + (bvirt - t0);
+  _j = s1 + _i;
+  bvirt = _j - s1;
+  _0 = s1 - (_j - bvirt) + (_i - bvirt);
+  _i = _0 - t1;
+  bvirt = _0 - _i;
+  B[1] = _0 - (_i + bvirt) + (bvirt - t1);
+  u32 = _j + _i;
+  bvirt = u32 - _j;
+  B[2] = _j - (u32 - bvirt) + (_i - bvirt);
+  B[3] = u32;
+  let det = estimate(4, B);
+  let errbound = ccwerrboundB * detsum;
+  if (det >= errbound || -det >= errbound) {
+    return det;
+  }
+  bvirt = ax - acx;
+  acxtail = ax - (acx + bvirt) + (bvirt - cx);
+  bvirt = bx - bcx;
+  bcxtail = bx - (bcx + bvirt) + (bvirt - cx);
+  bvirt = ay - acy;
+  acytail = ay - (acy + bvirt) + (bvirt - cy);
+  bvirt = by - bcy;
+  bcytail = by - (bcy + bvirt) + (bvirt - cy);
+  if (acxtail === 0 && acytail === 0 && bcxtail === 0 && bcytail === 0) {
+    return det;
+  }
+  errbound = ccwerrboundC * detsum + resulterrbound * Math.abs(det);
+  det += acx * bcytail + bcy * acxtail - (acy * bcxtail + bcx * acytail);
+  if (det >= errbound || -det >= errbound) return det;
+  s1 = acxtail * bcy;
+  c = splitter * acxtail;
+  ahi = c - (c - acxtail);
+  alo = acxtail - ahi;
+  c = splitter * bcy;
+  bhi = c - (c - bcy);
+  blo = bcy - bhi;
+  s0 = alo * blo - (s1 - ahi * bhi - alo * bhi - ahi * blo);
+  t1 = acytail * bcx;
+  c = splitter * acytail;
+  ahi = c - (c - acytail);
+  alo = acytail - ahi;
+  c = splitter * bcx;
+  bhi = c - (c - bcx);
+  blo = bcx - bhi;
+  t0 = alo * blo - (t1 - ahi * bhi - alo * bhi - ahi * blo);
+  _i = s0 - t0;
+  bvirt = s0 - _i;
+  u[0] = s0 - (_i + bvirt) + (bvirt - t0);
+  _j = s1 + _i;
+  bvirt = _j - s1;
+  _0 = s1 - (_j - bvirt) + (_i - bvirt);
+  _i = _0 - t1;
+  bvirt = _0 - _i;
+  u[1] = _0 - (_i + bvirt) + (bvirt - t1);
+  u32 = _j + _i;
+  bvirt = u32 - _j;
+  u[2] = _j - (u32 - bvirt) + (_i - bvirt);
+  u[3] = u32;
+  const C1len = sum(4, B, 4, u, C1);
+  s1 = acx * bcytail;
+  c = splitter * acx;
+  ahi = c - (c - acx);
+  alo = acx - ahi;
+  c = splitter * bcytail;
+  bhi = c - (c - bcytail);
+  blo = bcytail - bhi;
+  s0 = alo * blo - (s1 - ahi * bhi - alo * bhi - ahi * blo);
+  t1 = acy * bcxtail;
+  c = splitter * acy;
+  ahi = c - (c - acy);
+  alo = acy - ahi;
+  c = splitter * bcxtail;
+  bhi = c - (c - bcxtail);
+  blo = bcxtail - bhi;
+  t0 = alo * blo - (t1 - ahi * bhi - alo * bhi - ahi * blo);
+  _i = s0 - t0;
+  bvirt = s0 - _i;
+  u[0] = s0 - (_i + bvirt) + (bvirt - t0);
+  _j = s1 + _i;
+  bvirt = _j - s1;
+  _0 = s1 - (_j - bvirt) + (_i - bvirt);
+  _i = _0 - t1;
+  bvirt = _0 - _i;
+  u[1] = _0 - (_i + bvirt) + (bvirt - t1);
+  u32 = _j + _i;
+  bvirt = u32 - _j;
+  u[2] = _j - (u32 - bvirt) + (_i - bvirt);
+  u[3] = u32;
+  const C2len = sum(C1len, C1, 4, u, C2);
+  s1 = acxtail * bcytail;
+  c = splitter * acxtail;
+  ahi = c - (c - acxtail);
+  alo = acxtail - ahi;
+  c = splitter * bcytail;
+  bhi = c - (c - bcytail);
+  blo = bcytail - bhi;
+  s0 = alo * blo - (s1 - ahi * bhi - alo * bhi - ahi * blo);
+  t1 = acytail * bcxtail;
+  c = splitter * acytail;
+  ahi = c - (c - acytail);
+  alo = acytail - ahi;
+  c = splitter * bcxtail;
+  bhi = c - (c - bcxtail);
+  blo = bcxtail - bhi;
+  t0 = alo * blo - (t1 - ahi * bhi - alo * bhi - ahi * blo);
+  _i = s0 - t0;
+  bvirt = s0 - _i;
+  u[0] = s0 - (_i + bvirt) + (bvirt - t0);
+  _j = s1 + _i;
+  bvirt = _j - s1;
+  _0 = s1 - (_j - bvirt) + (_i - bvirt);
+  _i = _0 - t1;
+  bvirt = _0 - _i;
+  u[1] = _0 - (_i + bvirt) + (bvirt - t1);
+  u32 = _j + _i;
+  bvirt = u32 - _j;
+  u[2] = _j - (u32 - bvirt) + (_i - bvirt);
+  u[3] = u32;
+  const Dlen = sum(C2len, C2, 4, u, D);
+  return D[Dlen - 1];
+}
+function orient2d(ax, ay, bx, by, cx, cy) {
+  const detleft = (ay - cy) * (bx - cx);
+  const detright = (ax - cx) * (by - cy);
+  const det = detleft - detright;
+  const detsum = Math.abs(detleft + detright);
+  if (Math.abs(det) >= ccwerrboundA * detsum) return det;
+  return -orient2dadapt(ax, ay, bx, by, cx, cy, detsum);
+}
+
+// ../../node_modules/point-in-polygon-hao/node_modules/robust-predicates/esm/orient3d.js
+var o3derrboundA = (7 + 56 * epsilon) * epsilon;
+var o3derrboundB = (3 + 28 * epsilon) * epsilon;
+var o3derrboundC = (26 + 288 * epsilon) * epsilon * epsilon;
+var bc = vec(4);
+var ca = vec(4);
+var ab = vec(4);
+var at_b = vec(4);
+var at_c = vec(4);
+var bt_c = vec(4);
+var bt_a = vec(4);
+var ct_a = vec(4);
+var ct_b = vec(4);
+var bct = vec(8);
+var cat = vec(8);
+var abt = vec(8);
+var u2 = vec(4);
+var _8 = vec(8);
+var _8b = vec(8);
+var _16 = vec(8);
+var _12 = vec(12);
+var fin = vec(192);
+var fin2 = vec(192);
+
+// ../../node_modules/point-in-polygon-hao/node_modules/robust-predicates/esm/incircle.js
+var iccerrboundA = (10 + 96 * epsilon) * epsilon;
+var iccerrboundB = (4 + 48 * epsilon) * epsilon;
+var iccerrboundC = (44 + 576 * epsilon) * epsilon * epsilon;
+var bc2 = vec(4);
+var ca2 = vec(4);
+var ab2 = vec(4);
+var aa = vec(4);
+var bb = vec(4);
+var cc = vec(4);
+var u3 = vec(4);
+var v = vec(4);
+var axtbc = vec(8);
+var aytbc = vec(8);
+var bxtca = vec(8);
+var bytca = vec(8);
+var cxtab = vec(8);
+var cytab = vec(8);
+var abt2 = vec(8);
+var bct2 = vec(8);
+var cat2 = vec(8);
+var abtt = vec(4);
+var bctt = vec(4);
+var catt = vec(4);
+var _82 = vec(8);
+var _162 = vec(16);
+var _16b = vec(16);
+var _16c = vec(16);
+var _32 = vec(32);
+var _32b = vec(32);
+var _48 = vec(48);
+var _64 = vec(64);
+var fin3 = vec(1152);
+var fin22 = vec(1152);
+
+// ../../node_modules/point-in-polygon-hao/node_modules/robust-predicates/esm/insphere.js
+var isperrboundA = (16 + 224 * epsilon) * epsilon;
+var isperrboundB = (5 + 72 * epsilon) * epsilon;
+var isperrboundC = (71 + 1408 * epsilon) * epsilon * epsilon;
+var ab3 = vec(4);
+var bc3 = vec(4);
+var cd = vec(4);
+var de = vec(4);
+var ea = vec(4);
+var ac = vec(4);
+var bd = vec(4);
+var ce = vec(4);
+var da = vec(4);
+var eb = vec(4);
+var abc = vec(24);
+var bcd = vec(24);
+var cde = vec(24);
+var dea = vec(24);
+var eab = vec(24);
+var abd = vec(24);
+var bce = vec(24);
+var cda = vec(24);
+var deb = vec(24);
+var eac = vec(24);
+var adet = vec(1152);
+var bdet = vec(1152);
+var cdet = vec(1152);
+var ddet = vec(1152);
+var edet = vec(1152);
+var abdet = vec(2304);
+var cddet = vec(2304);
+var cdedet = vec(3456);
+var deter = vec(5760);
+var _83 = vec(8);
+var _8b2 = vec(8);
+var _8c = vec(8);
+var _163 = vec(16);
+var _24 = vec(24);
+var _482 = vec(48);
+var _48b = vec(48);
+var _96 = vec(96);
+var _192 = vec(192);
+var _384x = vec(384);
+var _384y = vec(384);
+var _384z = vec(384);
+var _768 = vec(768);
+var xdet = vec(96);
+var ydet = vec(96);
+var zdet = vec(96);
+var fin4 = vec(1152);
+
+// ../../node_modules/point-in-polygon-hao/dist/esm/index.js
+function pointInPolygon(p, polygon2) {
+  var i;
+  var ii;
+  var k = 0;
+  var f;
+  var u1;
+  var v1;
+  var u22;
+  var v2;
+  var currentP;
+  var nextP;
+  var x = p[0];
+  var y = p[1];
+  var numContours = polygon2.length;
+  for (i = 0; i < numContours; i++) {
+    ii = 0;
+    var contour = polygon2[i];
+    var contourLen = contour.length - 1;
+    currentP = contour[0];
+    if (currentP[0] !== contour[contourLen][0] && currentP[1] !== contour[contourLen][1]) {
+      throw new Error("First and last coordinates in a ring must be the same");
+    }
+    u1 = currentP[0] - x;
+    v1 = currentP[1] - y;
+    for (ii; ii < contourLen; ii++) {
+      nextP = contour[ii + 1];
+      u22 = nextP[0] - x;
+      v2 = nextP[1] - y;
+      if (v1 === 0 && v2 === 0) {
+        if (u22 <= 0 && u1 >= 0 || u1 <= 0 && u22 >= 0) {
+          return 0;
+        }
+      } else if (v2 >= 0 && v1 <= 0 || v2 <= 0 && v1 >= 0) {
+        f = orient2d(u1, u22, v1, v2, 0, 0);
+        if (f === 0) {
+          return 0;
+        }
+        if (f > 0 && v2 > 0 && v1 <= 0 || f < 0 && v2 <= 0 && v1 > 0) {
+          k++;
+        }
+      }
+      currentP = nextP;
+      v1 = v2;
+      u1 = u22;
+    }
+  }
+  if (k % 2 === 0) {
+    return false;
+  }
+  return true;
+}
+
+// ../../node_modules/@turf/invariant/dist/esm/index.js
+function getCoord(coord) {
+  if (!coord) {
+    throw new Error("coord is required");
+  }
+  if (!Array.isArray(coord)) {
+    if (coord.type === "Feature" && coord.geometry !== null && coord.geometry.type === "Point") {
+      return [...coord.geometry.coordinates];
+    }
+    if (coord.type === "Point") {
+      return [...coord.coordinates];
+    }
+  }
+  if (Array.isArray(coord) && coord.length >= 2 && !Array.isArray(coord[0]) && !Array.isArray(coord[1])) {
+    return [...coord];
   }
-};
+  throw new Error("coord must be GeoJSON Point or an Array of numbers");
+}
+function getGeom(geojson) {
+  if (geojson.type === "Feature") {
+    return geojson.geometry;
+  }
+  return geojson;
+}
 
-// src/IndoorMap/renderer/utils/angleBetweenLineString.ts
-var getLineCenter = (line) => {
-  let x = 0, y = 0;
-  for (const [lx, ly] of line) {
-    x += lx;
-    y += ly;
+// ../../node_modules/@turf/boolean-point-in-polygon/dist/esm/index.js
+function booleanPointInPolygon(point2, polygon2, options = {}) {
+  if (!point2) {
+    throw new Error("point is required");
+  }
+  if (!polygon2) {
+    throw new Error("polygon is required");
+  }
+  const pt = getCoord(point2);
+  const geom = getGeom(polygon2);
+  const type = geom.type;
+  const bbox2 = polygon2.bbox;
+  let polys = geom.coordinates;
+  if (bbox2 && inBBox(pt, bbox2) === false) {
+    return false;
+  }
+  if (type === "Polygon") {
+    polys = [polys];
+  }
+  let result = false;
+  for (var i = 0; i < polys.length; ++i) {
+    const polyResult = pointInPolygon(pt, polys[i]);
+    if (polyResult === 0) return options.ignoreBoundary ? false : true;
+    else if (polyResult) result = true;
   }
-  const len = line.length;
-  return [x / len, y / len];
-};
-var angleBetweenLineStrings = (line1, line2) => {
-  const [x1, y1] = getLineCenter(line1);
-  const [x2, y2] = getLineCenter(line2);
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  return Math.atan2(dy, dx);
+  return result;
+}
+function inBBox(pt, bbox2) {
+  return bbox2[0] <= pt[0] && bbox2[1] <= pt[1] && bbox2[2] >= pt[0] && bbox2[3] >= pt[1];
+}
+
+// src/IndoorMap/renderer/utils/findUnitOnPoint.ts
+var findUnitOnPoint = (units, point2) => {
+  return units.find((unit) => booleanPointInPolygon(point2, polygon(unit.geometry.coordinates)));
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 var RendererManager = class extends EventTarget {
   map;
   options;
   // Client for fetching data
   #dataClient;
+  #isClicked = false;
+  #onClickElement = (e) => {
+  };
   /** Elements: Responsible for converting feature info elements and add to map */
   elementRenderer;
   markerRenderer;
@@ -3933,6 +4342,7 @@ var RendererManager = class extends EventTarget {
   currentOrdinals;
   markersMap;
   markersByOrdinal;
+  highlightControllers = [];
   constructor(map, dataClient, options) {
     super();
     this.map = map;
@@ -3942,48 +4352,87 @@ var RendererManager = class extends EventTarget {
     this.markersMap = /* @__PURE__ */ new Map();
     this.markersByOrdinal = /* @__PURE__ */ new Map();
     this.#dataClient = dataClient;
+    const _this = this;
     if (options.type === "3D") {
-      const threeLayer = new import_maptalks8.ThreeLayer("elements", {
-        forceRenderOnMoving: true,
-        forceRenderOnRotating: true
-      });
-      const _this = this;
+      const groupLayer = this.map.getLayer("group");
+      const threeLayer = groupLayer.getLayer("three");
       threeLayer.prepareToDraw = function(gl, scene, camera) {
+        function findBadMeshes(scene2) {
+          const bad = [];
+          scene2.traverse((obj) => {
+            if (!obj?.isMesh) return;
+            const geom = obj.geometry;
+            const pos = geom?.attributes?.position?.array;
+            if (!pos || pos.length === 0) return;
+            for (let i = 0; i < pos.length; i++) {
+              const v2 = pos[i];
+              if (!Number.isFinite(v2)) {
+                bad.push({ mesh: obj, index: i, value: v2 });
+                break;
+              }
+            }
+          });
+          if (bad.length) {
+            console.group(`\u274C Found ${bad.length} meshes with invalid positions`);
+            for (const b of bad) {
+              console.log({
+                name: b.mesh.name,
+                userData: b.mesh.userData,
+                uuid: b.mesh.uuid,
+                badIndex: b.index,
+                badValue: b.value
+              });
+            }
+            console.groupEnd();
+          } else {
+            console.log("\u2705 No invalid meshes found");
+          }
+          return bad;
+        }
         const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
         const dirColor = 16777215;
         const dllight = new THREE3.DirectionalLight(dirColor, 0.8);
-        dllight.position.set(0, -10, 10).normalize();
+        dllight.position.set(0, -10, 20).normalize();
         scene.add(dllight);
         const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
         scene.add(hemi);
-        _this.elementRenderer = new Element3DRenderer(map, options.elements, threeLayer);
+        _this.elementRenderer = new Element3DRenderer(map, options.elements);
         _this.markerRenderer = new Marker3DRenderer(map, {}, threeLayer);
         if (typeof options.onRendererReady === "function") {
           options.onRendererReady();
         }
         _this.#createElements();
+        setTimeout(() => {
+          findBadMeshes(scene);
+        }, 3e3);
       };
-      threeLayer.addTo(this.map);
     } else {
       this.elementRenderer = new Element2DRenderer(map, options.elements);
       this.markerRenderer = new Marker2DRenderer(map);
       this.#createElements();
     }
   }
+  set onClickElement(func) {
+    this.#onClickElement = func;
+  }
+  handleClickElement = (e) => {
+    if (this.#isClicked) return;
+    this.#isClicked = true;
+    const onClickElement = this.#onClickElement;
+    if (!(0, import_lodash_es3.isFunction)(onClickElement)) return;
+    this.#onClickElement(e);
+    this.#isClicked = false;
+  };
   getElementsByOrdinal = (ordinal) => {
     const exist = this.elementsByOrdinal.get(ordinal);
     if (!exist) this.elementsByOrdinal.set(ordinal, []);
     return this.elementsByOrdinal.get(ordinal);
   };
-  getMarkersByOrdinal = (ordinal) => {
-    const exist = this.markersByOrdinal.get(ordinal);
-    if (!exist) this.markersByOrdinal.set(ordinal, []);
-    return this.markersByOrdinal.get(ordinal);
-  };
   addElementsToManager = (id, elements, ordinal) => {
     this.elementsMap.set(id, elements);
     elements.forEach((el) => {
+      el.on("click", (e) => this.handleClickElement(id));
       this.getElementsByOrdinal(ordinal).push(el);
     });
     const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
@@ -3993,22 +4442,14 @@ var RendererManager = class extends EventTarget {
       this.elementRenderer.hideElements(elements, ordinal);
     }
   };
-  addMarkersToManager = (id, markers, ordinal) => {
-    this.markersMap.set(id, markers);
-    markers.forEach((el) => {
-      this.getMarkersByOrdinal(ordinal).push(el);
-    });
-    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
-    if (inOrdinal) {
-      this.markerRenderer.showMarkers(markers, ordinal);
-    } else {
-      this.markerRenderer.hideMarkers(markers, ordinal);
-    }
-  };
   async #createElements() {
+    await delay(this.options.delayBeforeCreateElements ?? 0);
     const levels = await this.#dataClient.filterByType("level", {
       populate: true
     });
+    const openings = await this.#dataClient.filterByType("opening", {
+      populate: true
+    });
     const relationships = await this.#dataClient.filterByType("relationship");
     const fixtures = await this.#dataClient.filterByType("fixture", { populate: true });
     fixtures.forEach((fixture) => {
@@ -4022,7 +4463,7 @@ var RendererManager = class extends EventTarget {
       populate: true
     });
     units.filter(
-      (u) => !["opentobelow", "escalator"].includes(u.properties.category)
+      (u4) => !["opentobelow", "escalator", "room"].includes(u4.properties.category)
     ).forEach((unit) => {
       const element = this.elementRenderer.createGeometry(unit);
       if (element) {
@@ -4030,6 +4471,22 @@ var RendererManager = class extends EventTarget {
         this.addElementsToManager(unit.id, _elements, unit.properties.level.properties.ordinal);
       }
     });
+    units.filter((u4) => u4.properties.category === "room").forEach((unit) => {
+      const openingRelationships = relationships.filter((r) => r.properties.origin?.id === unit.id || r.properties.destination?.id === unit.id);
+      const roomOpenings = (0, import_lodash_es3.compact)(openingRelationships.map((rel) => {
+        const openingId = rel?.properties.intermediary[0].id;
+        return openings.find((o) => o.id === openingId);
+      }));
+      const innerElements = this.elementRenderer.createGeometry(unit);
+      const wallElements = this.elementRenderer.createRoomWall(unit, roomOpenings);
+      if (innerElements || wallElements) {
+        const _innerElements = Array.isArray(innerElements) ? innerElements : [innerElements];
+        const _wallElements = Array.isArray(wallElements) ? wallElements : [wallElements];
+        const _elements = [..._innerElements, ..._wallElements];
+        const ordinal = unit.properties.level.properties.ordinal;
+        this.addElementsToManager(unit.id, _elements, ordinal);
+      }
+    });
     const kiosks = await this.#dataClient.filterByType("kiosk", {
       populate: true
     });
@@ -4040,7 +4497,7 @@ var RendererManager = class extends EventTarget {
         this.addElementsToManager(kiosk.id, _elements, kiosk.properties.level.properties.ordinal);
       }
     });
-    const escalators = units.filter((u) => u.properties.category === "escalator");
+    const escalators = units.filter((u4) => u4.properties.category === "escalator");
     for (const escalator of escalators) {
       try {
         const escalatorRelationships = relationships.filter((r) => (r.properties?.intermediary || []).some((inter) => inter.id === escalator.id));
@@ -4052,13 +4509,15 @@ var RendererManager = class extends EventTarget {
         }
         const thisOrdinal = escalator.properties.ordinal;
         const relationship = escalatorRelationships[0];
+        if (!relationship.properties.origin?.id) throw new Error(`relationship (id=${relationship.id}) - origin not exists`);
+        if (!relationship.properties.destination?.id) throw new Error(`relationship (id=${relationship.id}) - destination not exists`);
         const bothOpeningIds = [relationship.properties.origin.id, relationship.properties.destination.id];
         const bothOpenings = await Promise.all(
           bothOpeningIds.map((id) => this.#dataClient.findById("opening", id, { populate: true }))
         );
         const thisLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal === thisOrdinal);
         const thatLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal !== thisOrdinal);
-        const angle = angleBetweenLineStrings(thisLevelOpening.geometry.coordinates, thatLevelOpening.geometry.coordinates);
+        const angle = 180 * (1 / Math.PI) * angleBetweenLineStrings(thisLevelOpening.geometry.coordinates, thatLevelOpening.geometry.coordinates);
         const direction = thisOrdinal < thatLevelOpening.properties.ordinal ? "up" : "down";
         const escalatorEntryPoint = (0, import_center3.center)(thisLevelOpening).geometry.coordinates;
         const element = await this.elementRenderer.createEscalator(escalator, escalatorEntryPoint, { direction, angle });
@@ -4067,7 +4526,23 @@ var RendererManager = class extends EventTarget {
           this.addElementsToManager(escalator.id, _elements, escalator.properties.ordinal);
         }
       } catch (err) {
-        console.log(`cannot create escalator`, err);
+        console.warn(`cannot create escalator`, err.message);
+      }
+    }
+    const groundLabels = await this.#dataClient.filterByType("label");
+    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 (this.options.type === "3D") {
+      const model3ds = await this.#dataClient.filterByType("model3d");
+      for (const model3d of model3ds) {
+        this.elementRenderer.createModel3d(model3d);
       }
     }
     this.changeLevelByOrdinal(this.currentOrdinals);
@@ -4084,7 +4559,7 @@ var RendererManager = class extends EventTarget {
         this.markerRenderer.showMarkers(markers, ordinal - baseOrdinal);
       }
     } else {
-      const baseOrdinal = Array.isArray(targetOrdinal) ? (0, import_min.default)(targetOrdinal) : targetOrdinal;
+      const baseOrdinal = Array.isArray(targetOrdinal) ? (0, import_lodash_es3.min)(targetOrdinal) : targetOrdinal;
       for (const [ordinal, elements] of this.elementsByOrdinal) {
         const inOrdinal = Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
         if (inOrdinal) {
@@ -4103,14 +4578,50 @@ var RendererManager = class extends EventTarget {
       }
     }
   }
+  highlightElements = (elemIds, options) => {
+    const { reset = true } = options ?? {};
+    if (reset) {
+      this.clearHighlightElements();
+    }
+    const elements = elemIds.map((id) => this.elementsMap.get(id)).flat();
+    elements.forEach((element) => {
+      const controller = this.elementRenderer.createHighlightController(element);
+      if (controller && (0, import_lodash_es3.isFunction)(controller.start)) {
+        controller.start();
+        this.highlightControllers.push(controller);
+      }
+    });
+  };
+  clearHighlightElements = () => {
+    this.highlightControllers.forEach((controller) => {
+      if ((0, import_lodash_es3.isFunction)(controller?.clear)) controller.clear();
+    });
+  };
   /** 
    * ========================================================================
    * Markers
    * ======================================================================== */
+  _getMarkersByOrdinal = (ordinal) => {
+    const exist = this.markersByOrdinal.get(ordinal);
+    if (!exist) this.markersByOrdinal.set(ordinal, []);
+    return this.markersByOrdinal.get(ordinal);
+  };
+  _addMarkersToManager = (id, markers, ordinal) => {
+    this.markersMap.set(id, markers);
+    markers.forEach((el) => {
+      this._getMarkersByOrdinal(ordinal).push(el);
+    });
+    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
+    if (inOrdinal) {
+      this.markerRenderer.showMarkers(markers, ordinal);
+    } else {
+      this.markerRenderer.hideMarkers(markers, ordinal);
+    }
+  };
   createMarker(coordinate, ordinal, text, options) {
     const marker = this.markerRenderer.createMarker(coordinate, ordinal, text, options);
     const markerId = `${this.markersMap.size + 1}`;
-    this.addMarkersToManager(markerId, [marker], ordinal);
+    this._addMarkersToManager(markerId, [marker], ordinal);
   }
   clearMarkers() {
     for (const [markerId, marker] of this.markersMap) {
@@ -4125,9 +4636,25 @@ var INITIAL_ZOOM = 18.5;
 var CLICK_TOLERANCE = 20;
 var defaultOptions = {
   pixelRatio: 1,
+  interactions: true,
   locale: DEFAULT_LOCALE
 };
+var parseMaptalksOptions = (options) => {
+  return {
+    centerCross: options.centerCross ?? false,
+    ...options.interactions === false ? {
+      draggable: false,
+      dragPan: false,
+      dragRotate: false,
+      dragPitch: false,
+      scrollWheelZoom: false,
+      touchZoom: false,
+      doubleClickZoom: false
+    } : {}
+  };
+};
 var IndoorMap = class extends EventTarget {
+  options;
   //TODO: refac functions; let them do only 1 thing in a function
   /** Note: "#" means private variables */
   #styler = null;
@@ -4144,7 +4671,6 @@ var IndoorMap = class extends EventTarget {
   #billboardObjects = [];
   #spriteMarkerObjects = [];
   #mapDecorations = [];
-  #groundLabels = [];
   #groundObjects = [];
   #navigationGeometries = {};
   #venueObjects = [];
@@ -4179,18 +4705,23 @@ var IndoorMap = class extends EventTarget {
   };
   constructor(elementId, options) {
     super();
+    const combinedOptions = import_lodash6.default.merge({}, defaultOptions, options);
+    this.options = combinedOptions;
     const {
       onMapReady,
       onMapLoading,
       pixelRatio,
       locale
-    } = import_lodash7.default.merge({}, defaultOptions, options);
+    } = combinedOptions;
+    const maptalksOptions = parseMaptalksOptions(combinedOptions);
     this.map = new import_maptalks_gl.Map(elementId, {
       attribution: false,
+      // Temporart set, not really default view
+      // Default view is set in camera manager
       center: INITIAL_CENTER,
       zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
-      centerCross: options.centerCross ?? false,
+      ...maptalksOptions,
       baseLayer: new import_maptalks_gl.TileLayer("base", {
         urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
         subdomains: ["a", "b", "c", "d"],
@@ -4202,8 +4733,16 @@ var IndoorMap = class extends EventTarget {
       }),
       layers: []
     });
+    const groupLayer = new import_maptalks_gl.GroupGLLayer("group", [], {}).addTo(this.map);
+    const threeLayer = new import_maptalks10.ThreeLayer("three", {
+      forceRenderOnMoving: true,
+      forceRenderOnRotating: true
+    });
+    groupLayer.addLayer(threeLayer);
+    const gltfLayer = new import_maptalks_gl.GLTFLayer("gltf");
+    groupLayer.addLayer(gltfLayer);
     this.rendererManager = new RendererManager(this.map, options.dataClient, options.renderer);
-    this.camera = new CameraManager(this.map);
+    this.camera = new CameraManager(this.map, options.camera);
     this.locale = locale;
     this.pixelRatio = pixelRatio;
     this.onMapReady = onMapReady;
@@ -4212,25 +4751,33 @@ var IndoorMap = class extends EventTarget {
     this.map.on("click", this.handleMapClick);
     this.dataClient = options.dataClient;
   }
+  setOptions(options) {
+    const combinedOptions = import_lodash6.default.merge({}, defaultOptions, options);
+    this.options = combinedOptions;
+    const maptalksOptions = parseMaptalksOptions(combinedOptions);
+    this.map.setOptions(maptalksOptions);
+  }
   set dataClient(value) {
     this.#dataClient = value;
-    this.#dataClient.filterByType("venue").then((venues) => {
-      const venueCenters = (0, import_center4.default)(featureCollection(venues));
-      const [x, y] = venueCenters.geometry.coordinates;
-      const center2 = new import_maptalks_gl.Coordinate(x, y);
-      this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
-    });
-  }
-  on(eventName, handler) {
-    this.map.on(eventName, handler);
+    if (!this.options.camera?.defaultView?.center) {
+      this.#dataClient.filterByType("venue").then((venues) => {
+        const venueCenters = (0, import_center4.default)(featureCollection(venues));
+        const [x, y] = venueCenters.geometry.coordinates;
+        const center2 = new import_maptalks_gl.Coordinate(x, y);
+        this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
+      });
+    }
   }
   /**
    * Events
    */
+  on(eventName, handler) {
+    this.map.on(eventName, handler);
+  }
   handleMapClick = ({ coordinate }) => {
     const { x, y } = coordinate;
     console.log(
-      `[Coordinates]: x: ${import_lodash7.default.round(x, 8)} y: ${import_lodash7.default.round(
+      `[Coordinates]: x: ${import_lodash6.default.round(x, 8)} y: ${import_lodash6.default.round(
         y,
         8
       )}, [Bearing]: ${this.map.getBearing()}, [Pitch]: ${this.map.getPitch()}`
@@ -4282,48 +4829,17 @@ var IndoorMap = class extends EventTarget {
       this.map.off("moveend", this.#findAndSetVenueInView);
     }
   }
-  get ordinals() {
-    return this.#ordinals || [];
-  }
-  set ordinals(value) {
-    if (!Array.isArray(value)) throw new Error("ordinals must be Array");
-    this.#ordinals = value;
-  }
   set billboards(value) {
     this.#billboards = value;
   }
-  set mapConfig(value) {
-    this.#mapConfig = value;
-  }
   set mapDecorations(value) {
     this.#mapDecorations = value;
   }
-  set maxZoom(value) {
-    this.map.setMaxZoom(value);
-    const spatialReference = {
-      projection: "EPSG:3857",
-      resolutions: (function() {
-        const resolutions = [];
-        const d = 2 * 6378137 * Math.PI;
-        for (let i = 0; i < value; i++) {
-          resolutions[i] = d / (256 * Math.pow(2, i));
-        }
-        return resolutions;
-      })()
-    };
-    this.map.setSpatialReference(spatialReference);
-  }
-  set minZoom(value) {
-    this.map.setMinZoom(value);
-  }
-  set groundLabels(value) {
-    this.#groundLabels = value;
-  }
   set pixelRatio(value) {
     this.map.setDevicePixelRatio(value);
   }
   set onClickElement(func) {
-    this.#onClickElement = func;
+    this.rendererManager.onClickElement = func;
   }
   set locale(value) {
     this.#locale = value || defaultOptions.locale;
@@ -4339,7 +4855,7 @@ var IndoorMap = class extends EventTarget {
     const scene = this.threeLayer.getScene();
     if (scene) {
       scene.children = scene.children.filter(
-        (children) => children instanceof import_three8.PerspectiveCamera
+        (children) => children instanceof import_three6.PerspectiveCamera
       );
     }
   }
@@ -4347,66 +4863,36 @@ var IndoorMap = class extends EventTarget {
     if (this.#isClicked) return;
     this.#isClicked = true;
     const onClickElement = this.#onClickElement;
-    if (!import_lodash7.default.isFunction(onClickElement)) return;
+    if (!import_lodash6.default.isFunction(onClickElement)) return;
     this.#onClickElement(e);
     this.#isClicked = false;
   };
-  setCenter(center2, padding) {
-    this.map.setCenter(center2, padding);
-  }
   async #legacy_createElements() {
     const {
       // 2D
-      createVenue,
       createOpening,
       createSection,
-      createFixture,
-      createOccupant,
       createDecoration,
       // 3D
-      create3DFootprint,
-      create3DGroundLabel,
       create3DBillboard,
-      createVenue3DModel,
-      createExtrudedUnit,
-      create3DFixture,
       create3DAmenityMarker,
-      create3DOccupantAmenityMarker,
-      create3DOpeningMarker,
-      createOccupantGroundLabel,
-      // Light
-      createAmbientLight,
-      createDirectionalLight
+      create3DOpeningMarker
     } = this.#styler;
     let elements = {};
     let object3ds = [];
-    const scene = this.threeLayer.getScene();
-    if (scene) {
-      const {
-        ambientLight: ambientLightConfig = {},
-        directionalLight: directionalLightConfig = {}
-      } = import_lodash7.default.get(this.#mapConfig, "light", {
-        ambientLight: {},
-        directionalLight: {}
-      });
-      const ambientLight = createAmbientLight(ambientLightConfig);
-      scene.add(ambientLight);
-      const light = createDirectionalLight(directionalLightConfig);
-      scene.add(light);
-    }
     for (const feature2 of this.#features) {
       try {
         const { feature_type: featureType, properties, id } = feature2;
-        const layerName = import_lodash7.default.get(
+        const layerName = import_lodash6.default.get(
           LAYER_FEATURE_TYPE_OBJ,
           featureType,
           featureType
         );
         const layer = this.map.getLayer(layerName);
         let geometry;
-        const category = import_lodash7.default.get(feature2, "properties.category");
-        const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
-        const textMarkerType = import_lodash7.default.get(
+        const category = import_lodash6.default.get(feature2, "properties.category");
+        const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
+        const textMarkerType = import_lodash6.default.get(
           this.#mapConfig,
           "text_marker_type",
           "ui-marker"
@@ -4416,16 +4902,6 @@ var IndoorMap = class extends EventTarget {
           feature2
         );
         switch (featureType) {
-          case "venue": {
-            geometry = createVenue(feature2).addTo(layer);
-            const models = await createVenue3DModel(feature2, this.threeLayer);
-            models.forEach((model) => {
-              model.on("click", this.handleClickElement);
-              object3ds.push(model);
-              this.#venueObjects.push(model);
-            });
-            break;
-          }
           case "amenity": {
             if (feature2.properties.is_featured) {
               const billboardObj = create3DBillboard(feature2, this.threeLayer);
@@ -4469,127 +4945,6 @@ var IndoorMap = class extends EventTarget {
             geometry = createSection(feature2)?.addTo(layer);
             break;
           }
-          case "occupant": {
-            switch (category) {
-              // Create only marker if it is amenity occupant
-              case "currencyexchange":
-              case "donationcenter":
-              case "postoffice":
-                const markerFeature = {
-                  ...feature2,
-                  geometry: feature2.properties?.anchor?.geometry
-                };
-                const marker3d = create3DOccupantAmenityMarker(
-                  markerFeature,
-                  this.threeLayer,
-                  extrudeConfig
-                )?.on("click", this.handleClickElement);
-                object3ds.push(marker3d);
-                break;
-              default: {
-                const { kiosk, anchor } = feature2.properties;
-                const { unit } = anchor.properties;
-                let mainLocation = kiosk || unit || null;
-                const relatedLocations = [
-                  ...feature2.properties.units,
-                  ...feature2.properties.kiosks
-                ].filter((f) => f.properties.ordinal !== properties.ordinal);
-                const occupantLocations = [mainLocation, ...relatedLocations];
-                const renderType = feature2.properties.render_type;
-                occupantLocations.forEach((location, index) => {
-                  const isMainLocation = index === 0;
-                  if (renderType === "Label") {
-                    const occupantGroundLabel = createOccupantGroundLabel(
-                      feature2,
-                      location,
-                      { textMarkerType, extrudeConfig },
-                      this.threeLayer
-                    );
-                    if (occupantGroundLabel instanceof GroundLabel) {
-                      occupantGroundLabel.on("click", this.handleClickElement);
-                      occupantGroundLabel.addTo(this.threeLayer);
-                      object3ds.push(occupantGroundLabel);
-                      this.#groundObjects.push(occupantGroundLabel);
-                    }
-                  } else {
-                    const occupantMarker = createOccupant(feature2, location, {
-                      textMarkerType,
-                      extrudeConfig
-                    });
-                    if (occupantMarker instanceof import_maptalks_gl.ui.UIMarker) {
-                      occupantMarker.addTo(this.map);
-                    } else {
-                      occupantMarker?.on("click", this.handleClickElement);
-                      occupantMarker?.addTo(layer);
-                    }
-                    if (isMainLocation) {
-                      geometry = occupantMarker;
-                    } else {
-                      elements[`${feature2.id}_${index}`] = {
-                        geometry: occupantMarker,
-                        properties: location.properties,
-                        featureType: "occupant",
-                        feature: feature2
-                      };
-                    }
-                  }
-                });
-              }
-            }
-            break;
-          }
-          case "fixture": {
-            const models = await create3DFixture(feature2, this.threeLayer);
-            models.forEach((model) => {
-              model.on("click", this.handleClickElement);
-              object3ds.push(model);
-              this.#glbObjects.push(model);
-            });
-            if (!featureExtrudeConfig) {
-              geometry = createFixture(feature2)?.addTo(layer);
-            } else {
-              const locatedLevel = feature2?.properties?.level;
-              const levelExtrudeConfig = getExtrudeConfigByFeature(
-                extrudeConfig,
-                locatedLevel
-              );
-              const levelHeight = import_lodash7.default.get(levelExtrudeConfig, "height", 0);
-              const option = { ...featureExtrudeConfig, altitude: levelHeight };
-              const extrudedFixture = createExtrudedUnit(
-                feature2,
-                this.threeLayer,
-                option
-              );
-              object3ds.push(extrudedFixture);
-            }
-            break;
-          }
-          case "footprint": {
-            const objects = await create3DFootprint(
-              feature2,
-              this.threeLayer,
-              featureExtrudeConfig
-            );
-            objects.forEach((object) => {
-              object.on("click", () => {
-                const {
-                  geometry: { coordinates }
-                } = (0, import_center4.default)(feature2);
-                this.camera.flyToAndZoomIn(coordinates, { pitch: 45 });
-              });
-              object3ds.push(object);
-              this.#objects.push(object);
-            });
-            if (feature2.properties.logo) {
-              const footprintMarker = create3DBillboard(
-                feature2,
-                this.threeLayer
-              );
-              object3ds.push(footprintMarker);
-              this.#billboardObjects.push(footprintMarker);
-            }
-            break;
-          }
           default:
             break;
         }
@@ -4599,16 +4954,6 @@ var IndoorMap = class extends EventTarget {
         console.warn(`Cannot create ${feature2.id}: ${err.message}`);
       }
     }
-    this.#groundLabels.forEach((label) => {
-      const text = label.properties.name;
-      try {
-        const groundLabel = create3DGroundLabel(label, this.threeLayer);
-        object3ds.push(groundLabel);
-        this.#groundObjects.push(groundLabel);
-      } catch (error) {
-        console.log("error creating ground label for ", text);
-      }
-    });
     this.#mapDecorations.forEach((decoration) => {
       const { id, geometry, properties } = decoration;
       const geometryType = decoration?.geometry?.type;
@@ -4658,27 +5003,6 @@ var IndoorMap = class extends EventTarget {
   changeLevelByOrdinal(ordinal) {
     this.rendererManager.changeLevelByOrdinal(ordinal);
   }
-  getFeatureExtent = (feature2, scaleFactor = 1) => {
-    const [minX, minY, maxX, maxY] = index_default(
-      (0, import_transform_scale.default)((0, import_bbox_polygon.default)(index_default(feature2)), scaleFactor)
-    );
-    return new import_maptalks_gl.Extent(minX, minY, maxX, maxY);
-  };
-  getExtentCenter = (extent) => {
-    return extent.getCenter();
-  };
-  getExtentZoom = (extent, options = {
-    isFraction: false,
-    padding: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      paddingTop: 0,
-      paddingBottom: 0
-    }
-  }) => {
-    const { isFraction = false, padding } = options;
-    return this.map.getFitZoom(extent, isFraction, padding);
-  };
   findVenueInView = () => {
     const mapCenter = this.map.getCenter();
     const result = this.#venues.reduce((closest, venue) => {
@@ -4691,9 +5015,6 @@ var IndoorMap = class extends EventTarget {
     }, null);
     return result;
   };
-  flyTo = (center2, options) => {
-    this.camera.flyTo(center2, options);
-  };
   getLineStringBearing = (feature2) => {
     const { geometry } = feature2;
     const path = new import_maptalks_gl.LineString(geometry.coordinates);
@@ -4714,186 +5035,6 @@ var IndoorMap = class extends EventTarget {
   clearAnimations() {
     this.#animationsToRun = [];
   }
-  /**
-   * Hilighting Elements
-   * ========================================= */
-  // TODO: To consider if we should use setter `set hilightElementIds` instead?
-  setHighlightElementIds(targetElementIds, options = {}) {
-    const highlight3DOptions = import_lodash7.default.merge(
-      {},
-      DEFAULT_HIGHLIGHT_OPTIONS,
-      import_lodash7.default.get(options, "highlight3DOptions", {})
-    );
-    const highlight2DOptions = import_lodash7.default.merge(
-      {},
-      DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
-      import_lodash7.default.get(options, "highlight2DOptions", {})
-    );
-    this.setHighlightedObject(targetElementIds, highlight3DOptions);
-    return this.setHighlight2DElementIds(targetElementIds, highlight2DOptions);
-  }
-  setHighlight2DElementIds(targetElementIds, options = {}) {
-    const { defaultMarker, symbolSet } = import_lodash7.default.merge(
-      {},
-      DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
-      options
-    );
-    const {
-      createMarker,
-      createHighlightOccupantMarker,
-      getElementSymbol,
-      getHilighPolygonalSymbol,
-      getHighlightMarkerSymbol
-    } = this.#styler;
-    const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
-    const elementToHilights = targetElementIds.map(
-      (elemId) => this.#elements[elemId] || this.#elements[`${LAST_USER_LOCATION_ELEMENT_ID_PREFIX}${elemId}`]
-    ).filter((elem) => elem);
-    elementToHilights.forEach((elem) => {
-      const { feature: feature2, geometry } = elem;
-      if (!geometry || !feature2) return;
-      const hilightLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-      if (!hilightLayer) return;
-      const defaultSymbol = getHilighPolygonalSymbol(geometry.type);
-      const definedSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-      const symbol = import_lodash7.default.isEmpty(definedSymbol) ? defaultSymbol : definedSymbol;
-      switch (geometry.type) {
-        case "MultiPolygon":
-        case "Polygon": {
-          geometry?.updateSymbol(symbol);
-          break;
-        }
-        default:
-          break;
-      }
-      switch (feature2.feature_type) {
-        case "amenity":
-          const highlightedAmenityMarker = definedSymbol || getHighlightMarkerSymbol();
-          geometry?.updateSymbol(highlightedAmenityMarker);
-          break;
-        case "occupant": {
-          switch (feature2.properties.category) {
-            case "currencyexchange":
-            case "donationcenter":
-            case "postoffice":
-              const highlightedAmenityMarker2 = definedSymbol || getHighlightMarkerSymbol();
-              geometry?.updateSymbol(highlightedAmenityMarker2);
-              break;
-            default:
-              if (feature2.properties.render_type === "Logo") {
-                this.hideGeometryByElementId(feature2.id);
-              }
-              createHighlightOccupantMarker(feature2, {
-                extrudeConfig,
-                symbol: definedSymbol
-              }).on("click", this.handleClickElement).addTo(hilightLayer);
-              break;
-          }
-          break;
-        }
-        case "opening":
-          break;
-        default:
-          if (defaultMarker) createMarker(feature2).addTo(hilightLayer);
-          break;
-      }
-    });
-    this.#highlightElementIds = targetElementIds;
-    if (elementToHilights.length === 0) return;
-    return featureCollection(
-      elementToHilights.map(({ feature: feature2 }) => {
-        const { geometry } = feature2;
-        if (feature2.feature_type === "occupant")
-          return feature(feature2?.properties?.anchor?.geometry);
-        return feature(geometry);
-      })
-    );
-  }
-  clearHighlightElements() {
-    this.#clearAllElementOnLayerByName(HIGHLIGHT_LAYER_NAME);
-    (0, import_lodash7.default)(this.#highlightElementIds).map((elemId) => this.#elements[elemId]?.geometry).compact().forEach((geometry) => {
-      if (geometry instanceof import_maptalks_gl.ui.UIMarker) return;
-      if (geometry instanceof import_maptalks_gl.Marker) {
-        this.showGeometryByElementId(geometry.properties.id);
-        return;
-      }
-      try {
-        const defaultSymbol = geometry.options.defaultSymbol;
-        geometry.updateSymbol(defaultSymbol);
-      } catch (err) {
-        console.log(
-          `error cannot return to defaultSymbol, check if "defaultSymbol" exists in element creation function`
-        );
-      }
-    });
-    this.#highlightElementIds = [];
-  }
-  setHighlightedObject(targetObjectIds, options = {}) {
-    const { symbolSet } = import_lodash7.default.merge({}, DEFAULT_HIGHLIGHT_OPTIONS, options);
-    const {
-      getElementSymbol,
-      getHilighPolygonalSymbol,
-      createHighlight2DAmenityMarkerFrom3DMarker
-    } = this.#styler;
-    const objects = this.threeLayer?.getBaseObjects();
-    const objectsToHighlight = objects.filter(
-      ({ properties }) => targetObjectIds.includes(properties?.id)
-    );
-    const defaultSymbol = getHilighPolygonalSymbol("Polygon");
-    const targetSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-    const { polygonFill: color } = import_lodash7.default.isEmpty(targetSymbol) ? defaultSymbol : targetSymbol;
-    const amenityHighlightMode = import_lodash7.default.get(
-      this.#mapConfig,
-      "amenity_highlight_mode",
-      ""
-    );
-    objectsToHighlight.forEach((obj) => {
-      if (obj.type === "ExtrudePolygon") {
-        const newController = createHighlighExtrudeObjectController(obj, {
-          color
-        });
-        newController.start();
-        this.#highlightObjectControllers.push(newController);
-      }
-      if (obj instanceof SpriteMarker) {
-        if (amenityHighlightMode === "2DMarker") {
-          const hilight2DLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-          const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
-          obj.hide();
-          const { properties: featureProperties } = obj;
-          createHighlight2DAmenityMarkerFrom3DMarker(
-            featureProperties,
-            extrudeConfig
-          ).on("click", this.handleClickElement).addTo(hilight2DLayer);
-        } else {
-          obj.highlight();
-        }
-      }
-      if (obj instanceof Billboard) {
-        const newController = createHighlighBillboardController(obj);
-        newController.start();
-        this.#highlightObjectControllers.push(newController);
-      }
-    });
-    this.#highlightObjectIds = targetObjectIds;
-  }
-  clearHighlightObject() {
-    this.#highlightObjectControllers.forEach((controller) => {
-      if (import_lodash7.default.isFunction(controller?.clear)) controller.clear();
-    });
-    this.#highlightObjectIds.forEach((objIds) => {
-      const objects = this.threeLayer?.getBaseObjects();
-      const objectToResetHighlight = objects.find(
-        ({ properties }) => objIds.includes(properties?.id)
-      );
-      if (objectToResetHighlight instanceof SpriteMarker) {
-        objectToResetHighlight.show();
-        objectToResetHighlight.removeHighlight();
-      }
-    });
-    this.#highlightObjectControllers = [];
-    this.#highlightObjectIds = [];
-  }
   /**
    * User Location
    ****************************/
@@ -4918,15 +5059,15 @@ var IndoorMap = class extends EventTarget {
     }
   }
   updateUserLocationSymbolByLocale(locale) {
-    const userLocationGeometry = import_lodash7.default.get(
+    const userLocationGeometry = import_lodash6.default.get(
       this.#elements,
       `${USER_LOCATION_ELEMENT_ID}.geometry`
     );
     if (!userLocationGeometry) return;
     const currentSymbol = userLocationGeometry.getSymbol();
     const localeSymbolToUpdate = currentSymbol.map((symbol) => {
-      const localeSymbol = import_lodash7.default.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || import_lodash7.default.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
-      if (!import_lodash7.default.isPlainObject(localeSymbol)) return symbol;
+      const localeSymbol = import_lodash6.default.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || import_lodash6.default.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
+      if (!import_lodash6.default.isPlainObject(localeSymbol)) return symbol;
       return {
         ...symbol,
         ...localeSymbol
@@ -5000,14 +5141,14 @@ var IndoorMap = class extends EventTarget {
    * END of User Location
    ****************************/
   showGeometryByElementId = (elementId) => {
-    const geometry = import_lodash7.default.get(
+    const geometry = import_lodash6.default.get(
       this.#elements,
       `${elementId}.geometry`
     );
     if (geometry) geometry.show();
   };
   hideGeometryByElementId = (elementId) => {
-    const geometry = import_lodash7.default.get(this.#elements, `${elementId}.geometry`);
+    const geometry = import_lodash6.default.get(this.#elements, `${elementId}.geometry`);
     if (geometry) geometry.hide();
   };
   setSpriteMarkersOpacity = (opacity = 1) => {
@@ -5054,13 +5195,13 @@ var IndoorMap = class extends EventTarget {
       const line = lineStrings[i];
       const coords = line.geometry.coordinates;
       const prevLine = lineStrings[i - 1];
-      const firstCoord = import_lodash7.default.first(coords);
+      const firstCoord = import_lodash6.default.first(coords);
       const isFirstLine = i === 0;
       if (isFirstLine) {
         accLine.push(...coords);
         continue;
       }
-      const prevLastCoord = import_lodash7.default.last(prevLine.geometry.coordinates);
+      const prevLastCoord = import_lodash6.default.last(prevLine.geometry.coordinates);
       const isNearby = (0, import_distance.default)(point(firstCoord), point(prevLastCoord)) < distance;
       if (!isNearby) {
         const remainingLines = lineStrings.slice(i);
@@ -5081,8 +5222,8 @@ var IndoorMap = class extends EventTarget {
       create3DStepPath
     } = this.#styler;
     const routeMarkerLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-    const linesByOrdinal = (0, import_lodash7.default)(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
-    const joinedLines = (0, import_lodash7.default)(linesByOrdinal).reduce((acc, lines, key) => {
+    const linesByOrdinal = (0, import_lodash6.default)(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
+    const joinedLines = (0, import_lodash6.default)(linesByOrdinal).reduce((acc, lines, key) => {
       const joined = this.combineNearbyLineStrings(lines, {
         properties: { ordinal: +key }
       });
@@ -5110,14 +5251,14 @@ var IndoorMap = class extends EventTarget {
                 stepElement = createOriginMarker(stepGeometry).addTo(routeMarkerLayer);
                 break;
               case "destination-marker":
-                const extrudeConfig = import_lodash7.default.get(this.#mapConfig, "extrude");
+                const extrudeConfig = import_lodash6.default.get(this.#mapConfig, "extrude");
                 if (destinationFeature.feature_type === "occupant") {
-                  const stepId = import_lodash7.default.get(stepGeometry, "id");
+                  const stepId = import_lodash6.default.get(stepGeometry, "id");
                   const normalizedDestinationFeature = {
                     ...destinationFeature,
                     id: stepId
                   };
-                  const logoUrl = import_lodash7.default.get(
+                  const logoUrl = import_lodash6.default.get(
                     normalizedDestinationFeature,
                     "properties.logo.url"
                   );
@@ -5162,15 +5303,15 @@ var IndoorMap = class extends EventTarget {
     const routeMarkerLayer = this.map.getLayer(
       HIGHLIGHT_LAYER_NAME
     );
-    const originMarkerGeometry = import_lodash7.default.get(
+    const originMarkerGeometry = import_lodash6.default.get(
       this.#elements,
       `${ORIGIN_MARKER_ID}.geometry`
     );
-    const destinationMarkerGeometry = import_lodash7.default.get(
+    const destinationMarkerGeometry = import_lodash6.default.get(
       this.#elements,
       `${DESTINATION_MARKER_ID}.geometry`
     );
-    const geometriesToRemove = import_lodash7.default.compact([
+    const geometriesToRemove = import_lodash6.default.compact([
       originMarkerGeometry,
       destinationMarkerGeometry
     ]);
@@ -5181,7 +5322,7 @@ var IndoorMap = class extends EventTarget {
       (obj) => !(obj instanceof NavigationPath)
     );
     const objects = this.#navigationGeometries || {};
-    import_lodash7.default.forEach(objects, (obj) => {
+    import_lodash6.default.forEach(objects, (obj) => {
       if (!obj) return;
       this.#navigationGeometries[obj.properties.id] = null;
       obj.remove();
@@ -5209,33 +5350,6 @@ var IndoorMap = class extends EventTarget {
   /**
    * render (frame)
    */
-  getTargetViewCenter = (targetView, options = { offset: { top: 0, left: 0, right: 0, bottom: 0 } }) => {
-    const map = this.map;
-    const { offset } = options;
-    const { top = 0, left = 0, right = 0, bottom = 0 } = offset;
-    const originalState = {
-      bearing: map.getBearing(),
-      center: map.getCenter(),
-      pitch: map.getPitch(),
-      zoom: map.getZoom()
-    };
-    const finalView = {
-      bearing: import_lodash7.default.isNil(targetView.bearing) ? map.getBearing() : targetView.bearing,
-      center: import_lodash7.default.isNil(targetView.center) ? map.getCenter() : targetView.center,
-      pitch: import_lodash7.default.isNil(targetView.pitch) ? map.getPitch() : targetView.pitch,
-      zoom: import_lodash7.default.isNil(targetView.zoom) ? map.getZoom() : targetView.zoom
-    };
-    map.setView(finalView);
-    const projectedTargetCenter = map.coordinateToContainerPoint(finalView.center).add(right / 2 - left / 2, bottom / 2 - top / 2);
-    const adjustedTargetCenter = map.containerPointToCoordinate(
-      projectedTargetCenter
-    );
-    map.setView(originalState);
-    return adjustedTargetCenter;
-  };
-  setMaxExtent(extent) {
-    return this.map.setMaxExtent(extent);
-  }
   render() {
     const view = this.map.getView();
     const currBearing = view.bearing;
@@ -5244,7 +5358,8 @@ var IndoorMap = class extends EventTarget {
       this.threeLayer.redraw();
     }
     if (this.threeLayer) {
-      const objectOpacity = import_lodash7.default.clamp(38 - 2 * this.camera.getZoom(), 0, 1);
+      const currentView = this.camera.getView();
+      const objectOpacity = import_lodash6.default.clamp(38 - 2 * currentView.zoom, 0, 1);
       this.#objects.forEach((object) => {
         object.getObject3d().traverse((child) => {
           if (child.isMesh) child.material.opacity = objectOpacity;
@@ -5254,8 +5369,8 @@ var IndoorMap = class extends EventTarget {
       });
       if (this.#billboardObjects) {
         this.#billboardObjects.forEach((object) => {
-          const objectScale = import_lodash7.default.clamp(
-            20 - 1 * this.camera.getZoom(),
+          const objectScale = import_lodash6.default.clamp(
+            20 - 1 * currentView.zoom,
             1,
             1.05
           );
@@ -5263,7 +5378,7 @@ var IndoorMap = class extends EventTarget {
         });
       }
       if (this.#isLayersFadingOnZoom) {
-        const layerOpacity = import_lodash7.default.clamp(1 - objectOpacity, 0, 1);
+        const layerOpacity = import_lodash6.default.clamp(1 - objectOpacity, 0, 1);
         LAYERS.forEach((layerKey) => {
           const layer = this.map.getLayer(layerKey);
           if (layer) layer.setOpacity(layerOpacity);
@@ -5277,24 +5392,18 @@ var IndoorMap = class extends EventTarget {
           child.visible = this.showVenueObject && objectOpacity > 0.4;
         });
       });
-      this.#groundObjects.forEach((gLabel) => {
-        gLabel.bearing = currBearing;
-      });
     }
     this.#animationsToRun.forEach(({ callback }) => callback(this));
-    import_tween2.default.update();
+    import_tween.default.update();
     requestAnimationFrame(this.render.bind(this));
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ALL_FEATURE_TYPES,
-  ALWAYS_VISIBLE_FEATURE_TYPES,
   BASE_LAYER_NAME,
   DEFAULT_BASE_URL,
-  DEFAULT_HIGHLIGHT_OPTIONS,
   DEFAULT_LOCALE,
-  DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
   DESTINATION_MARKER_ID,
   GEOJSON_FEATURE_TYPES,
   HIGHLIGHT_LAYER_NAME,
@@ -5308,8 +5417,10 @@ var IndoorMap = class extends EventTarget {
   MARKER_LAYER_NAME,
   NONIMDF_FEATURE_TYPES,
   ORIGIN_MARKER_ID,
+  OccupantHelpers,
   POI_MARKER_LAYER_NAME,
   QueryObserver,
+  TextSpriteMarker,
   USER_LOCATION_ELEMENT_ID,
   USER_LOCATION_LAYER_NAME,
   VENUE_EVENTS,
@@ -5335,6 +5446,16 @@ var IndoorMap = class extends EventTarget {
   getRelatedLocationsByOccupant,
   getSuitablyValueBetweenBearings,
   isClickableFeature,
+  isValidCoordinate,
+  isValidLineString,
+  isValidLineStringCoordinates,
+  isValidMultiPolygon,
+  isValidMultiPolygonCoordinates,
+  isValidPoint,
+  isValidPolygon,
+  isValidPolygonCoordinates,
+  matchFilter,
+  matchFilters,
   safeFetchFeature,
   styledFeatureGenerator
 });