@aibee/crc-bmap 0.0.93 → 0.0.95

package/example/src/main.ts

@@ -1,26 +1,39 @@
-import { BMap, Graphic, Overlay, SelectBox } from '../../src'
-import Stats from 'three/examples/jsm/libs/stats.module.js'
-import * as THREE from 'three'
+import {
+  BMap,
+  Graphic,
+  GraphicInfo,
+  Overlay,
+  SelectBox,
+  SplitLoad,
+} from "../../src";
+import Stats from "three/examples/jsm/libs/stats.module.js";
+import * as THREE from "three";
+import { Navigation } from "../../src/plugins/navigation/navigation";
+// import data from './a.json'
+// data.data.forEach(item => {
+//   item.info = JSON.parse(item.info)
+//   item.info.geometry.coords = item.info.geometry.cds
+// })
 
 // 创建性能监视器
-let stats = new Stats()
+let stats = new Stats();
 
 // 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
-stats.showPanel(0)
+stats.showPanel(0);
 
 // 设置监视器位置
-stats.dom.style.position = 'absolute'
-stats.dom.style.left = '10vh'
-stats.dom.style.top = '10vh'
-stats.dom.style.zIndex = "100"
+stats.dom.style.position = "absolute";
+stats.dom.style.left = "10vh";
+stats.dom.style.top = "10vh";
+stats.dom.style.zIndex = "100";
 
 // 将监视器添加到页面中
-document.body.appendChild(stats.dom)
+document.body.appendChild(stats.dom);
 
 // var geometry = new THREE.BoxGeometry(1, 1, 1);
 // var material = new THREE.MeshBasicMaterial();
 // var cube = new THREE.Mesh(geometry, material);
-const scene = new THREE.Scene()
+const scene = new THREE.Scene();
 
 // scene.add(cube);
 // geometry.attributes.verticesNeedUpdate = true;
@@ -32,46 +45,68 @@ const scene = new THREE.Scene()
 // geometry.colors[0] = color1; // 设置第一个顶点的颜色
 // geometry.colors[1] = color2; // 设置第二个顶点的颜色
 
-
 function render() {
   // 更新帧数
-  stats.update()
-  requestAnimationFrame(render)
+  stats.update();
+  requestAnimationFrame(render);
 }
 
-render()
+render();
 
