venue-js 1.2.0-next.1 → 1.2.0-next.3

package/dist/index.js

@@ -670,6 +670,7 @@ var getDataClient = (options) => {
 
 // src/IndoorMap/IndoorMap.ts
 var import_maptalks_gl = require("maptalks-gl");
+var import_transcoders = require("@maptalks/transcoders.draco");
 var import_tween2 = __toESM(require("@tweenjs/tween.js"));
 var import_lodash7 = __toESM(require("lodash"));
 
@@ -751,133 +752,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_maptalks9 = require("maptalks.three");
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -3056,8 +2932,133 @@ var createHighlighExtrudeObjectController = (obj, { color }) => {
 };
 
 // src/IndoorMap/camera/CameraManager.ts
-var ZOOM_OUT_LEVEL = 21;
-var ZOOM_IN_LEVEL = 24;
+var import_maptalks6 = 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];
+    }
+  });
+  return result;
+}
+var index_default = bbox;
+
+// src/IndoorMap/camera/CameraManager.ts
+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,80 +3067,65 @@ 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);
   };
-  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_maptalks6.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_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 maptalks4 = __toESM(require("maptalks-gl"));
 var THREE2 = __toESM(require("three"));
-var import_GLTFLoader2 = require("three/examples/jsm/loaders/GLTFLoader");
-var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
 var import_buffer2 = __toESM(require("@turf/buffer"));
 
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
@@ -3168,9 +3154,9 @@ var element3DRendererOptions = {
 };
 
 // src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var import_maptalks6 = require("maptalks");
+var import_maptalks7 = require("maptalks");
 var THREE = __toESM(require("three"));
-var import_maptalks7 = require("maptalks.three");
+var import_maptalks8 = require("maptalks.three");
 var import_lodash6 = require("lodash");
 
 // src/IndoorMap/renderer/utils/interpolateStops.ts
@@ -3208,12 +3194,12 @@ var OPTIONS4 = {
   altitude: 0,
   opacity: 1
 };
-var TextSpriteMarker = class extends import_maptalks7.BaseObject {
+var TextSpriteMarker = class extends import_maptalks8.BaseObject {
   #altitudeOffset = 0;
   constructor(coordinate, options, layer, properties = {}) {
-    options = import_maptalks6.Util.extend({}, OPTIONS4, options, { layer });
+    options = import_maptalks7.Util.extend({}, OPTIONS4, options, { layer });
     super();
-    this._coordinate = new import_maptalks6.Coordinate(coordinate);
+    this._coordinate = new import_maptalks7.Coordinate(coordinate);
     this._initOptions(options);
     this._createGroup();
     this.properties = { ...properties };
@@ -3384,21 +3370,22 @@ var getGeometryOption = (feature2, options) => {
 var Element3DRenderer = class extends EventTarget {
   options;
   map;
+  gltfLayer;
   threeLayer;
-  dracoLoader;
+  // private dracoLoader: DRACOLoader
   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/");
+    const groupLayer = this.map.getLayer("group");
+    this.threeLayer = groupLayer.getLayer("three");
+    this.gltfLayer = groupLayer.getLayer("gltf");
     this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
-    this.threeLayer = layer;
     this.render();
   }
   animation() {
@@ -3428,41 +3415,45 @@ var Element3DRenderer = class extends EventTarget {
     } = getGeometryOption(feature2, 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 = 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];
+      } catch (err) {
+        throw new Error(`Cannot create polygon, ${err.message}`);
+      }
     };
     try {
       switch (feature2.geometry.type) {
@@ -3482,64 +3473,36 @@ var Element3DRenderer = class extends EventTarget {
         }
       }
     } catch (err) {
-      console.log(`error createGeometry`, { feature: feature2, options });
+      console.log(`error createGeometry`, err, { feature: feature2, options });
     }
   };
   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;
+    escalatorMarker.addTo(this.gltfLayer);
+    return escalatorMarker;
   }
   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
+    const treeMarker = new maptalks4.GLTFMarker(coordinate, {
+      symbol: {
+        url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb"
       }
     });
-    const altitude = ordinal * HEIGHT_METER;
-    const baseObjectModel = this.threeLayer.toModel(model, {
-      coordinate,
-      altitude
-    });
-    this.threeLayer.addMesh(baseObjectModel);
-    return baseObjectModel;
+    treeMarker.addTo(this.gltfLayer);
+    return treeMarker;
   }
   createElement(f) {
     switch (f.feature_type) {
@@ -3562,21 +3525,6 @@ 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,
@@ -3942,12 +3890,10 @@ 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) {
         const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
@@ -3957,14 +3903,13 @@ var RendererManager = class extends EventTarget {
         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();
       };
-      threeLayer.addTo(this.map);
     } else {
       this.elementRenderer = new Element2DRenderer(map, options.elements);
       this.markerRenderer = new Marker2DRenderer(map);
@@ -4052,13 +3997,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 +4014,7 @@ var RendererManager = class extends EventTarget {
           this.addElementsToManager(escalator.id, _elements, escalator.properties.ordinal);
         }
       } catch (err) {
-        console.log(`cannot create escalator`, err);
+        console.log(`cannot create escalator`, err.message);
       }
     }
     this.changeLevelByOrdinal(this.currentOrdinals);
