@aibee/crc-bmap 0.0.75 → 0.0.76

package/example/src/main.ts

@@ -1,577 +1,581 @@
-import { BMap, Graphic, Overlay, SelectBox } from '../../src'
-import Stats from 'three/examples/jsm/libs/stats.module.js'
-
-// 创建性能监视器
-let stats = new Stats()
-
-// 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
-stats.showPanel(0)
-
-// 设置监视器位置
-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)
-
-function render() {
-  // 更新帧数
-  stats.update()
-  requestAnimationFrame(render)
-}
-
-render()
-
-const bmap = new BMap(document.getElementById('app')!, {
-  apiInfo: {
-    headers: {
-      "Authorization": localStorage.getItem("Authorization_token") || "Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzNzIwYjNhOGU3MGM0NGU3YTdkYzdiMTE4NDNhZjFhMyIsInN1YiI6IllVV0VJWEkiLCJpc3MiOiJtaXhjIiwiaWF0IjoxNzAwNzI2NTA4fQ.su7smca9cVeMQ9u-NyT_3NKa6kYfoLIGsOtNZLOnXXI"
-    }
-  },
-  resizeObserver: true
-});
-
-(async () => {
-  // 加载图元数据
-  await bmap.load({
-    brand: "crc",
-    project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-01-03",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
-  });
-  // 切换楼层
-  await bmap.switchFloor({
-    brand: "crc",
-    project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-01-03",
-    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",
-    icon_size: [14, 14],
-    // background: "#000000",
-    icon_border: { width: 2, color: "#000000" }
-  })
-  // poi!.options.background = "#000000"
-  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';
-  // bmap.getGraphicByNodeId("0b245fa9")!.options.fillColor = '#FFB166';
-  // bmap.getGraphicByNodeId("9cd3408c")!.options.fillColor = '#FF4D4D';
-  // bmap.getFloorAllGraphics().forEach(graphic => {
-  //   if (graphic.options.userData.mark) {
-  //     graphic.options.fillColor = '#F2F6FC'
-  //     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"
-
-// 图元点击
-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)
-});
-
-// 图元选中
-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)
-});
-
-(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;"
-ratioDiv.textContent = "100M";
-document.body.appendChild(ratioDiv)
-bmap.context.addEventListener('change-ratio', ({ px }) => {
-  // px 一百米对应的像素点
-  let m = 100;
-  let scale = 1
-  // 让px保持在50-100中间的一个米的整数
-  if (px < 50) { 
-    scale = Math.ceil(100 / px)
-    px *= scale
-    m *= scale
-  } else if (px > 100) {
-    scale = Math.floor(px / 100)
-    while (m % scale != 0) {
-      scale--;
-    }
-    px /= scale
-    m /= scale
-  }
-  ratioDiv.style.width = `${px}px`;
-  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"
-})
-// 添加poi
-document.getElementById("createPoi")?.addEventListener('click', () => {
-  // 获取legacyId 和 图元 的map
-  // const graphic = bmap.getGraphicByNodeId("45f9ff75")!
-  // const poi = bmap.createGraphicPoi(graphic, {
-  //   texts: [
-  //     { text: "店铺名称" }
-  //   ]
-  // })
-  const graphics: Graphic[] = bmap.getFloorAllGraphics()
-  // bmap.context.control.zoomSpeed = 2
-  graphics.forEach(graphic => { 
-    // 在图元上添加poi
-    const poi = bmap.createGraphicPoi(graphic, {
-      texts: [{ text: "店铺名称", styles: { fontWeight: "bold" } }]
-    })
-  })
-  // return
-  // 监听放大缩小的变化
-  bmap.addEventListener("zoom-change", ({ basicZoom, cameraZoom }) => { 
-    const zoomScale = cameraZoom / basicZoom
-    // console.log(zoomScale, basicZoom, cameraZoom)
-    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 {
-        poi!.options.texts = [
-          { text: "店铺名称" },
-        ]
-      }
-    })
-  })
-})
-// 删除poi
-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("getAllGraphics")?.addEventListener('click',  () => {
-  console.log(bmap.getFloorAllGraphics())
-})
-// 添加选中块儿
-document.getElementById("addSelectBox")?.addEventListener('click',  () => {
-  const selectBox = new SelectBox(bmap.context)
-  selectBox.selectGraphic(bmap.getGraphicByNodeId(graphicId)!)
-  setTimeout(() => {
-    selectBox.setEnable(false)
-  }, 1000)
-})
-// 切换楼层
-document.getElementById("switchFloor")?.addEventListener('click', async () => {
-  await bmap.load({
-    brand: "crc",
-    project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-01-12",
-    resource_type_list: [1, 2, 3, 4, 6].join(",")
-
-  });
-  // 切换楼层
-  bmap.switchFloor({
-    brand: "crc",
-    project: "0202A501",
-    phase: "themixctd01",
-    building: "A",
-    floor: "L1",
-    ts: "2024-01-12",
-    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 }) => { 
-        console.log(x, y, height)
-        overlay.div.style.transform = `translate3d(calc(${x}px - 50%), calc(${-height+y}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("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', () => {
-  // TODO
-})
-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("hideOverlayText")?.addEventListener("click", () => {
-    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 = "点击显示覆盖物文本"
-    }
-  })
-})
-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 },
-      { x: 100, y: 100, value: 100 },
-      { x: 100, y: -100, value: 50 },
-      { 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()
-})
-
-// TODO   - 「<键」顺时针旋转，「>键」逆时针旋转
-// TODO - 配置坐标定点旋转快捷键的接口
-//            - 选中某图元，可以当前图元为中心进行旋转
-//            bmap.setRotateTarget(element: Object3D)
-// TODO   选中某图元，可以当前图元为中心进行2D/3D切换
-//          bmap.setChangeTarget(element: Object3D)
-// TODO  居中视图
-//        bmap.context.fitCameraToView()
-// TODO   修改poi的字体颜色和字体大小
-//         poi.options.color = "#fff000"
-//         poi.options.fontSize = 100
-// TODO   可以设置字体背景颜色、字体背景描边颜色
-//         poi.options.textBackgroundColor = "#000fff"
-//         poi.options.textBackgroundStrokeColor = "#000fff"
-          
-// TODO    连线覆盖物
-//         const overlay = new LinkOverlay(bmap.context)
-            // overlay.position.copy(position)
-            // overlay.div.appendChild()
-// TODO    弹窗覆盖物
-//         const overlay = new ModalOverlay(bmap.context)
-//         overlay.position.copy(position)
-//         overlay.div.appendChild()
-// TODO    数据可视化图表
-//         const overlay = new EchartsOverlay(bmap.context, width, height)
-//         overlay.position.copy(position)
-//         overlay.setEchartsOptions({...})
-// TODO    显示图层弹窗
-//         bmap.showLayerPanel(bool)
-//         bmap.switchLayer(layer)
-// TODO    显示比例尺
-//         bmap.showScale(bool)
-// TODO    定位
-//         const position = bmap.getCurrentPosition()
-// TODO    路线规划
-//         const route = bmap.getRoute(start, end)
-// TODO    切换楼层
-//         bmap.switchFloor("B1")
-// TODO    加载地图
-//         await bmap.load({ project, phase, building, floor });
-// TODO    资源数据渲染地图的调用 
-//         传入资源图层类型ID，向后台请求数据，铺位：10001， 库房：10002，广告位：10003
-//         showResourceLayerByLayerType
-// TODO    加载主题
-/**
- * interface Theme {
-    id: number, // 主题样式
-    globalThemeConfig: {
-        lightConfig: {
-            hemisphereLight: [0xffffff, 0xeeeeee, 1], // 半球光
-            ambientLight: [0xffffff] // 环境光
-        },
-        backgroundConfig: {
-            fillColor: string, // 背景色
-            fillOpacity: number, // 填充透明度
-        },
-        polygonStyleConfig: {
-            strokeColor: string,
-            strokeOpacity: number,
-            fillColor: string,
-            fillOpacity: number,
-            selectedColor: string,
-        },
-        pointStyleConfig: {
-            poiFontSize: number,
-            poiFontColor: string,
-            poiIconSize: number,
-        },
-        floorFillColor: string, // 地面颜色
-        floorShadow: boolean, // 地面阴影
-    },
-    businessThemeConfig: [{
-        rule: 'userData.category_name = "母婴"',
-        polygonStyleConfig: {
-            strokeColor: string | null,
-            strokeOpacity: number | null,
-            fillColor: string | null,
-            fillOpacity: number | null,
-            selectedColor: string | null,
-        },
-        pointStyleConfig: {
-            poiFontSize: number | null,
-            poiFontColor: string | null,
-            poiIconSize: number | null,
-        },
-    }, {
-        rule: 'layerType = "铺位"',
-        polygonStyleConfig: {
-            strokeColor: string | null,
-            strokeOpacity: number | null,
-            fillColor: string | null,
-            fillOpacity: number | null,
-            selectedColor: string | null,
-        },
-        pointStyleConfig: {
-            poiFontSize: number | null,
-            poiFontColor: string | null,
-            poiIconSize: number | null,
-        },
-    }]
-}
-
-bmap.loadThemeById(themeid)
- */
-//         bmap.loadThemeById(themeid)
+import { BMap, Graphic, Overlay, SelectBox } from '../../src'
+import Stats from 'three/examples/jsm/libs/stats.module.js'
+
+// 创建性能监视器
+let stats = new Stats()
+
+// 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
+stats.showPanel(0)
+
+// 设置监视器位置
+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)
+
+function render() {
+  // 更新帧数
+  stats.update()
+  requestAnimationFrame(render)
+}
+
+render()
+
+const bmap = new BMap(document.getElementById('app')!, {
+  apiInfo: {
+    headers: {
+      "Authorization": localStorage.getItem("Authorization_token") || "Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzNzIwYjNhOGU3MGM0NGU3YTdkYzdiMTE4NDNhZjFhMyIsInN1YiI6IllVV0VJWEkiLCJpc3MiOiJtaXhjIiwiaWF0IjoxNzAwNzI2NTA4fQ.su7smca9cVeMQ9u-NyT_3NKa6kYfoLIGsOtNZLOnXXI"
+    }
+  },
+  resizeObserver: true
+});
+
+(async () => {
+  // 加载图元数据
+  await bmap.load({
+    brand: "crc",
+    project: "0202A501",
+    phase: "themixctd01",
+    building: "A",
+    floor: "L1",
+    ts: "2024-01-03",
+    resource_type_list: [1, 2, 3, 4, 6].join(",")
+  });
+  // 切换楼层
+  await bmap.switchFloor({
+    brand: "crc",
+    project: "0202A501",
+    phase: "themixctd01",
+    building: "A",
+    floor: "L1",
+    ts: "2024-01-03",
+    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",
+    icon_size: [14, 14],
+    // background: "#000000",
+    icon_border: { width: 2, color: "#000000" }
+  })
+  // poi!.options.background = "#000000"
+  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';
+  // bmap.getGraphicByNodeId("0b245fa9")!.options.fillColor = '#FFB166';
+  // bmap.getGraphicByNodeId("9cd3408c")!.options.fillColor = '#FF4D4D';
+  // bmap.getFloorAllGraphics().forEach(graphic => {
+  //   if (graphic.options.userData.mark) {
+  //     graphic.options.fillColor = '#F2F6FC'
+  //     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"
+
+// 图元点击
+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)
+});
+
+// 图元选中
+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)
+});
+
+(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;"
+ratioDiv.textContent = "100M";
+document.body.appendChild(ratioDiv)
+bmap.context.addEventListener('change-ratio', ({ px }) => {
+  // px 一百米对应的像素点
+  let m = 100;
+  let scale = 1
+  // 让px保持在50-100中间的一个米的整数
+  if (px < 50) { 
+    scale = Math.ceil(100 / px)
+    px *= scale
+    m *= scale
+  } else if (px > 100) {
+    scale = Math.floor(px / 100)
+    while (m % scale != 0) {
+      scale--;
+    }
+    px /= scale
+    m /= scale
+  }
+  ratioDiv.style.width = `${px}px`;
+  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"
+})
+// 添加poi
+document.getElementById("createPoi")?.addEventListener('click', () => {
+  // 获取legacyId 和 图元 的map
+  // const graphic = bmap.getGraphicByNodeId("45f9ff75")!
+  // const poi = bmap.createGraphicPoi(graphic, {
+  //   texts: [
+  //     { text: "店铺名称" }
+  //   ]
+  // })
+  const graphics: Graphic[] = bmap.getFloorAllGraphics()
+  // bmap.context.control.zoomSpeed = 2
+  graphics.forEach(graphic => { 
+    // 在图元上添加poi
+    const poi = bmap.createGraphicPoi(graphic, {
+      texts: [{ text: "店铺名称", styles: { fontWeight: "bold" } }]
+    })
+  })
+  // return
+  // 监听放大缩小的变化
+  bmap.addEventListener("zoom-change", ({ basicZoom, cameraZoom }) => { 
+    const zoomScale = cameraZoom / basicZoom
+    // console.log(zoomScale, basicZoom, cameraZoom)
+    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 {
+        poi!.options.texts = [
+          { text: "店铺名称" },
+        ]
+      }
+    })
+  })
+})
+// 删除poi
+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("getAllGraphics")?.addEventListener('click',  () => {
+  console.log(bmap.getFloorAllGraphics())
+})
+// 添加选中块儿
+document.getElementById("addSelectBox")?.addEventListener('click',  () => {
+  const selectBox = new SelectBox(bmap.context)
+  selectBox.selectGraphic(bmap.getGraphicByNodeId(graphicId)!)
+  setTimeout(() => {
+    selectBox.setEnable(false)
+  }, 1000)
+})
+// 切换楼层
+document.getElementById("switchFloor")?.addEventListener('click', async () => {
+  await bmap.load({
+    brand: "crc",
+    project: "0202A501",
+    phase: "themixctd01",
+    building: "A",
+    floor: "L1",
+    ts: "2024-01-12",
+    resource_type_list: [1, 2, 3, 4, 6].join(",")
+
+  });
+  // 切换楼层
+  bmap.switchFloor({
+    brand: "crc",
+    project: "0202A501",
+    phase: "themixctd01",
+    building: "A",
+    floor: "L1",
+    ts: "2024-01-12",
+    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)`;
+        }
+        );
+      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("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', () => {
+  // TODO
+})
+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("hideOverlayText")?.addEventListener("click", () => {
+    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 = "点击显示覆盖物文本"
+    }
+  })
+})
+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 },
+      { x: 100, y: 100, value: 100 },
+      { x: 100, y: -100, value: 50 },
+      { 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()
+})
+
+// TODO   - 「<键」顺时针旋转，「>键」逆时针旋转
+// TODO - 配置坐标定点旋转快捷键的接口
+//            - 选中某图元，可以当前图元为中心进行旋转
+//            bmap.setRotateTarget(element: Object3D)
+// TODO   选中某图元，可以当前图元为中心进行2D/3D切换
+//          bmap.setChangeTarget(element: Object3D)
+// TODO  居中视图
+//        bmap.context.fitCameraToView()
+// TODO   修改poi的字体颜色和字体大小
+//         poi.options.color = "#fff000"
+//         poi.options.fontSize = 100
+// TODO   可以设置字体背景颜色、字体背景描边颜色
+//         poi.options.textBackgroundColor = "#000fff"
+//         poi.options.textBackgroundStrokeColor = "#000fff"
+          
+// TODO    连线覆盖物
+//         const overlay = new LinkOverlay(bmap.context)
+            // overlay.position.copy(position)
+            // overlay.div.appendChild()
+// TODO    弹窗覆盖物
+//         const overlay = new ModalOverlay(bmap.context)
+//         overlay.position.copy(position)
+//         overlay.div.appendChild()
+// TODO    数据可视化图表
+//         const overlay = new EchartsOverlay(bmap.context, width, height)
+//         overlay.position.copy(position)
+//         overlay.setEchartsOptions({...})
+// TODO    显示图层弹窗
+//         bmap.showLayerPanel(bool)
+//         bmap.switchLayer(layer)
+// TODO    显示比例尺
+//         bmap.showScale(bool)
+// TODO    定位
+//         const position = bmap.getCurrentPosition()
+// TODO    路线规划
+//         const route = bmap.getRoute(start, end)
+// TODO    切换楼层
+//         bmap.switchFloor("B1")
+// TODO    加载地图
+//         await bmap.load({ project, phase, building, floor });
+// TODO    资源数据渲染地图的调用 
+//         传入资源图层类型ID，向后台请求数据，铺位：10001， 库房：10002，广告位：10003
+//         showResourceLayerByLayerType
+// TODO    加载主题
+/**
+ * interface Theme {
+    id: number, // 主题样式
+    globalThemeConfig: {
+        lightConfig: {
+            hemisphereLight: [0xffffff, 0xeeeeee, 1], // 半球光
+            ambientLight: [0xffffff] // 环境光
+        },
+        backgroundConfig: {
+            fillColor: string, // 背景色
+            fillOpacity: number, // 填充透明度
+        },
+        polygonStyleConfig: {
+            strokeColor: string,
+            strokeOpacity: number,
+            fillColor: string,
+            fillOpacity: number,
+            selectedColor: string,
+        },
+        pointStyleConfig: {
+            poiFontSize: number,
+            poiFontColor: string,
+            poiIconSize: number,
+        },
+        floorFillColor: string, // 地面颜色
+        floorShadow: boolean, // 地面阴影
+    },
+    businessThemeConfig: [{
+        rule: 'userData.category_name = "母婴"',
+        polygonStyleConfig: {
+            strokeColor: string | null,
+            strokeOpacity: number | null,
+            fillColor: string | null,
+            fillOpacity: number | null,
+            selectedColor: string | null,
+        },
+        pointStyleConfig: {
+            poiFontSize: number | null,
+            poiFontColor: string | null,
+            poiIconSize: number | null,
+        },
+    }, {
+        rule: 'layerType = "铺位"',
+        polygonStyleConfig: {
+            strokeColor: string | null,
+            strokeOpacity: number | null,
+            fillColor: string | null,
+            fillOpacity: number | null,
+            selectedColor: string | null,
+        },
+        pointStyleConfig: {
+            poiFontSize: number | null,
+            poiFontColor: string | null,
+            poiIconSize: number | null,
+        },
+    }]
+}
+
+bmap.loadThemeById(themeid)
+ */
+//         bmap.loadThemeById(themeid)