-const bmap = new BMap(document.getElementById('app')!, {
+const bmap = new BMap(document.getElementById("app")!, {
   apiInfo: {
     headers: {
-      "Authorization": localStorage.getItem("Authorization_token") || "Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzNzIwYjNhOGU3MGM0NGU3YTdkYzdiMTE4NDNhZjFhMyIsInN1YiI6IllVV0VJWEkiLCJpc3MiOiJtaXhjIiwiaWF0IjoxNzAwNzI2NTA4fQ.su7smca9cVeMQ9u-NyT_3NKa6kYfoLIGsOtNZLOnXXI"
-    }
+      Authorization:
+        localStorage.getItem("Authorization_token") ||
+        "Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzNzIwYjNhOGU3MGM0NGU3YTdkYzdiMTE4NDNhZjFhMyIsInN1YiI6IllVV0VJWEkiLCJpc3MiOiJtaXhjIiwiaWF0IjoxNzAwNzI2NTA4fQ.su7smca9cVeMQ9u-NyT_3NKa6kYfoLIGsOtNZLOnXXI",
+    },
   },
-  resizeObserver: true
+  resizeObserver: true,
 });
 
 (async () => {
-  // 加载图元数据
-  await bmap.load({
+  bmap.loadEquipment();
+  const navigation = new Navigation(bmap);
+  bmap.use(navigation);
+  const splitLoad = new SplitLoad(bmap);
+  bmap.use(splitLoad);
+  splitLoad.changeFloor({
     brand: "crc",
     project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-03-26",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
+    floor: "B1",
+    ts: "2024-04-09",
   });
+  // 加载图元数据
+  // await bmap.load({
+  //   brand: "crc",
+  //   project: "0202A501",
+  //   phase: "themixctd01",
+  //   building: "A",
+  //   floor: "LG",
+  //   ts: "2024-04-09",
+  //   resource_type_list: [1, 2, 3, 4, 6].join(",")
+  // });
+  // const floorKey = bmap.getFloorKey({
+  //   brand: "crc",
+  //   project: "0202A501",
+  //   phase: "themixctd01",
+  //   building: "A",
+  //   floor: "LG",
+  //   ts: "2024-04-09",
+  //   resource_type_list: [1, 2, 3, 4, 6].join(",")
+  // });
+  // const curFloorData = bmap.floorDataMap.set(floorKey, data.data as any);
   // 切换楼层
-  bmap.switchFloor({
-    brand: "crc",
-    project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-03-26",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
-  })
-  bmap.changeMapType("3d")
+  // bmap.switchFloor({
+  //   brand: "crc",
+  //   project: "0202A501",
+  //   phase: "themixctd01",
+  //   building: "A",
+  //   floor: "LG",
+  //   ts: "2024-04-09",
+  //   resource_type_list: [1, 2, 3, 4, 6].join(",")
+  // })
+  bmap.changeMapType("3d");
   // const poi = bmap.createGraphicPoi(bmap.getGraphicByNodeId("3e72f56e")!, {
   //   texts: [{ text: "文字" }],
   //   icon: "https://robot-vr-public.cdn.bcebos.com/navigation_images/614c4cb0a949526cf91aa42f5e6cb2c9.svg",
@@ -80,9 +115,9 @@ const bmap = new BMap(document.getElementById('app')!, {
   //   icon_border: { width: 2, color: "#000000" }
   // })
   // poi!.options.background = "#000000"
-  bmap.context.addEventListener("select-graphic", (...args) => { 
-    console.log(args)
-  })
+  bmap.context.addEventListener("select-graphic", (...args) => {
+    console.log(args);
+  });
   // bmap.getGraphicByNodeId("700fae09")!.options.strokeWidth = 2;
   // bmap.getGraphicByNodeId("b0846107")!.options.strokeWidth = 0.5;
   // bmap.getGraphicByNodeId("654cf0a2")!.options.fillColor = '#45E583';
@@ -94,87 +129,88 @@ const bmap = new BMap(document.getElementById('app')!, {
   //     graphic.options.height = 0.1
   //   }
   // })
-  
+
   // bmap.getGraphicByNodeId("996d97a6")!.options.stroke = false;
   // bmap.getGraphicByNodeId("996d97a6")!.options.height = 0.001;
   // bmap.getGraphicByNodeId("996d97a6")!.options.strokeColor = "#000000";
   // bmap.getGraphicByNodeId("996d97a6")!.options.strokeOpacity = 1;
-  
-})(); 
+})();
 
-const graphicId = "9338ca4b"
+const graphicId = "9338ca4b";
 
 // 图元点击
-bmap.context.addEventListener('graphic-click', (data) => {
-  console.log('graphic-click', data.graphics)
+bmap.context.addEventListener("graphic-click", (data) => {
+  console.log("graphic-click", data.graphics);
   // const div = document.createElement("div")
   // div.style.cssText = "position: fixed; top: 25%; left: 25%; bottom: 25%; right: 25%; background: red; z-index: 99;"
   // div.addEventListener("click", () => {
   //   document.body.removeChild(div)
   // })
   // document.body.appendChild(div)
-  data.graphics[0] && bmap.translateElementToCenter(data.graphics[0], 200)
+  data.graphics[0] && bmap.translateElementToCenter(data.graphics[0], 200);
 });
 
 // 图元选中
-bmap.context.addEventListener('select-graphic', (data) => {
-  console.log('select-graphic', data.graphics)
-  data.graphics.forEach(item => item.options.fillColor = '#ff0000')
+bmap.context.addEventListener("select-graphic", (data) => {
+  console.log("select-graphic", data.graphics);
+  data.graphics.forEach((item) => (item.options.fillColor = "#ff0000"));
 });
 
 // poi点击
-bmap.context.addEventListener('poi-click', (data) => {
-  console.log('poi-click', data.pois)
-  bmap.translateElementToCenter(data.pois[0], 500)
+bmap.context.addEventListener("poi-click", (data) => {
+  console.log("poi-click", data.pois);
+  bmap.translateElementToCenter(data.pois[0], 500);
 });
 
 (window as any).bmap = bmap;
 
-
 /**
  * 显示比例尺
  */
-const ratioDiv = document.createElement("div")
-ratioDiv.style.cssText = "position: absolute; bottom: 10vh; left: 10vw; z-index: 2; background: blue; color: red;"
+const ratioDiv = document.createElement("div");
+ratioDiv.style.cssText =
+  "position: absolute; bottom: 10vh; left: 10vw; z-index: 2; background: blue; color: red;";
 ratioDiv.textContent = "100M";
-document.body.appendChild(ratioDiv)
-bmap.context.addEventListener('change-ratio', ({ px }) => {
+document.body.appendChild(ratioDiv);
+bmap.context.addEventListener("change-ratio", ({ px }) => {
   // px 一百米对应的像素点
   let m = 100;
-  let scale = 1
+  let scale = 1;
   // 让px保持在50-100中间的一个米的整数
-  if (px < 50) { 
-    scale = Math.ceil(100 / px)
-    px *= scale
-    m *= scale
+  if (px < 50) {
+    scale = Math.ceil(100 / px);
+    px *= scale;
+    m *= scale;
   } else if (px > 100) {
-    scale = Math.floor(px / 100)
+    scale = Math.floor(px / 100);
     while (m % scale != 0) {
       scale--;
     }
-    px /= scale
-    m /= scale
+    px /= scale;
+    m /= scale;
   }
   ratioDiv.style.width = `${px}px`;
-  ratioDiv.textContent = `${m}米`
-})
+  ratioDiv.textContent = `${m}米`;
+});
 
 /**
  * 按钮操作
  */
 // 修改容器大小
-document.getElementById("changeContainerSize")?.addEventListener('click', () => {
-  // 获取legacyId 和 图元 的map
-  // const graphic = bmap.getGraphicByNodeId("45f9ff75")!
-  // const poi = bmap.createGraphicPoi(graphic, {
-  //   texts: [
-  //     { text: "店铺名称" }
-  //   ]
-  // })
-  document.getElementById("app1")!.style.width = "500px"
-})
+document
+  .getElementById("changeContainerSize")
+  ?.addEventListener("click", () => {
+    // 获取legacyId 和 图元 的map
+    // const graphic = bmap.getGraphicByNodeId("45f9ff75")!
+    // const poi = bmap.createGraphicPoi(graphic, {
+    //   texts: [
+    //     { text: "店铺名称" }
+    //   ]
+    // })
+    document.getElementById("app1")!.style.width = "500px";
+  });
 // 添加poi
-document.getElementById("createPoi")?.addEventListener('click', () => {
+document.getElementById("createPoi")?.addEventListener("click", () => {
   // 获取legacyId 和 图元 的map
   // const graphic = bmap.getGraphicByNodeId("45f9ff75")!
   // const poi = bmap.createGraphicPoi(graphic, {
@@ -182,74 +218,71 @@ document.getElementById("createPoi")?.addEventListener('click', () => {
   //     { text: "店铺名称" }
   //   ]
   // })
-  const graphics: Graphic[] = bmap.getFloorAllGraphics()
+  const graphics: Graphic[] = bmap.getFloorAllGraphics();
   // bmap.context.control.zoomSpeed = 2
-  graphics.forEach(graphic => { 
+  graphics.forEach((graphic) => {
     // 在图元上添加poi
     const poi = bmap.createGraphicPoi(graphic, {
-      texts: [{ text: "店铺名称", styles: { fontWeight: "bold" } }]
-    })
-  })
+      texts: [{ text: "店铺名称", styles: { fontWeight: "bold" } }],
+    });
+  });
   // return
   // 监听放大缩小的变化
-  bmap.addEventListener("zoom-change", ({ basicZoom, cameraZoom }) => { 
-    const zoomScale = cameraZoom / basicZoom
+  bmap.addEventListener("zoom-change", ({ basicZoom, cameraZoom }) => {
+    const zoomScale = cameraZoom / basicZoom;
     // console.log(zoomScale, basicZoom, cameraZoom)
-    bmap.getPois().forEach(poi => {
+    bmap.getPois().forEach((poi) => {
       if (zoomScale > 2) {
         poi!.options.texts = [
           { text: "店铺名称" },
           { text: "店铺名称" },
           { text: "店铺名称" },
           { text: "店铺名称" },
-        ]
+        ];
       } else if (zoomScale > 1.6) {
         poi!.options.texts = [
           { text: "店铺名称" },
           { text: "店铺名称" },
           { text: "店铺名称" },
-        ]
-      } else if (zoomScale > 1.3) { 
-        poi!.options.texts = [
-          { text: "店铺名称" },
-          { text: "店铺名称" },
-        ]
+        ];
+      } else if (zoomScale > 1.3) {
+        poi!.options.texts = [{ text: "店铺名称" }, { text: "店铺名称" }];
       } else {
-        poi!.options.texts = [
-          { text: "店铺名称" },
-        ]
+        poi!.options.texts = [{ text: "店铺名称" }];
       }
-    })
-  })
-})
+    });
+  });
+});
 // 删除poi
-document.getElementById("removePoi")?.addEventListener('click',  () => {
-  bmap.removePoiById(graphicId)
-})
+document.getElementById("removePoi")?.addEventListener("click", () => {
+  bmap.removePoiById(graphicId);
+});
 // 删除在创建
-document.getElementById("deleteAnCreateGraphic")?.addEventListener('click',  () => {
-  const graphic = bmap.getGraphicByNodeId(graphicId)!
-  console.log(graphic)
-  const options = graphic.options
-  bmap.deleteGraphic(graphic)
-  setTimeout(() => { 
-    bmap.createGraphicByOptions(options)
-  }, 1000)
-})
+document
+  .getElementById("deleteAnCreateGraphic")
+  ?.addEventListener("click", () => {
+    const graphic = bmap.getGraphicByNodeId(graphicId)!;
+    console.log(graphic);
+    const options = graphic.options;
+    bmap.deleteGraphic(graphic);
+    setTimeout(() => {
+      bmap.createGraphicByOptions(options);
+    }, 1000);
+  });
 // 获取全部图元
-document.getElementById("getAllGraphics")?.addEventListener('click',  () => {
-  console.log(bmap.getFloorAllGraphics())
-})
+document.getElementById("getAllGraphics")?.addEventListener("click", () => {
+  console.log(bmap.getFloorAllGraphics());
+});
 // 添加选中块儿
-document.getElementById("addSelectBox")?.addEventListener('click',  () => {
-  const selectBox = new SelectBox(bmap.context)
-  selectBox.selectGraphic(bmap.getGraphicByNodeId(graphicId)!)
+document.getElementById("addSelectBox")?.addEventListener("click", () => {
+  const selectBox = new SelectBox(bmap.context);
+  selectBox.selectGraphic(bmap.getGraphicByNodeId(graphicId)!);
   setTimeout(() => {
-    selectBox.setEnable(false)
-  }, 1000)
-})
+    selectBox.setEnable(false);
+  }, 1000);
+});
 // 切换楼层
-document.getElementById("switchFloor")?.addEventListener('click', async () => {
+document.getElementById("switchFloor")?.addEventListener("click", async () => {
   await bmap.load({
     brand: "crc",
     project: "0202A501",
@@ -257,8 +290,7 @@ document.getElementById("switchFloor")?.addEventListener('click', async () => {
     building: "A",
     floor: "L1",
     ts: "2024-01-12",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
-
+    resource_type_list: [1, 2, 3, 4, 6].join(","),
   });
   // 切换楼层
   bmap.switchFloor({
@@ -268,200 +300,226 @@ document.getElementById("switchFloor")?.addEventListener('click', async () => {
     building: "A",
     floor: "L1",
     ts: "2024-01-12",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
-  })
-})
+    resource_type_list: [1, 2, 3, 4, 6].join(","),
+  });
+});
 // hover显示覆盖物
-document.getElementById("hoverShowOverlay")?.addEventListener('click', async () => {
-  const overlaysMap = new Map<Graphic, Overlay>()
-  const overlayState = new Map<Overlay, { graphicHover: boolean, divHover: boolean }>()
-  bmap.context.addEventListener("hover", ({ graphics }) => { 
-    // console.log("hover", graphics)
-    // overlaysMap.forEach(item => item.dispose())
-    // graphics.forEach(graphic => { 
-    //   const overlay = new Overlay(bmap.context)
-    //   overlay.bindElement(graphic)
-    //   const div = document.createElement("div")
-    //   div.style.cssText = "width: 100px; height: 100px; background: red;transform: translate(-50%, -100%);"
-    //   div.textContent = "显示一段文本"
-    // })
-    // 没有hover的元素要删除
-    overlaysMap.forEach((overlay, graphic) => { 
-      if (!graphics.includes(graphic)) {
-        // overlay.dispose();
-        // overlaysMap.delete(graphic)
-        overlayState.get(overlay)!.graphicHover = false
-        window.requestAnimationFrame(() => {
-          // 鼠标即不在div上也不再graphic上就销毁这个overlay
-          if (!overlayState.get(overlay)!.divHover) { 
-            overlay.dispose();
-            overlaysMap.delete(graphic)
-          } 
-        })
-      }
-    })
-    graphics.forEach(graphic => { 
-      if (overlaysMap.has(graphic)) { 
-        return
-      }
-      const overlay = new Overlay(bmap.context, { autoUpdate: false });
-      overlay.addEventListener(
-        "update-position",
-        ({ x, y, height }: { x: number; y: number; height: number }) => {
-          overlay.div.style.transform = `translate3d(calc(${x}px - 50%), calc(${
-            -height + y - 20
-          }px - 100%), 0)`;
+document
+  .getElementById("hoverShowOverlay")
+  ?.addEventListener("click", async () => {
+    const overlaysMap = new Map<Graphic, Overlay>();
+    const overlayState = new Map<
+      Overlay,
+      { graphicHover: boolean; divHover: boolean }
+    >();
+    bmap.context.addEventListener("hover", ({ graphics }) => {
+      // console.log("hover", graphics)
+      // overlaysMap.forEach(item => item.dispose())
+      // graphics.forEach(graphic => {
+      //   const overlay = new Overlay(bmap.context)
+      //   overlay.bindElement(graphic)
+      //   const div = document.createElement("div")
+      //   div.style.cssText = "width: 100px; height: 100px; background: red;transform: translate(-50%, -100%);"
+      //   div.textContent = "显示一段文本"
+      // })
+      // 没有hover的元素要删除
+      overlaysMap.forEach((overlay, graphic) => {
+        if (!graphics.includes(graphic)) {
+          // overlay.dispose();
+          // overlaysMap.delete(graphic)
+          overlayState.get(overlay)!.graphicHover = false;
+          window.requestAnimationFrame(() => {
+            // 鼠标即不在div上也不再graphic上就销毁这个overlay
+            if (!overlayState.get(overlay)!.divHover) {
+              overlay.dispose();
+              overlaysMap.delete(graphic);
+            }
+          });
         }
-        );
-      overlay.bindElement(graphic)
-      const div = document.createElement("div")
-      // console.log(overlay)
-      div.style.cssText = "width: 100px; height: 100px; background: red;point-event: none; "
-      div.textContent = "显示一段文本"
-      overlay.div.addEventListener("mouseover", () => {
-        console.log("进入额")
-        overlayState.get(overlay)!.divHover = true
-        console.log(overlayState.get(overlay))
-      })
-      overlay.div.addEventListener("mouseout", () => {
-        console.log("移除了")
-        overlayState.get(overlay)!.divHover = false
-        if (!overlayState.get(overlay)!.graphicHover) { 
-          overlay.dispose();
-          overlaysMap.delete(graphic)
+      });
+      graphics.forEach((graphic) => {
+        if (overlaysMap.has(graphic)) {
+          return;
         }
-      })
-      overlay.div.appendChild(div)
-      overlaysMap.set(graphic, overlay)
-      overlayState.set(overlay, {graphicHover: true, divHover: false})
-    })
-  })
-})
-document.getElementById("changeGraphicColor")?.addEventListener('click', () => {
+        const overlay = new Overlay(bmap.context, { autoUpdate: false });
+        overlay.addEventListener(
+          "update-position",
+          ({ x, y, height }: { x: number; y: number; height: number }) => {
+            overlay.div.style.transform = `translate3d(calc(${x}px - 50%), calc(${
+              -height + y - 20
+            }px - 100%), 0)`;
+          }
+        );
+        overlay.bindElement(graphic);
+        const div = document.createElement("div");
+        // console.log(overlay)
+        div.style.cssText =
+          "width: 100px; height: 100px; background: red;point-event: none; ";
+        div.textContent = "显示一段文本";
+        overlay.div.addEventListener("mouseover", () => {
+          console.log("进入额");
+          overlayState.get(overlay)!.divHover = true;
+          console.log(overlayState.get(overlay));
+        });
+        overlay.div.addEventListener("mouseout", () => {
+          console.log("移除了");
+          overlayState.get(overlay)!.divHover = false;
+          if (!overlayState.get(overlay)!.graphicHover) {
+            overlay.dispose();
+            overlaysMap.delete(graphic);
+          }
+        });
+        overlay.div.appendChild(div);
+        overlaysMap.set(graphic, overlay);
+        overlayState.set(overlay, { graphicHover: true, divHover: false });
+      });
+    });
+  });
+document.getElementById("changeGraphicColor")?.addEventListener("click", () => {
   graphic.options.fillColor = "#000fff";
-})
-document.getElementById("changeGraphicOpacity")?.addEventListener('click', () => {
-  graphic.options.fillOpacity = 0.5;
-})
-document.getElementById("changeGraphicBorder")?.addEventListener('click', () => {
-  graphic.options.strokeColor = "#00ff00";
-})
-document.getElementById("changeGraphicBorderOpacity")?.addEventListener('click', () => {
-  graphic.options.strokeOpacity = 0.5;
-})
-document.getElementById("changeGraphicHighlight")?.addEventListener('click', () => {
-  // TODO 获取图源的资源id 在graphicLayer 和 poiLayer 中判断不是这些资源id的都改小透明度，是的透明度都设置成1
-})
-document.getElementById("changeGraphicAirHeight")?.addEventListener('click', () => {
-  graphic.options.airHeight = 10
-  // TODO 获取图源的资源id 然后获取poi 还需要修改对应poi的高度 airHeight + height
-})
-document.getElementById("changeGraphicHeight")?.addEventListener('click', () => {
-  graphic.options.height = 20
-  // TODO 获取图源的资源id 然后获取poi 还需要修改对应poi的高度 airHeight + height
-})
-document.getElementById("changeGraphicVisible")?.addEventListener('click', () => {
-  graphic.options.visible = false
-})
-document.getElementById("changePoiIcon")?.addEventListener('click', () => {
-  poi.options.icon = 'https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/dd932d4d105e453ea93dd1787dcae6eb_icon-%E5%A4%A7%E5%B1%8F.svg'
-})
-document.getElementById("changePoiText")?.addEventListener('click', () => {
-  poi.options.text = '修改后文本'
-})
-document.getElementById("changePoiVisible")?.addEventListener('click', () => {
-  bmap.context.currentFloor?.poiLayer.removePoi(poi)
-})
-document.getElementById("changeLightColor")?.addEventListener('click', () => {
-  bmap.context.changeAmbientLightColor(0xcccccc)
-})
+});
+document
+  .getElementById("changeGraphicOpacity")
+  ?.addEventListener("click", () => {
+    graphic.options.fillOpacity = 0.5;
+  });
+document
+  .getElementById("changeGraphicBorder")
+  ?.addEventListener("click", () => {
+    graphic.options.strokeColor = "#00ff00";
+  });
+document
+  .getElementById("changeGraphicBorderOpacity")
+  ?.addEventListener("click", () => {
+    graphic.options.strokeOpacity = 0.5;
+  });
+document
+  .getElementById("changeGraphicHighlight")
+  ?.addEventListener("click", () => {
+    // TODO 获取图源的资源id 在graphicLayer 和 poiLayer 中判断不是这些资源id的都改小透明度，是的透明度都设置成1
+  });
+document
+  .getElementById("changeGraphicAirHeight")
+  ?.addEventListener("click", () => {
+    graphic.options.airHeight = 10;
+    // TODO 获取图源的资源id 然后获取poi 还需要修改对应poi的高度 airHeight + height
+  });
+document
+  .getElementById("changeGraphicHeight")
+  ?.addEventListener("click", () => {
+    graphic.options.height = 20;
+    // TODO 获取图源的资源id 然后获取poi 还需要修改对应poi的高度 airHeight + height
+  });
+document
+  .getElementById("changeGraphicVisible")
+  ?.addEventListener("click", () => {
+    graphic.options.visible = false;
+  });
+document.getElementById("changePoiIcon")?.addEventListener("click", () => {
+  poi.options.icon =
+    "https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/dd932d4d105e453ea93dd1787dcae6eb_icon-%E5%A4%A7%E5%B1%8F.svg";
+});
+document.getElementById("changePoiText")?.addEventListener("click", () => {
+  poi.options.text = "修改后文本";
+});
+document.getElementById("changePoiVisible")?.addEventListener("click", () => {
+  bmap.context.currentFloor?.poiLayer.removePoi(poi);
+});
+document.getElementById("changeLightColor")?.addEventListener("click", () => {
+  bmap.context.changeAmbientLightColor(0xcccccc);
+});
 // document.getElementById("changeShadowLightColor")?.addEventListener('click', () => {
 //   bmap.context.shadow.changeLightColor(0x111000)
 // })
-document.getElementById("openMouseDrag")?.addEventListener('click', () => {
-  bmap.context.control.enablePan = true
-})
-document.getElementById("closeMouseDrag")?.addEventListener('click', () => {
-  bmap.context.control.enablePan = false
-})
-document.getElementById("openMouseZoom")?.addEventListener('click', () => {
-  bmap.context.control.enableZoom = true
-})
-document.getElementById("closeMouseZoom")?.addEventListener('click', () => {
-  bmap.context.control.enableZoom = false
-})
-document.getElementById("reduceMap")?.addEventListener('click', () => {
-  bmap.reduceMap(0.5, 100)
-})
-document.getElementById("enlargeMap")?.addEventListener('click', () => {
-  bmap.enlargeMap(0.3, 0)
-})
-document.getElementById("centerView")?.addEventListener('click', () => {
-  bmap.resize()
-  bmap.resetView()
-})
-document.getElementById("centerGraphic")?.addEventListener('click', () => {
-  bmap.context.fitCameraToObject(graphic)
-})
-document.getElementById("change2d")?.addEventListener('click', () => {
-  bmap.changeMapType('2d')
-})
-document.getElementById("change3d")?.addEventListener('click', () => {
-  bmap.changeMapType('3d')
-})
-document.getElementById("configurePolarShortcutKeys")?.addEventListener('click', () => {
-  bmap.configurePolarShortcutKeys(['ControlLeft', 'MetaLeft', 'KeyC'])
-})
-document.getElementById("configureAzimuthShortcutKeys")?.addEventListener('click', () => {
-  bmap.configureAzimuthalShortcutKeys(['KeyV'])
-})
-document.getElementById("changeAzimuth")?.addEventListener('click', () => {
-  bmap.rotateMap()
-})
-const fn = (data) => { 
-  console.log(data.graphics, data.pois)
-}
-document.getElementById("openHover")?.addEventListener('click', () => {
-  bmap.context.addEventListener("pointer-over", fn)
-  bmap.context.addEventListener("pointer-move", fn)
-})
-document.getElementById("closeHover")?.addEventListener('click', () => {
-  bmap.context.removeEventListener("pointer-over", fn)
-  bmap.context.removeEventListener("pointer-move", fn)
-})
-document.getElementById("mousePickup")?.addEventListener('click', () => {
+document.getElementById("openMouseDrag")?.addEventListener("click", () => {
+  bmap.context.control.enablePan = true;
+});
+document.getElementById("closeMouseDrag")?.addEventListener("click", () => {
+  bmap.context.control.enablePan = false;
+});
+document.getElementById("openMouseZoom")?.addEventListener("click", () => {
+  bmap.context.control.enableZoom = true;
+});
+document.getElementById("closeMouseZoom")?.addEventListener("click", () => {
+  bmap.context.control.enableZoom = false;
+});
+document.getElementById("reduceMap")?.addEventListener("click", () => {
+  bmap.reduceMap(0.5, 100);
+});
+document.getElementById("enlargeMap")?.addEventListener("click", () => {
+  bmap.enlargeMap(0.3, 0);
+});
+document.getElementById("centerView")?.addEventListener("click", () => {
+  bmap.resize();
+  bmap.resetView();
+});
+document.getElementById("centerGraphic")?.addEventListener("click", () => {
+  bmap.context.fitCameraToObject(graphic);
+});
+document.getElementById("change2d")?.addEventListener("click", () => {
+  bmap.changeMapType("2d");
+});
+document.getElementById("change3d")?.addEventListener("click", () => {
+  bmap.changeMapType("3d");
+});
+document
+  .getElementById("configurePolarShortcutKeys")
+  ?.addEventListener("click", () => {
+    bmap.configurePolarShortcutKeys(["ControlLeft", "MetaLeft", "KeyC"]);
+  });
+document
+  .getElementById("configureAzimuthShortcutKeys")
+  ?.addEventListener("click", () => {
+    bmap.configureAzimuthalShortcutKeys(["KeyV"]);
+  });
+document.getElementById("changeAzimuth")?.addEventListener("click", () => {
+  bmap.rotateMap();
+});
+const fn = (data) => {
+  console.log(data.graphics, data.pois);
+};
+document.getElementById("openHover")?.addEventListener("click", () => {
+  bmap.context.addEventListener("pointer-over", fn);
+  bmap.context.addEventListener("pointer-move", fn);
+});
+document.getElementById("closeHover")?.addEventListener("click", () => {
+  bmap.context.removeEventListener("pointer-over", fn);
+  bmap.context.removeEventListener("pointer-move", fn);
+});
+document.getElementById("mousePickup")?.addEventListener("click", () => {
   // TODO
-})
-document.getElementById("mouseMulPickup")?.addEventListener('click', () => {
+});
+document.getElementById("mouseMulPickup")?.addEventListener("click", () => {
   // TODO
-})
-document.getElementById("overlayText")?.addEventListener('click', () => {
-  const overlay = new Overlay(bmap.context)
-  overlay.bindElement(graphic)
-  overlay.div.textContent = "显示覆盖物文本"
+});
+document.getElementById("overlayText")?.addEventListener("click", () => {
+  const overlay = new Overlay(bmap.context);
+  overlay.bindElement(graphic);
+  overlay.div.textContent = "显示覆盖物文本";
   document.getElementById("hideOverlayText")?.addEventListener("click", () => {
-    overlay.dispose()
-  })
-})
-document.getElementById("clickOverlayText")?.addEventListener('click', () => {
-  bmap.context.addEventListener('graphic-click', ({ graphics, position }) => {
-    console.log(graphics, position)
+    overlay.dispose();
+  });
+});
+document.getElementById("clickOverlayText")?.addEventListener("click", () => {
+  bmap.context.addEventListener("graphic-click", ({ graphics, position }) => {
+    console.log(graphics, position);
     if (position) {
-      const overlay = new Overlay(bmap.context)
-      overlay.position.copy(position)
-      overlay.div.textContent = "点击显示覆盖物文本"
+      const overlay = new Overlay(bmap.context);
+      overlay.position.copy(position);
+      overlay.div.textContent = "点击显示覆盖物文本";
     }
-  })
-})
-document.getElementById("overlayImage")?.addEventListener('click', () => {
-  const overlay = new Overlay(bmap.context)
-  overlay.bindElement(graphic)
-  const img = document.createElement("img")
-  img.src = "https://robot-vr-public.cdn.bcebos.com/navigation_images/8c591818844be70fd93bd5817c7d3d50.png"
-  overlay.div.style.transform = 'translate3d(-50%, -50%, 0)'
-  overlay.div.appendChild(img)
-})
-document.getElementById("heatmap")?.addEventListener('click', () => {
+  });
+});
+document.getElementById("overlayImage")?.addEventListener("click", () => {
+  const overlay = new Overlay(bmap.context);
+  overlay.bindElement(graphic);
+  const img = document.createElement("img");
+  img.src =
+    "https://robot-vr-public.cdn.bcebos.com/navigation_images/8c591818844be70fd93bd5817c7d3d50.png";
+  overlay.div.style.transform = "translate3d(-50%, -50%, 0)";
+  overlay.div.appendChild(img);
+});
+document.getElementById("heatmap")?.addEventListener("click", () => {
   bmap.addHeatmap({
     data: [
       { x: -100, y: 100, value: 1 },
@@ -470,25 +528,31 @@ document.getElementById("heatmap")?.addEventListener('click', () => {
       { x: -100, y: -100, value: 25 },
     ],
     max: 100,
-    min: 1
-  })
-})
-document.getElementById("measureDistance")?.addEventListener('click', async () => {
-  bmap.context.currentFloor?.addGround(graphic)
-  const distance = await bmap.measureDistance()
-  console.log("测量距离是" + distance + "米")
-})
-document.getElementById("cancelMeasureDistance")?.addEventListener('click', async () => {
-  bmap.cancelDistance()
-})
-document.getElementById("measureArea")?.addEventListener('click', async () => {
-  bmap.context.currentFloor?.addGround(graphic)
-  const distance = await bmap.measureArea()
-  console.log("测量面积是" + distance + "平方米")
-})
-document.getElementById("cancelMeasureArea")?.addEventListener('click', async () => {
-  bmap.cancelArea()
-})
+    min: 1,
+  });
+});
+document
+  .getElementById("measureDistance")
+  ?.addEventListener("click", async () => {
+    bmap.context.currentFloor?.addGround(graphic);
+    const distance = await bmap.measureDistance();
+    console.log("测量距离是" + distance + "米");
+  });
+document
+  .getElementById("cancelMeasureDistance")
+  ?.addEventListener("click", async () => {
+    bmap.cancelDistance();
+  });
+document.getElementById("measureArea")?.addEventListener("click", async () => {
+  bmap.context.currentFloor?.addGround(graphic);
+  const distance = await bmap.measureArea();
+  console.log("测量面积是" + distance + "平方米");
+});
+document
+  .getElementById("cancelMeasureArea")
+  ?.addEventListener("click", async () => {
+    bmap.cancelArea();
+  });
 
 // TODO   - 「<键」顺时针旋转，「>键」逆时针旋转
 // TODO - 配置坐标定点旋转快捷键的接口
@@ -504,11 +568,11 @@ document.getElementById("cancelMeasureArea")?.addEventListener('click', async ()
 // TODO   可以设置字体背景颜色、字体背景描边颜色
 //         poi.options.textBackgroundColor = "#000fff"
 //         poi.options.textBackgroundStrokeColor = "#000fff"
-          
+
 // TODO    连线覆盖物
 //         const overlay = new LinkOverlay(bmap.context)
-            // overlay.position.copy(position)
-            // overlay.div.appendChild()
+// overlay.position.copy(position)
+// overlay.div.appendChild()
 // TODO    弹窗覆盖物
 //         const overlay = new ModalOverlay(bmap.context)
 //         overlay.position.copy(position)
@@ -530,7 +594,7 @@ document.getElementById("cancelMeasureArea")?.addEventListener('click', async ()
 //         bmap.switchFloor("B1")
 // TODO    加载地图
 //         await bmap.load({ project, phase, building, floor });
-// TODO    资源数据渲染地图的调用 
+// TODO    资源数据渲染地图的调用
 //         传入资源图层类型ID，向后台请求数据，铺位：10001， 库房：10002，广告位：10003
 //         showResourceLayerByLayerType
 // TODO    加载主题