@xingm/vmap-cesium-toolbar 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as n from "cesium";
-import { Ion as C, Viewer as b, createWorldTerrainAsync as w } from "cesium";
+import { Ion as E, Viewer as b, createWorldTerrainAsync as w } from "cesium";
 class m {
   viewer;
   scene;
@@ -116,8 +116,8 @@ class m {
           flat: !0
         })
       });
-      this.viewer.scene.primitives.add(d), this.viewer.scene.primitives.add(p), this.frustumPrimitives.push(d, p), e.onRightClick && this.screenSpaceEventHandler && this.screenSpaceEventHandler.setInputAction((E) => {
-        E.position && e.onRightClick && e.onRightClick(a);
+      this.viewer.scene.primitives.add(d), this.viewer.scene.primitives.add(p), this.frustumPrimitives.push(d, p), e.onRightClick && this.screenSpaceEventHandler && this.screenSpaceEventHandler.setInputAction((C) => {
+        C.position && e.onRightClick && e.onRightClick(a);
       }, n.ScreenSpaceEventType.RIGHT_CLICK);
     } catch (t) {
       console.error("绘制视锥体时发生错误:", t), this.clearFrustum();
@@ -865,7 +865,7 @@ class v {
    */
   updateButtonConfig(e, t) {
     const i = this.toolbarElement.querySelector(`[data-tool="${e}"]`);
-    i && (t.title && (i.title = t.title), t.icon && this.setButtonIcon(i, t.icon), t.size && (i.style.width = `${t.size}px`, i.style.height = `${t.size}px`), t.color && (i.style.background = t.color));
+    i && (t.title && (i.title = t.title), t.icon && this.setButtonIcon(i, t.icon), t.size && (i.style.width = `${t.size}px`, i.style.height = `${t.size}px`), t.color && (i.style.color = t.color), t.backgroundColor && (i.style.background = t.backgroundColor), t.borderColor && (i.style.borderColor = t.borderColor), t.borderWidth && (i.style.borderWidth = t.borderWidth + "px"), t.borderStyle && (i.style.borderStyle = t.borderStyle), t.padding && (i.style.padding = t.padding), t.activeIcon && this.setButtonIcon(i, t.activeIcon));
   }
   /**
    * 添加自定义按钮
@@ -878,7 +878,8 @@ class v {
       size: e.size,
       color: e.color,
       hoverColor: e.hoverColor,
-      activeColor: e.activeColor
+      activeColor: e.activeColor,
+      backgroundColor: e.backgroundColor
     }, i = this.createButton(t);
     this.toolbarElement.appendChild(i), this.config.buttons || (this.config.buttons = []), this.config.buttons.push(e);
   }
@@ -972,16 +973,21 @@ class v {
       { id: "zoom-in", icon: "🔍+", title: "放大" },
       { id: "zoom-out", icon: "🔍-", title: "缩小" },
       { id: "fullscreen", icon: "⛶", title: "全屏" }
-    ];
-    return this.config.buttons && this.config.buttons.length > 0 ? this.config.buttons.map((t) => ({
-      id: t.id,
-      icon: typeof t.icon == "string" ? t.icon : "",
-      title: t.title,
-      size: t.size,
-      color: t.color,
-      hoverColor: t.hoverColor,
-      activeColor: t.activeColor
-    })) : e;
+    ], t = (i) => e.find((s) => s.id === i);
+    return this.config.buttons && this.config.buttons.length > 0 ? this.config.buttons.map((i) => {
+      const s = t(i.id);
+      return {
+        id: i.id || s?.id || "",
+        icon: typeof i.icon == "string" ? i.icon : s?.icon || "",
+        title: i.title || s?.title || "",
+        size: typeof i.size == "number" ? i.size : typeof s?.size == "number" ? s.size : void 0,
+        backgroundColor: i.backgroundColor || s?.backgroundColor || "",
+        borderColor: i.borderColor || s?.borderColor || "",
+        borderWidth: i.borderWidth || s?.borderWidth || 1,
+        borderStyle: i.borderStyle || s?.borderStyle || "solid",
+        color: i.color || s?.color || "rgba(66, 133, 244, 0.4)"
+      };
+    }) : e;
   }
   /**
    * 创建按钮
@@ -989,34 +995,70 @@ class v {
   createButton(e) {
     const t = document.createElement("div");
     t.className = "cesium-toolbar-button", t.setAttribute("data-tool", e.id), t.title = e.title;
-    const i = e.size || this.config.buttonSize, s = e.color || "rgba(66, 133, 244, 0.4)", o = e.hoverColor || "rgba(51, 103, 214, 0.9)";
+    const i = e.size || this.config.buttonSize, s = e.color || "rgba(66, 133, 244, 0.4)", o = e.backgroundColor || "rgba(66, 133, 244, 0.4)", a = e.borderColor || "rgba(66, 133, 244, 0.4)", r = e.borderWidth || 1, l = e.borderStyle || "solid";
     return t.style.cssText = `
       width: ${i}px;
       height: ${i}px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: ${s};
-      color: white;
-      border: none;
-      border-radius: 4px;
+      background: ${o};
+      color: ${s};
+      border-width: ${r}px;
+      border-style: ${l};
+      border-color: ${a};
       cursor: pointer;
-      font-size: 14px;
       font-weight: bold;
       transition: all 0.2s ease;
       user-select: none;
       position: relative;
     `, this.setButtonIcon(t, e.icon), t.addEventListener("mouseenter", () => {
-      t.style.background = o, t.style.transform = "scale(1.05)";
+      t.style.transform = "scale(1.05)";
     }), t.addEventListener("mouseleave", () => {
-      t.style.background = s, t.style.transform = "scale(1)";
+      t.style.transform = "scale(1)";
     }), this.setupButtonEvents(t, e), t;
   }
   /**
    * 设置按钮图标
    */
   setButtonIcon(e, t) {
-    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t));
+    t instanceof HTMLElement ? (e.innerHTML = "", e.appendChild(t)) : typeof t == "string" && (this.isImagePath(t) ? this.loadImageIcon(e, t) : e.innerHTML = t);
+  }
+  /**
+   * 判断是否为图片路径
+   */
+  isImagePath(e) {
+    return /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(e);
+  }
+  /**
+   * 加载图片图标
+   */
+  loadImageIcon(e, t) {
+    const i = new Image(), s = e.getBoundingClientRect(), o = window.getComputedStyle(e), a = s.width || parseInt(o.width) || 36, r = s.height || parseInt(o.height) || 36, l = Math.min(a, r) * 0.6, c = Math.min(a, r) * 0.6;
+    i.width = l, i.height = c, i.onload = () => {
+      e.appendChild(i);
+    }, i.onerror = () => {
+      console.warn(`Failed to load icon: ${t}`), this.setDefaultIcon(e, t);
+    }, i.src = t;
+  }
+  /**
+   * 设置默认图标（当图片加载失败时）
+   */
+  setDefaultIcon(e, t) {
+    const i = t.split("/").pop()?.split(".")[0] || "icon";
+    e.style.backgroundImage = "none", e.style.backgroundColor = "#ccc", e.style.position = "relative";
+    const s = document.createElement("div");
+    s.style.cssText = `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 12px;
+      color: #666;
+      font-weight: bold;
+      text-align: center;
+      line-height: 1;
+    `, s.textContent = i.charAt(0).toUpperCase(), e.innerHTML = "", e.appendChild(s);
   }
   /**
    * 设置按钮事件
@@ -1440,7 +1482,7 @@ class v {
     this.toolbarElement && this.toolbarElement.parentNode && this.toolbarElement.parentNode.removeChild(this.toolbarElement), this.drawHelper.destroy();
   }
 }
-function x() {
+function y() {
   return new n.UrlTemplateImageryProvider({
     url: "https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
     subdomains: ["1", "2", "3", "4"],
@@ -1450,15 +1492,15 @@ function x() {
     credit: "© 高德地图"
   });
 }
-async function L(u, e, t = { longitude: 120.2052342, latitude: 30.2489634, height: 1e3, pitch: -60, heading: 0 }) {
-  C.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3M2M3NWU1Ni0xZmJkLTRkNjAtOTk4NC0wZDZhNWFiOWJlZDEiLCJpZCI6MzMxNTg1LCJpYXQiOjE3NTUyMjQ2MzB9.WBUG7ctHKtOrnay1ng8JNfaNgngbkNgOmRXP59OJ7ME";
+async function x(u, e, t = { longitude: 120.2052342, latitude: 30.2489634, height: 1e3, pitch: -60, heading: 0 }) {
+  E.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3M2M3NWU1Ni0xZmJkLTRkNjAtOTk4NC0wZDZhNWFiOWJlZDEiLCJpZCI6MzMxNTg1LCJpYXQiOjE3NTUyMjQ2MzB9.WBUG7ctHKtOrnay1ng8JNfaNgngbkNgOmRXP59OJ7ME";
   const i = new b(u, {
     timeline: !1,
     animation: !1,
     baseLayerPicker: !1,
     ...e
   });
-  return !e.terrainProvider && !e.terrain && (i.terrainProvider = await w()), e.mapType === "gaode" && (i.imageryLayers.removeAll(), i.imageryLayers.addImageryProvider(x())), t && i.camera.flyTo({
+  return !e.terrainProvider && !e.terrain && (i.terrainProvider = await w()), e.mapType === "gaode" && (i.imageryLayers.removeAll(), i.imageryLayers.addImageryProvider(y())), t && i.camera.flyTo({
     destination: n.Cartesian3.fromDegrees(t.longitude, t.latitude, t.height),
     // 中国中心坐标
     orientation: {
@@ -1469,15 +1511,15 @@ async function L(u, e, t = { longitude: 120.2052342, latitude: 30.2489634, heigh
     }
   }), i.cesiumWidget.creditContainer.style.display = "none", { viewer: i, initialCenter: t };
 }
-const I = {
+const L = {
   CesiumMapToolbar: v,
   DrawHelper: m,
-  initCesium: L
+  initCesium: x
 };
 export {
   v as CesiumMapToolbar,
   m as DrawHelper,
-  I as default,
-  L as initCesium
+  L as default,
+  x as initCesium
 };
 //# sourceMappingURL=index.es.js.map