@@ -4128,6 +4075,7 @@ var defaultOptions = {
   locale: DEFAULT_LOCALE
 };
 var IndoorMap = class extends EventTarget {
+  options;
   //TODO: refac functions; let them do only 1 thing in a function
   /** Note: "#" means private variables */
   #styler = null;
@@ -4179,14 +4127,18 @@ var IndoorMap = class extends EventTarget {
   };
   constructor(elementId, options) {
     super();
+    const combinedOptions = import_lodash7.default.merge({}, defaultOptions, options);
+    this.options = options;
     const {
       onMapReady,
       onMapLoading,
       pixelRatio,
       locale
-    } = import_lodash7.default.merge({}, defaultOptions, options);
+    } = 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,
@@ -4202,8 +4154,16 @@ var IndoorMap = class extends EventTarget {
       }),
       layers: []
     });
+    const groupLayer = new import_maptalks_gl.GroupGLLayer("group", [], {}).addTo(this.map);
+    const threeLayer = new import_maptalks9.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;
@@ -4214,19 +4174,21 @@ var IndoorMap = class extends EventTarget {
   }
   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(
@@ -4282,40 +4244,12 @@ 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;
   }
@@ -4351,9 +4285,6 @@ var IndoorMap = class extends EventTarget {
     this.#onClickElement(e);
     this.#isClicked = false;
   };
-  setCenter(center2, padding) {
-    this.map.setCenter(center2, padding);
-  }
   async #legacy_createElements() {
     const {
       // 2D
@@ -4575,7 +4506,7 @@ var IndoorMap = class extends EventTarget {
                 const {
                   geometry: { coordinates }
                 } = (0, import_center4.default)(feature2);
-                this.camera.flyToAndZoomIn(coordinates, { pitch: 45 });
+                this.camera.animateTo({ center: coordinates, pitch: 45 });
               });
               object3ds.push(object);
               this.#objects.push(object);
@@ -4658,27 +4589,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 +4601,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);
@@ -5209,33 +5116,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 +5124,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_lodash7.default.clamp(38 - 2 * currentView.zoom, 0, 1);
       this.#objects.forEach((object) => {
         object.getObject3d().traverse((child) => {
           if (child.isMesh) child.material.opacity = objectOpacity;
@@ -5255,7 +5136,7 @@ var IndoorMap = class extends EventTarget {
       if (this.#billboardObjects) {
         this.#billboardObjects.forEach((object) => {
           const objectScale = import_lodash7.default.clamp(
-            20 - 1 * this.camera.getZoom(),
+            20 - 1 * currentView.zoom,
             1,
             1.05
           );