@hzab/map-combine 0.4.2-alpha.7 → 0.4.2-alpha.8

package/src/mine/MineMap.ts

@@ -1,125 +1,125 @@
-import { MapCombine } from "../basic/MapCombine";
-import { PointOption, Point } from "../basic/Point";
-import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
-import { PolygonOption, Polygon } from "../basic/Polygon";
-import { PolylineOption, Polyline } from "../basic/Polyline";
-import { Tile3DOption, Tile3D } from "../basic/Tile3D";
-import { bindEvent } from "./MineEvent";
-import { drawPoint } from "./MinePoint";
-import { drawPolygon } from "./MinePolygon";
-import { drawPolyline } from "./MinePolyline";
-import { drawTile3D } from "./MineTile3D";
-
-const MAX_ZOOM = 18;
-
-export class MineMap extends MapCombine {
-  viewer: any;
-  container: HTMLDivElement;
-
-  get cursor(): string {
-    return this.viewer.getCursor();
-  }
-  set cursor(val: string) {
-    this.viewer.setCursor(val);
-  }
-
-  get moveable(): boolean {
-    return this.viewer.dragPan.isEnabled();
-  }
-  set moveable(val: boolean) {
-    val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
-  }
-  get center(): number[] {
-    const p = this.viewer.getCenter();
-    return [p.lng, p.lat];
-  }
-  set center(val: number[]) {
-    this.viewer.setCenter(val);
-  }
-
-  get zoom(): number {
-    return this.viewer.getZoom();
-  }
-  set zoom(val: number) {
-    this.viewer.setZoom(val);
-  }
-
-  constructor(viewer: any) {
-    super();
-    this.viewer = viewer;
-    this.container = viewer.getContainer();
-    this.container.children.item(1).appendChild(this.htmllayer);
-    this.cursor = "default";
-    bindEvent(this);
-  }
-
-  canvasTgeography(p: number[]): number[] {
-    const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
-    return [res.lngLat.lng, res.lngLat.lat, 0];
-  }
-  geographyTcanvas(p: number[]): number[] {
-    const res = this.viewer.project([p[0], p[1]], p[2] ?? 0);
-    return [res.x, res.y];
-  }
-
-  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option);
-    drawPoint(this, e);
-    return e;
-  }
-
-  createPointAggregation(option?: PointAggregationOption): PointAggregation {
-    const e = new PointAggregation(this, option);
-    return e;
-  }
-
-  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
-    const e = new Polyline(this, option);
-    drawPolyline(this, e);
-    return e;
-  }
-  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
-    const e = new Polygon(this, option);
-    drawPolygon(this, e);
-    return e;
-  }
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   * @param opt
-   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
-   */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
-    if (points?.length === 0) {
-      return this.flyTo(points[0], opt);
-    }
-    const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
-
-    // 设置地图视图，使用调整后的边界范围
-    this.viewer.fitBounds(
-      [
-        [rectangle[0], rectangle[1]],
-        [rectangle[2], rectangle[3]],
-      ],
-      {
-        maxZoom: opt?.maxZoom ?? MAX_ZOOM,
-      },
-    );
-  }
-
-  /**
-   * 移动点位到中心点
-   * @param point
-   */
-  flyTo(point, opt = {}) {
-    // 设置相机视角
-    this.viewer.flyTo({ center: point, ...opt });
-  }
-
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    const e = new Tile3D(this, option);
-    drawTile3D(this, e);
-    return e;
-  }
-}
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { bindEvent } from "./MineEvent";
+import { drawPoint } from "./MinePoint";
+import { drawPolygon } from "./MinePolygon";
+import { drawPolyline } from "./MinePolyline";
+import { drawTile3D } from "./MineTile3D";
+
+const MAX_ZOOM = 18;
+
+export class MineMap extends MapCombine {
+  viewer: any;
+  container: HTMLDivElement;
+
+  get cursor(): string {
+    return this.viewer.getCursor();
+  }
+  set cursor(val: string) {
+    this.viewer.setCursor(val);
+  }
+
+  get moveable(): boolean {
+    return this.viewer.dragPan.isEnabled();
+  }
+  set moveable(val: boolean) {
+    val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
+  }
+  get center(): number[] {
+    const p = this.viewer.getCenter();
+    return [p.lng, p.lat];
+  }
+  set center(val: number[]) {
+    this.viewer.setCenter(val);
+  }
+
+  get zoom(): number {
+    return this.viewer.getZoom();
+  }
+  set zoom(val: number) {
+    this.viewer.setZoom(val);
+  }
+
+  constructor(viewer: any) {
+    super();
+    this.viewer = viewer;
+    this.container = viewer.getContainer();
+    this.container.children.item(1).appendChild(this.htmllayer);
+    this.cursor = "default";
+    bindEvent(this);
+  }
+
+  canvasTgeography(p: number[]): number[] {
+    const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
+    return [res.lngLat.lng, res.lngLat.lat, 0];
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const res = this.viewer.project([p[0], p[1]], p[2] ?? 0);
+    return [res.x, res.y];
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option);
+    drawPoint(this, e);
+    return e;
+  }
+
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    return e;
+  }
+
+  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
+    const e = new Polyline(this, option);
+    drawPolyline(this, e);
+    return e;
+  }
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option);
+    drawPolygon(this, e);
+    return e;
+  }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
+    const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
+
+    // 设置地图视图，使用调整后的边界范围
+    this.viewer.fitBounds(
+      [
+        [rectangle[0], rectangle[1]],
+        [rectangle[2], rectangle[3]],
+      ],
+      {
+        maxZoom: opt?.maxZoom ?? MAX_ZOOM,
+      },
+    );
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    // 设置相机视角
+    this.viewer.flyTo({ center: point, ...opt });
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
+  }
+}

