babyeditor-tool 0.0.7 → 0.0.10

package/dist/babyeditor.tool.es.js

@@ -1,32 +1,704 @@
-import { ImportMeshAsync, Node, Mesh, Engine, Scene, Vector3, HavokPlugin, AppendSceneAsync, FreeCamera } from "@babylonjs/core";
-import "@babylonjs/materials";
+import { TransformNode, MeshBuilder, StandardMaterial, Color3, Texture, HDRCubeTexture, ArcRotateCamera, ImportMeshAsync, Node, AbstractMesh, Observable, Engine, Scene, PointerEventTypes, Vector3, HavokPlugin, AppendSceneAsync, FreeCamera, QuadraticEase, EasingFunction, TargetCamera } from "@babylonjs/core";
+import { GridMaterial } from "@babylonjs/materials";
 import "@babylonjs/loaders";
 import "@babylonjs/post-processes";
 import "@babylonjs/procedural-textures";
 import HavokPhysics from "@babylonjs/havok";
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+const _Projection = class _Projection2 {
+  /**
+   * 投影坐标转换
+   * @param from 原始坐标系
+   * @param to 投影坐标系
+   * @param coordinates 坐标
+   * @returns 转换后的坐标
+   */
+  static Transform(from, to, coordinates) {
+    if (from === to) {
+      return coordinates;
+    }
+    if (from === _Projection2.EPSG4326 && to === _Projection2.EPSG3857) {
+      return this.EPSG4326To3857(coordinates);
+    }
+    if (from === _Projection2.EPSG3857 && to === _Projection2.EPSG4326) {
+      return this.EPSG3857To4326(coordinates);
+    }
+    throw new Error(`Unsupported projection transformation: ${from} to ${to}`);
+  }
+  /**
+   * EPSG:4326转EPSG:3857
+   * @param coordinates 坐标
+   * @returns 转换后的坐标
+   */
+  static EPSG4326To3857(coordinates) {
+    const lat = Math.max(-this.MAX_LATITUDE, Math.min(this.MAX_LATITUDE, coordinates[1]));
+    const lng = Math.max(-180, Math.min(180, coordinates[0]));
+    const latRad = lat * Math.PI / 180;
+    const lngRad = lng * Math.PI / 180;
+    const x = this.R * lngRad;
+    const y = this.R * Math.log(Math.tan(Math.PI / 4 + latRad / 2));
+    const clampedX = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, x));
+    const clampedY = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, y));
+    return [clampedX, clampedY];
+  }
+  /**
+   * EPSG:3857转EPSG:4326
+   * @param coordinates 坐标
+   * @returns 转换后的坐标
+   */
+  static EPSG3857To4326(coordinates) {
+    const x = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, coordinates[0]));
+    const y = Math.max(-this.MAX_PROJECTED_COORD, Math.min(this.MAX_PROJECTED_COORD, coordinates[1]));
+    const lng = x / this.R * 180 / Math.PI;
+    const latRad = 2 * Math.atan(Math.exp(y / this.R)) - Math.PI / 2;
+    const lat = latRad * 180 / Math.PI;
+    return [lng, lat];
+  }
+};
+__publicField$6(_Projection, "R", 6378137);
+__publicField$6(_Projection, "R_MINOR", 6356752314245179e-9);
+__publicField$6(_Projection, "MAX_LATITUDE", 85.0511287798);
+__publicField$6(_Projection, "MAX_PROJECTED_COORD", _Projection.R * Math.PI);
+__publicField$6(_Projection, "EPSG4326", "EPSG:4326");
+__publicField$6(_Projection, "EPSG3857", "EPSG:3857");
+__publicField$6(_Projection, "Max3857BBox", [-20037508342789244e-9, -2003750833989489e-8, 20037508342789244e-9, 2003750833989489e-8]);
+__publicField$6(_Projection, "Max4326BBox", [-180, -90, 180, 90]);
+let Projection = _Projection;
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+class Layer {
+  constructor(name, scene) {
+    __publicField$5(this, "layerRootNode");
+    __publicField$5(this, "name", "");
+    this.name = name;
+    this.layerRootNode = new TransformNode(name, scene);
+    this.layerRootNode.name = name;
+    this.layerRootNode.metadata = { editable: false, layerName: name };
+  }
+  /**
+   * 获取图层是否启用
+   */
+  get isEnabled() {
+    return this.layerRootNode.isEnabled();
+  }
+  /**
+   * 设置图层是否启用
+   * @param enabled 是否启用
+   */
+  set isEnabled(enabled) {
+    this.layerRootNode.setEnabled(enabled);
+  }
+  /**
+   * 当图层启用状态改变时触发
+   * @param observers 观察者
+   */
+  get onEnabledStateChanged() {
+    return this.layerRootNode.onEnabledStateChangedObservable;
+  }
+  /**
+   * 设置图层是否启用
+   * @param enabled 是否启用
+   */
+  setEnabled(enabled) {
+    this.layerRootNode.setEnabled(enabled);
+  }
+  /**
+   * 释放图层
+   */
+  dispose() {
+    this.layerRootNode.dispose();
+  }
+  onDisposeObservable(observers) {
+    return this.layerRootNode.onDisposeObservable.add(observers);
+  }
+}
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+class TileLayer {
+  constructor(name, url) {
+    __publicField$4(this, "name", "");
+    __publicField$4(this, "url", "");
+    __publicField$4(this, "bbox", [0, 0, 0, 0]);
+    this.name = name;
+    this.url = url;
+  }
+  getTileUrl(x, y, z) {
+    return this.url.replace("{z}", z.toString()).replace("{x}", x.toString()).replace("{y}", y.toString());
+  }
+  requestImage(x, y, z) {
+    const url = this.getTileUrl(x, y, z);
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.src = url;
+    return new Promise((resolve, reject) => {
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error("Failed to load image"));
+    });
+  }
+}
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+class TileLayerRenderer extends Layer {
+  /**
+   * 构造函数
+   * @param mapViewer 地图视图
+   */
+  constructor(mapViewer) {
+    super("TileLayerRenderer", mapViewer.scene);
+    __publicField$3(this, "tileLayers", []);
+    __publicField$3(this, "mapViewer");
+    __publicField$3(this, "maxBBox");
+    __publicField$3(this, "currentZoom", 1);
+    __publicField$3(this, "renderedTiles", /* @__PURE__ */ new Map());
+    __publicField$3(this, "cameraObserver", null);
+    __publicField$3(this, "autoUpdate", false);
+    this.mapViewer = mapViewer;
+    this.maxBBox = mapViewer.projection === "EPSG:3857" ? Projection.Max3857BBox : Projection.Max4326BBox;
+    this.layerRootNode.parent = mapViewer.rootNode;
+    this.tileLayers = [new TileLayer("aaa", "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}")];
+  }
+  get projectionBBox() {
+    return this.mapViewer.getProjectionBbox();
+  }
+  /**
+   * 获取地图范围
+   * @returns [minX, minY, maxX, maxY] 地图范围
+   */
+  get bbox() {
+    return this.mapViewer.bbox;
+  }
+  /**
+   * 获取地图大小
+   * @returns [width, height] 地图大小
+   */
+  get size() {
+    return this.mapViewer.size;
+  }
+  /**
+   * 获取地图投影
+   * @returns 地图投影
+   */
+  get projection() {
+    return this.mapViewer.projection;
+  }
+  /**
+   * 根据地图投影坐标和缩放级别获取瓦片序号
+   * @param x 投影坐标X
+   * @param y 投影坐标Y
+   * @param z 缩放级别
+   * @returns [tileX, tileY] 瓦片序号
+   */
+  positionToTile(x, y, z) {
+    const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.maxBBox;
+    const width = bboxMaxX - bboxMinX;
+    const height = bboxMaxY - bboxMinY;
+    const tileCount = Math.pow(2, z);
+    const tileWidth = width / tileCount;
+    const tileHeight = height / tileCount;
+    const tileX = Math.floor((x - bboxMinX) / tileWidth);
+    const tileY = Math.floor((bboxMaxY - y) / tileHeight);
+    return [tileX, tileY];
+  }
+  /**
+   * 根据瓦片序号和缩放级别获取瓦片范围
+   * @param tileX 瓦片序号X
+   * @param tileY 瓦片序号Y
+   * @param z 缩放级别
+   * @returns [minX, minY, maxX, maxY] 瓦片范围
+   */
+  tileToBBox(tileX, tileY, z) {
+    const [minX, minY, maxX, maxY] = this.maxBBox;
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const tileCount = Math.pow(2, z);
+    const tileWidth = width / tileCount;
+    const tileHeight = height / tileCount;
+    const tileMinX = minX + tileX * tileWidth;
+    const tileMinY = maxY - tileY * tileHeight - tileHeight;
+    const tileMaxX = tileMinX + tileWidth;
+    const tileMaxY = tileMinY + tileHeight;
+    return [tileMinX, tileMaxY, tileMaxX, tileMinY];
+  }
+  /**
+   * 根据瓦片序号和缩放级别获取瓦片中心点坐标
+   * @param tileX 瓦片序号X
+   * @param tileY 瓦片序号Y
+   * @param z 缩放级别
+   * @returns [centerX, centerY] 瓦片中心点坐标
+   */
+  tileToCenter(tileX, tileY, z) {
+    const [minX, minY, maxX, maxY] = this.tileToBBox(tileX, tileY, z);
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    return [centerX, centerY];
+  }
+  /**
+   * 根据瓦片序号和缩放级别获取瓦片在视野中的尺寸大小
+   * @param tileX 瓦片序号X
+   * @param tileY 瓦片序号Y
+   * @param z 缩放级别
+   * @returns [width, height] 瓦片在视野中的宽度和高度(像素)
+   */
+  tileToViewportSize(tileX, tileY, z) {
+    const [minX, minY, maxX, maxY] = this.tileToBBox(tileX, tileY, z);
+    const [viewportMinX, viewportMinY] = this.projectionToViewport(minX, maxY);
+    const [viewportMaxX, viewportMaxY] = this.projectionToViewport(maxX, minY);
+    const viewportWidth = Math.abs(viewportMaxX - viewportMinX);
+    const viewportHeight = Math.abs(viewportMaxY - viewportMinY);
+    return [viewportWidth, viewportHeight];
+  }
+  /**
+   * 将投影坐标转换为地图视野相对坐标
+   * @param x 投影坐标X
+   * @param y 投影坐标Y
+   * @returns [relativeX, relativeY] 相对于地图视野的坐标
+   */
+  projectionToViewport(x, y) {
+    const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.projectionBBox;
+    const [width, height] = this.size;
+    const relativeX = (x - bboxMinX) / (bboxMaxX - bboxMinX);
+    const relativeY = (y - bboxMinY) / (bboxMaxY - bboxMinY);
+    const viewportX = relativeX * width - this.size[0] / 2;
+    const viewportY = relativeY * height - this.size[1] / 2;
+    return [viewportX, viewportY];
+  }
+  /**
+   * 根据瓦片序号和缩放级别获取瓦片网格
+   * @param tileX 瓦片序号X
+   * @param tileY 瓦片序号Y
+   * @param z 缩放级别
+   * @returns 瓦片网格
+   */
+  getTileMesh(tileX, tileY, z) {
+    const tileMesh = MeshBuilder.CreateGround(`tile-${tileX}-${tileY}-${z}`, { width: 1, height: 1 }, this.mapViewer.scene);
+    const center = this.tileToCenter(tileX, tileY, z);
+    const worldPosition = this.projectionToViewport(center[0], center[1]);
+    const worldSize = this.tileToViewportSize(tileX, tileY, z);
+    tileMesh.position.x = worldPosition[0];
+    tileMesh.position.z = worldPosition[1];
+    tileMesh.scaling.x = worldSize[0];
+    tileMesh.scaling.z = worldSize[1];
+    tileMesh.parent = this.layerRootNode;
+    this.updateTileTexture(tileX, tileY, z, tileMesh);
+    return tileMesh;
+  }
+  /**
+   * 获取调试画布
+   * @returns 调试画布元素
+   */
+  getTileCanvas(tileX, tileY, z) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 256;
+    canvas.height = 256;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.fillStyle = "red";
+      ctx.font = "18px Arial";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
+      ctx.fillText(`Tile: ${tileX}-${tileY}, ${z}`, canvas.width / 2, canvas.height / 2);
+    }
+    return canvas;
+  }
+  updateTileTexture(tileX, tileY, z, tileMesh) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 256;
+    canvas.height = 256;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.fillStyle = "red";
+      ctx.font = "18px Arial";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
+      ctx.fillText(`Tile: ${tileX}-${tileY}, ${z}`, canvas.width / 2, canvas.height / 2);
+    }
+    let material = tileMesh.material;
+    if (!material) {
+      material = new StandardMaterial(`tile-${tileX}-${tileY}-${z}`, this.mapViewer.scene);
+      material.specularColor = new Color3(0, 0, 0);
+      tileMesh.material = material;
+    }
+    this.tileLayers.forEach((tileLayer) => {
+      material.diffuseTexture = new Texture(tileLayer.getTileUrl(tileX, tileY, z), this.mapViewer.scene, false, true);
+    });
+  }
+  /**
+   * 根据当前视野范围和缩放级别计算需要渲染的瓦片列表
+   * @param zoom 缩放级别
+   * @returns 需要渲染的瓦片坐标数组 [[tileX, tileY, z], ...]
+   */
+  calculateVisibleTiles(zoom) {
+    const [bboxMinX, bboxMinY, bboxMaxX, bboxMaxY] = this.projectionBBox;
+    const [minTileX, maxTileY] = this.positionToTile(bboxMinX, bboxMinY, zoom);
+    const [maxTileX, minTileY] = this.positionToTile(bboxMaxX, bboxMaxY, zoom);
+    const visibleTiles = [];
+    for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
+      for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
+        const center = this.tileToCenter(tileX, tileY, zoom);
+        if (center[0] >= bboxMinX && center[0] <= bboxMaxX && center[1] >= bboxMinY && center[1] <= bboxMaxY) {
+          visibleTiles.push([tileX, tileY, zoom]);
+        }
+      }
+    }
+    return visibleTiles;
+  }
+  /**
+   * 更新瓦片渲染，只渲染当前视野内的瓦片
+   * @param zoom 缩放级别
+   */
+  updateTiles(zoom) {
+    this.currentZoom = zoom;
+    const visibleTiles = this.calculateVisibleTiles(zoom);
+    const shouldExistTiles = /* @__PURE__ */ new Set();
+    visibleTiles.forEach(([x, y, z]) => {
+      shouldExistTiles.add(`${x}-${y}-${z}`);
+    });
+    this.renderedTiles.forEach((mesh, key) => {
+      if (!shouldExistTiles.has(key)) {
+        mesh.dispose();
+        this.renderedTiles.delete(key);
+      }
+    });
+    visibleTiles.forEach(([tileX, tileY, z]) => {
+      const tileKey = `${tileX}-${tileY}-${z}`;
+      if (!this.renderedTiles.has(tileKey)) {
+        const tileMesh = this.getTileMesh(tileX, tileY, z);
+        this.renderedTiles.set(tileKey, tileMesh);
+      }
+    });
+  }
+  /**
+   * 启用自动更新模式，监听摄像机变化自动更新瓦片
+   * @param zoom 缩放级别
+   */
+  enableAutoUpdate(zoom = 0) {
+    this.autoUpdate = true;
+    this.currentZoom = zoom;
+    this.updateTiles(zoom);
+    const scene = this.mapViewer.scene;
+    if (scene.activeCamera) {
+      this.cameraObserver = scene.onAfterCameraRenderObservable.add(() => {
+        if (this.autoUpdate) {
+          this.updateTiles(this.currentZoom);
+        }
+      });
+    }
+  }
+  /**
+   * 禁用自动更新模式
+   */
+  disableAutoUpdate() {
+    this.autoUpdate = false;
+    if (this.cameraObserver) {
+      this.mapViewer.scene.onAfterCameraRenderObservable.remove(this.cameraObserver);
+      this.cameraObserver = null;
+    }
+  }
+  /**
+   * 设置缩放级别并更新瓦片
+   * @param zoom 缩放级别
+   */
+  setZoom(zoom) {
+    if (zoom !== this.currentZoom) {
+      this.currentZoom = zoom;
+      this.updateTiles(zoom);
+    }
+  }
+  /**
+   * 清除所有已渲染的瓦片
+   */
+  clearTiles() {
+    this.renderedTiles.forEach((mesh) => {
+      mesh.dispose();
+    });
+    this.renderedTiles.clear();
+  }
+  /**
+   * 释放资源
+   */
+  dispose() {
+    this.disableAutoUpdate();
+    this.clearTiles();
+    super.dispose();
+  }
+}
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const _state = {};
+function v1(options, buf, offset) {
+  let bytes;
+  {
+    const now = Date.now();
+    const rnds = rng();
+    updateV1State(_state, now, rnds);
+    bytes = v1Bytes(rnds, _state.msecs, _state.nsecs, _state.clockseq, _state.node, buf, offset);
+  }
+  return buf ?? unsafeStringify(bytes);
+}
+function updateV1State(state, now, rnds) {
+  state.msecs ?? (state.msecs = -Infinity);
+  state.nsecs ?? (state.nsecs = 0);
+  if (now === state.msecs) {
+    state.nsecs++;
+    if (state.nsecs >= 1e4) {
+      state.node = void 0;
+      state.nsecs = 0;
+    }
+  } else if (now > state.msecs) {
+    state.nsecs = 0;
+  } else if (now < state.msecs) {
+    state.node = void 0;
+  }
+  if (!state.node) {
+    state.node = rnds.slice(10, 16);
+    state.node[0] |= 1;
+    state.clockseq = (rnds[8] << 8 | rnds[9]) & 16383;
+  }
+  state.msecs = now;
+  return state;
+}
+function v1Bytes(rnds, msecs, nsecs, clockseq, node, buf, offset = 0) {
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  if (!buf) {
+    buf = new Uint8Array(16);
+    offset = 0;
+  } else {
+    if (offset < 0 || offset + 16 > buf.length) {
+      throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);
+    }
+  }
+  msecs ?? (msecs = Date.now());
+  nsecs ?? (nsecs = 0);
+  clockseq ?? (clockseq = (rnds[8] << 8 | rnds[9]) & 16383);
+  node ?? (node = rnds.slice(10, 16));
+  msecs += 122192928e5;
+  const tl = ((msecs & 268435455) * 1e4 + nsecs) % 4294967296;
+  buf[offset++] = tl >>> 24 & 255;
+  buf[offset++] = tl >>> 16 & 255;
+  buf[offset++] = tl >>> 8 & 255;
+  buf[offset++] = tl & 255;
+  const tmh = msecs / 4294967296 * 1e4 & 268435455;
+  buf[offset++] = tmh >>> 8 & 255;
+  buf[offset++] = tmh & 255;
+  buf[offset++] = tmh >>> 24 & 15 | 16;
+  buf[offset++] = tmh >>> 16 & 255;
+  buf[offset++] = clockseq >>> 8 | 128;
+  buf[offset++] = clockseq & 255;
+  for (let n = 0; n < 6; ++n) {
+    buf[offset++] = node[n];
+  }
+  return buf;
+}
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+class MapViewer {
+  /**
+   * 创建地图实例
+   * @param options 地图参数
+   */
+  constructor(options = {}, scene) {
+    __publicField$2(this, "id", v1());
+    __publicField$2(this, "name", "MapViewer");
+    __publicField$2(this, "rootNode");
+    __publicField$2(this, "projection", "EPSG:3857");
+    __publicField$2(this, "bbox", [-180, -90, 180, 90]);
+    __publicField$2(this, "size", [100, 100]);
+    __publicField$2(this, "tileLayerRenderer");
+    __publicField$2(this, "scene");
+    __publicField$2(this, "disposed", false);
+    __publicField$2(this, "zoomOffset", 1);
+    this.id = options.id || this.id;
+    this.name = options.name || this.name;
+    this.rootNode = new TransformNode(options.name || "MapViewerRootNode", scene);
+    this.rootNode.name = options.name || this.rootNode.name;
+    this.rootNode.metadata = { editable: false };
+    this.rootNode.doNotSerialize = true;
+    this.bbox = options.bbox || this.bbox;
+    this.projection = options.projection || this.projection;
+    this.zoomOffset = options.zoomOffset || this.zoomOffset;
+    this.setViewWidth(options.viewWidth || this.size[0]);
+    this.scene = scene;
+    this.tileLayerRenderer = new TileLayerRenderer(this);
+    this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
+  }
+  setZoomOffset(zoomOffset) {
+    this.zoomOffset = Math.min(4, zoomOffset);
+    this.tileLayerRenderer.setZoom(this.getMinZoom() + zoomOffset);
+  }
+  setBBox(bbox) {
+    this.bbox = bbox;
+    this.setViewWidth(this.size[0]);
+    this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
+  }
+  setViewWidth(viewWidth) {
+    const bbox = this.getProjectionBbox();
+    this.size = [viewWidth, (bbox[3] - bbox[1]) * viewWidth / (bbox[2] - bbox[0])];
+    if (this.tileLayerRenderer) {
+      this.tileLayerRenderer.updateTiles(this.getMinZoom() + this.zoomOffset);
+    }
+  }
+  getMinZoom() {
+    const bbox = this.getProjectionBbox();
+    const maxBBox = this.projection === "EPSG:3857" ? Projection.Max3857BBox : Projection.Max4326BBox;
+    const minZoom = Math.round(Math.log(Math.abs((maxBBox[2] - maxBBox[0]) / (bbox[3] - bbox[1]))) / Math.log(2));
+    return minZoom;
+  }
+  /**
+   * 设置地图投影坐标系
+   * @param projection 投影坐标系
+   */
+  setProjection(projection) {
+    this.projection = projection;
+  }
+  /**
+   * 获取地图投影坐标系
+   * @returns 投影坐标系
+   */
+  getProjectionBbox() {
+    const min = this.project([this.bbox[0], this.bbox[1]]);
+    const max = this.project([this.bbox[2], this.bbox[3]]);
+    return [min[0], min[1], max[0], max[1]];
+  }
+  /**
+   * 将wgs84坐标投影到地图坐标系
+   * @param coordinates 坐标
+   * @returns 投影后的坐标
+   */
+  project(coordinates) {
+    if (this.projection === "EPSG:3857") {
+      return Projection.EPSG4326To3857(coordinates);
+    }
+    return coordinates;
+  }
+  createGround() {
+    const ground = MeshBuilder.CreateGround("ground", { width: this.size[0], height: this.size[1] }, this.scene);
+    ground.parent = this.rootNode;
+    const groundMaterial = new GridMaterial("初始网格材质", this.scene);
+    groundMaterial.mainColor = new Color3(0, 0, 0);
+    groundMaterial.opacity = 0.8;
+    groundMaterial.lineColor = new Color3(0, 0, 0);
+    groundMaterial.backFaceCulling = false;
+    ground.material = groundMaterial;
+  }
+  dispose() {
+    this.disposed = true;
+  }
+}
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, key + "", value);
 class CustomSystem {
-  constructor(scene) {
+  constructor(scene, scriptInstanceList = [], environment) {
     this.scene = scene;
-    this.load();
+    this.scriptInstanceList = scriptInstanceList;
+    __publicField$1(this, "mapViewers", []);
+    this.load(environment);
   }
-  load() {
+  load(environment) {
     const transNodes = this.scene.transformNodes;
     for (let i = 0; i < transNodes.length; i++) {
       const transNode = transNodes[i];
       if (transNode.metadata) {
         const metaData = transNode.metadata;
         if (metaData.meshBuilderType === "assetModel" && metaData.assetModelBuilderOptions?.url) {
-          CustomSystem.LoadAssetModel(transNode, metaData.assetModelBuilderOptions.url, this.scene);
+          CustomSystem.LoadAssetModel(transNode, metaData.assetModelBuilderOptions.url, this.scene).then(() => {
+            const findInstance = this.scriptInstanceList.find((instance) => instance.node === transNode);
+            if (findInstance && typeof findInstance.ready === "function") {
+              findInstance.ready();
+            }
+          });
+        } else if (metaData.meshBuilderType === "mapViewer" && metaData.mapViewerBuilderOptions) {
+          this.createMapViewer(transNode, metaData);
+        }
+      }
+    }
+    const cameras = this.scene.cameras;
+    for (let i = 0; i < cameras.length; i++) {
+      const camera = cameras[i];
+      if (camera.metadata && environment !== "editor") {
+        this.applyCameraBehavior(camera);
+      }
+    }
+    if (this.scene.environmentTexture) {
+      const url = this.scene.environmentTexture.url;
+      this.scene.environmentTexture = null;
+      setTimeout(() => {
+        try {
+          this.scene.environmentTexture = new HDRCubeTexture(url, this.scene, 256);
+        } catch (error) {
+        }
+      }, 1e3);
+    }
+  }
+  applyCameraBehavior(camera) {
+    const metaData = camera.metadata;
+    if (camera instanceof ArcRotateCamera && metaData) {
+      if (metaData.useAutoRotationBehavior && metaData.autoRotationBehavior) {
+        camera.useAutoRotationBehavior = true;
+        const autoRotationBehavior = camera.autoRotationBehavior;
+        if (autoRotationBehavior) {
+          autoRotationBehavior.zoomStopsAnimation = metaData.autoRotationBehavior.zoomStopsAnimation;
+          autoRotationBehavior.idleRotationSpeed = metaData.autoRotationBehavior.idleRotationSpeed;
+          autoRotationBehavior.idleRotationWaitTime = metaData.autoRotationBehavior.idleRotationWaitTime;
+        }
+      }
+      if (metaData.useFramingBehavior && metaData.framingBehavior) {
+        camera.useFramingBehavior = true;
+        const framingBehavior = camera.framingBehavior;
+        if (framingBehavior) {
+          framingBehavior.zoomStopsAnimation = metaData.framingBehavior.zoomStopsAnimation;
+          framingBehavior.defaultElevation = metaData.framingBehavior.defaultElevation;
+          framingBehavior.elevationReturnTime = metaData.framingBehavior.elevationReturnTime;
+          framingBehavior.elevationReturnWaitTime = metaData.framingBehavior.elevationReturnWaitTime;
+          framingBehavior.framingTime = metaData.framingBehavior.framingTime;
+        }
+      }
+      if (metaData.useBouncingBehavior && metaData.bouncingBehavior) {
+        camera.useBouncingBehavior = true;
+        if (camera.bouncingBehavior) {
+          camera.bouncingBehavior.autoTransitionRange = metaData.bouncingBehavior.autoTransitionRange || false;
+          camera.bouncingBehavior.lowerRadiusTransitionRange = metaData.bouncingBehavior.lowerRadiusTransitionRange || 2;
+          camera.bouncingBehavior.upperRadiusTransitionRange = metaData.bouncingBehavior.upperRadiusTransitionRange || -2;
         }
       }
     }
   }
+  /**
+   * 加载外部资源模型
+   * @param parentNode 父对象
+   * @param url 模型地址
+   * @param scene 场景
+   */
   static async LoadAssetModel(parentNode, url, scene) {
     const applyMetaData = (node) => {
       if (node instanceof Node && !node.parent) {
         node.parent = parentNode;
       }
-      if (node instanceof Mesh && node.material) {
+      if (node instanceof AbstractMesh && node.material) {
         node.material.doNotSerialize = true;
       }
       node.doNotSerialize = true;
@@ -37,6 +709,32 @@ class CustomSystem {
     lights.forEach((node) => applyMetaData(node));
     skeletons.forEach((node) => applyMetaData(node));
   }
+  /**
+   * 创建地图查看器
+   * @param parentNode 父对象
+   * @param metaData 元数据
+   */
+  createMapViewer(parentNode, metaData) {
+    const mapViewer = new MapViewer({
+      id: metaData.mapViewerBuilderOptions?.id,
+      viewWidth: metaData.mapViewerBuilderOptions?.viewWidth,
+      bbox: [metaData.mapViewerBuilderOptions?.minX || -180, metaData.mapViewerBuilderOptions?.minY || -90, metaData.mapViewerBuilderOptions?.maxX || 180, metaData.mapViewerBuilderOptions?.maxY || 90]
+    }, this.scene);
+    parentNode.onDisposeObservable.addOnce(() => {
+      mapViewer.dispose();
+      this.mapViewers = this.mapViewers.filter((item) => item !== mapViewer);
+    });
+    mapViewer.rootNode.parent = parentNode;
+    this.mapViewers.push(mapViewer);
+    return mapViewer;
+  }
+  /**
+   * 根据ID获取地图查看器
+   * @param id 地图查看器ID
+   */
+  getMapViewerById(id) {
+    return this.mapViewers.find((item) => item.id === id);
+  }
 }
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -48,24 +746,83 @@ class SceneLoader {
    * @param sceneData 场景数据
    * @param scriptsMap 脚本代码列表
    */
-  constructor(container, sceneData, scriptsMap) {
+  constructor(container, sceneData, scriptsMap, option = {}) {
     __publicField(this, "container");
     __publicField(this, "canvas");
     __publicField(this, "engine");
     __publicField(this, "scene");
     __publicField(this, "sceneData", "");
-    __publicField(this, "scritpsMap", {});
+    __publicField(this, "scriptsMap", {});
+    __publicField(this, "onLoadObservable", new Observable());
+    __publicField(this, "option", {});
     __publicField(this, "scriptInstanceList", []);
+    __publicField(this, "eventsSystem", {
+      click: [],
+      dblclick: [],
+      pointerdown: [],
+      pointerup: [],
+      pointermove: []
+    });
     this.container = container;
     this.canvas = document.createElement("canvas");
     this.canvas.className = "main-display-canvas";
     this.canvas.width = container.clientWidth;
     this.canvas.height = container.clientHeight;
     this.container.appendChild(this.canvas);
-    this.engine = new Engine(this.canvas, true);
+    this.engine = new Engine(this.canvas, true, {
+      adaptToDeviceRatio: true,
+      antialias: true,
+      stencil: true,
+      preserveDrawingBuffer: true,
+      alpha: false
+    });
     this.scene = new Scene(this.engine);
+    this.option = {
+      showLoadingUI: true,
+      ...option
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      this.canvas.width = container.clientWidth;
+      this.canvas.height = container.clientHeight;
+      this.engine.resize();
+    });
+    resizeObserver.observe(container);
     this.load(sceneData, scriptsMap);
   }
+  /**
+   * 初始化事件系统
+   */
+  initEvents() {
+    let lastClickTime = 0;
+    this.scene.onPointerObservable.add((pointerInfo) => {
+      switch (pointerInfo.type) {
+        case PointerEventTypes.POINTERDOWN:
+          const clickTime = Date.now();
+          if (clickTime - lastClickTime < 300) {
+            this.eventsSystem.dblclick.forEach((callback) => callback(pointerInfo));
+          } else {
+            lastClickTime = clickTime;
+            this.eventsSystem.click.forEach((callback) => callback(pointerInfo));
+          }
+          this.eventsSystem.pointerdown.forEach((callback) => callback(pointerInfo));
+          break;
+        case PointerEventTypes.POINTERUP:
+          this.eventsSystem.pointerup.forEach((callback) => callback(pointerInfo));
+          break;
+        case PointerEventTypes.POINTERMOVE:
+          this.eventsSystem.pointermove.forEach((callback) => callback(pointerInfo));
+          break;
+      }
+    });
+  }
+  // 绑定事件
+  on(eventName, callback) {
+    if (this.eventsSystem[eventName]) this.eventsSystem[eventName].push(callback);
+  }
+  // 解绑事件
+  off(eventName, callback) {
+    if (this.eventsSystem[eventName]) this.eventsSystem[eventName] = this.eventsSystem[eventName].filter((item) => item !== callback);
+  }
   /**
    * 加载场景
    * @param sceneData 场景数据数据
@@ -75,10 +832,11 @@ class SceneLoader {
     if (this.scene) {
       this.scene.dispose();
     }
-    if (scriptsMap) this.scritpsMap = scriptsMap;
+    if (scriptsMap) this.scriptsMap = scriptsMap;
     this.scene = new Scene(this.engine);
     this.sceneData = sceneData;
     this.scriptInstanceList = [];
+    this.initEvents();
     this.scene.onBeforeRenderObservable.add(() => {
       if (this.scriptInstanceList) {
         const deltaTime = this.engine.getDeltaTime();
@@ -93,6 +851,7 @@ class SceneLoader {
     const havokModule = await HavokPhysics();
     this.scene.enablePhysics(new Vector3(0, -9.81, 0), new HavokPlugin(true, havokModule));
     await AppendSceneAsync("data:" + sceneData, this.scene);
+    if (!this.option.showLoadingUI) this.engine.hideLoadingUI();
     let camera;
     if (this.scene.cameras.length === 0) {
       camera = new FreeCamera("摄影机", new Vector3(50, 50, 50), this.scene, true);
@@ -100,9 +859,10 @@ class SceneLoader {
       camera = this.scene.activeCamera || this.scene.cameras[0];
     }
     camera.attachControl(this.canvas);
-    new CustomSystem(this.scene);
     if (scriptsMap) this.initScripts(scriptsMap);
+    new CustomSystem(this.scene, this.scriptInstanceList, this.option.environment);
     this.render();
+    this.onLoadObservable.notifyObservers(this.scene);
   }
   /**
    * 初始化脚本
@@ -161,6 +921,169 @@ class SceneLoader {
       scene.render();
     });
   }
+  /**
+   * 根据名称获取节点
+   * @param name 
+   * @returns 
+   */
+  getNodeByName(name) {
+    return this.scene.getNodeByName(name);
+  }
+  getMeshByName(name) {
+    return this.scene.getMeshByName(name);
+  }
+  getLightByName(name) {
+    return this.scene.getLightByName(name);
+  }
+  getTransformNodeByName(name) {
+    return this.scene.getTransformNodeByName(name);
+  }
+  getCameraByName(name) {
+    return this.scene.getCameraByName(name);
+  }
+  /**
+   * 摄影机飞行到设置的位置锚点
+   * @param anchor 目标节点
+   * @param duration 飞行时间毫秒，ms
+   */
+  flyTo(anchor, duration = 2e3) {
+    if (this.scene.activeCamera) {
+      return SceneLoader.FlyTo(this.scene.activeCamera, anchor, duration);
+    }
+    return Promise.resolve();
+  }
+  /**
+   * 摄影机直接定位到设置的位置锚点
+   * @param anchor 目标节点
+   * @param camera 指定查看摄影机
+   */
+  viewTo(anchor) {
+    if (this.scene.activeCamera) {
+      SceneLoader.ViewTo(this.scene.activeCamera, anchor);
+    }
+  }
+  /**
+   * 根据名称摄影机飞行到设置的锚点
+   * @param name 摄影机锚点名称
+   * @param duration 飞行时间毫秒，ms
+   */
+  flyToAnchorByName(name, duration = 2e3) {
+    const camera = this.scene.activeCamera;
+    if (camera) {
+      const anchorList = camera.metadata?.cameraAnchorList || [];
+      const anchor = anchorList.find((item) => item.name === name);
+      if (anchor) {
+        return SceneLoader.FlyTo(camera, anchor, duration);
+      }
+    }
+    return Promise.resolve();
+  }
+  /**
+   * 根据名称摄影机飞行到设置的锚点
+   * @param name 摄影机锚点名称
+   * @param duration 飞行时间毫秒，ms
+   */
+  flyToAnchorByIndex(index, duration = 2e3) {
+    const camera = this.scene.activeCamera;
+    if (camera) {
+      const anchorList = camera.metadata?.cameraAnchorList || [];
+      const anchor = anchorList[index];
+      if (anchor) {
+        return SceneLoader.FlyTo(camera, anchor, duration);
+      }
+    }
+    return Promise.resolve();
+  }
+  /**
+   * 摄影机飞行到
+   * @param anchor 目标节点
+   * @param duration 飞行时间毫秒，ms
+   * @param camera 指定飞行摄影机
+   */
+  static FlyTo(camera, anchor, duration = 2e3) {
+    return new Promise((resolve, reject) => {
+      const easeFunction = new QuadraticEase();
+      easeFunction.setEasingMode(EasingFunction.EASINGMODE_EASEOUT);
+      const startTime = Date.now();
+      const currentAnchor = {
+        position: camera.position.asArray(),
+        target: [0, 0, 0],
+        radius: 0,
+        alpha: 0,
+        beta: 0
+      };
+      if (camera instanceof ArcRotateCamera) {
+        currentAnchor.radius = camera.radius;
+        currentAnchor.alpha = camera.alpha % (2 * Math.PI);
+        currentAnchor.beta = camera.beta % Math.PI;
+        currentAnchor.target = camera.target.asArray();
+        if (Math.abs(currentAnchor.alpha - anchor.alpha) > Math.PI) {
+          if (anchor.alpha > currentAnchor.alpha) {
+            anchor.alpha -= 2 * Math.PI;
+          } else {
+            anchor.alpha += 2 * Math.PI;
+          }
+        }
+      }
+      if (camera instanceof TargetCamera) {
+        currentAnchor.target = camera.target.asArray();
+      }
+      const getLinearValue = (start, end, val) => {
+        return start + (end - start) * val;
+      };
+      const animate = () => {
+        const elapsedTime = Date.now() - startTime;
+        const val = easeFunction.ease(elapsedTime / duration);
+        if (elapsedTime < duration) {
+          requestAnimationFrame(animate);
+        }
+        if (camera instanceof ArcRotateCamera) {
+          camera.radius = getLinearValue(currentAnchor.radius, anchor.radius, val);
+          camera.alpha = getLinearValue(currentAnchor.alpha, anchor.alpha, val);
+          camera.beta = getLinearValue(currentAnchor.beta, anchor.beta, val);
+          const x = getLinearValue(currentAnchor.target[0], anchor.target[0], val);
+          const y = getLinearValue(currentAnchor.target[1], anchor.target[1], val);
+          const z = getLinearValue(currentAnchor.target[2], anchor.target[2], val);
+          camera.target.x = x;
+          camera.target.y = y;
+          camera.target.z = z;
+        } else if (camera instanceof TargetCamera) {
+          const px = getLinearValue(currentAnchor.position[0], anchor.position[0], val);
+          const py = getLinearValue(currentAnchor.position[1], anchor.position[1], val);
+          const pz = getLinearValue(currentAnchor.position[2], anchor.position[2], val);
+          camera.position = new Vector3(px, py, pz);
+          const x = getLinearValue(currentAnchor.target[0], anchor.target[0], val);
+          const y = getLinearValue(currentAnchor.target[1], anchor.target[1], val);
+          const z = getLinearValue(currentAnchor.target[2], anchor.target[2], val);
+          camera.target.x = x;
+          camera.target.y = y;
+          camera.target.z = z;
+        }
+        if (elapsedTime >= duration) {
+          resolve();
+        }
+      };
+      animate();
+    });
+  }
+  /**
+   * 摄影机定位到
+   * @param anchor 目标节点
+   * @param camera 指定查看摄影机
+   */
+  static ViewTo(camera, anchor) {
+    let activeCamera = camera;
+    if (activeCamera) {
+      activeCamera.position = new Vector3(anchor.position[0], anchor.position[1], anchor.position[2]);
+      if (activeCamera instanceof ArcRotateCamera) {
+        activeCamera.radius = anchor.radius;
+        activeCamera.alpha = anchor.alpha;
+        activeCamera.beta = anchor.beta;
+      } else if (activeCamera instanceof TargetCamera) {
+        activeCamera.setTarget(new Vector3(anchor.target[0], anchor.target[1], anchor.target[2]));
+      }
+    }
+  }
   /**
    * 重置canvas变形后的系统尺寸
    */
@@ -177,8 +1100,8 @@ class SceneLoader {
   static LoadCustomSystem() {
   }
 }
-function loadScene(container, sceneData, scriptsMap = {}) {
-  const sceneLoader = new SceneLoader(container, sceneData, scriptsMap);
+function loadScene(container, sceneData, scriptsMap = {}, option) {
+  const sceneLoader = new SceneLoader(container, sceneData, scriptsMap, option);
   return sceneLoader;
 }
 export {