package/src/mine/MinePoint.ts

@@ -28,10 +28,16 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
   };
 
   const marker = new minemap.Marker({
+    id: point.name,
     draggable: point.editable,
     rotation: 0,
     offset: [-size[0] * center[0], -size[1] * center[1]],
     element: img,
+    extData: {
+      name: point.name,
+      target: point,
+      userdata: point.userdata,
+    },
   });
 
   if (point.coordinates) {

package/src/mine/MinePolygon.ts

@@ -154,6 +154,10 @@ function main(map: MineMap, polygon: Polygon<unknown>) {
         properties: {
           id: polygon.name,
         },
+        extData: {
+          name: polygon.name,
+          userdata: polygon.userdata,
+        },
       };
     } else {
       data.features = [];

package/src/mine/MinePolyline.ts

@@ -135,6 +135,10 @@ function main(map: MineMap, polyline: Polyline<unknown>) {
         },
         properties: {
           id: polyline.name,
+          extData: {
+            name: polyline.name,
+            userdata: polyline.userdata,
+          },
         },
       };
     } else {

package/src/utils/color.ts

@@ -0,0 +1,49 @@
+/**
+ * 解析十六进制颜色字符串，拆分为颜色值和透明度
+ * @param {string} hexColor - 十六进制颜色字符串，支持格式：#RGB, #RRGGBB, #RRGGBBAA, #RGBA
+ * @param {number} defaultOpacity - 默认透明度（0-1），当颜色没有透明度时使用
+ * @returns {Object} { color: string, opacity: number }
+ * @throws {Error} 如果颜色格式无效
+ */
+export function parseHexColor(hexColor, defaultOpacity = 1) {
+  // 移除开头的 # 号（如果有）
+  let hex = hexColor.replace(/^#/, "");
+
+  // 验证是否为有效的十六进制字符串
+  if (!/^[0-9a-fA-F]+$/.test(hex)) {
+    throw new Error(`无效的颜色格式: "${hexColor}"`);
+  }
+
+  let color = "";
+  let opacity = defaultOpacity;
+
+  switch (hex.length) {
+    case 3: // #RGB
+      color = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+      opacity = defaultOpacity;
+      break;
+
+    case 4: // #RGBA
+      color = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+      opacity = parseInt(hex[3] + hex[3], 16) / 255;
+      break;
+
+    case 6: // #RRGGBB
+      color = `#${hex}`;
+      opacity = defaultOpacity;
+      break;
+
+    case 8: // #RRGGBBAA
+      color = `#${hex.slice(0, 6)}`;
+      opacity = parseInt(hex.slice(6, 8), 16) / 255;
+      break;
+
+    default:
+      throw new Error(`不支持的十六进制颜色长度: "${hexColor}"，长度必须为 3、4、6 或 8`);
+  }
+
+  // 确保透明度在 0-1 范围内
+  opacity = Math.max(0, Math.min(1, opacity));
+
+  return { color, opacity };
+}