@hzab/map-combine 0.4.2-alpha.1 → 0.4.2-alpha.12

package/src/amap/AMapPolyline.ts

@@ -1,185 +1,199 @@
-import { AMap } from "./AMap";
-import { Polyline } from "../basic/Polyline";
-
-export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
-  const { event, viewer, LbsAMap } = map;
-
-  let status = 0;
-  let skip = 0;
-  let target = null;
-  let aMapPolylineEditor = null;
-
-  const _event = {
-    cursor: polyline.cursor,
-    silent: polyline.silent,
-    onPointerIn() {
-      status == 2 && polyline.event.trigger("pointer-in");
-    },
-    onPointerOut() {
-      status == 2 && polyline.event.trigger("pointer-out");
-    },
-    onLClick() {
-      status == 2 && polyline.event.trigger("left-click");
-    },
-    onRClick(e) {
-      event.canvas = [e.pixel.x, e.pixel.y];
-      if (polyline.menu) {
-        map.menu.show(polyline.menu);
-      }
-      status == 2 && polyline.event.trigger("right-click");
-    },
-    onDbClick() {
-      polyline.editable &&
-        status == 2 &&
-        setTimeout(() => {
-          aMapPolylineEditor.setTarget(target);
-          aMapPolylineEditor.open();
-          polyline.event.trigger("start-edit");
-        });
-    },
-  };
-
-  const bindEvent = (graphical) => {
-    graphical.on("click", _event.onLClick);
-    graphical.on("rightclick", _event.onRClick);
-    graphical.on("dblclick", _event.onDbClick);
-    graphical.on("mouseover", _event.onPointerIn);
-    graphical.on("mouseout", _event.onPointerOut);
-  };
-
-  aMapPolylineEditor = new LbsAMap.PolylineEditor(viewer, undefined, {
-    createOptions: {
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-    editOptions: {
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-  });
-
-  aMapPolylineEditor.on("add", (e) => {
-    status = 3;
-    target = e.target;
-    bindEvent(target);
-    // polygon.event.trigger("data-loaded");
-  });
-
-  if (polyline.coordinates) {
-    status = 2;
-    target = new LbsAMap.Polyline({
-      path: polyline.coordinates,
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    });
-    viewer.add(target);
-    bindEvent(target);
-  } else {
-    aMapPolylineEditor.close();
-    aMapPolylineEditor.setTarget();
-    aMapPolylineEditor.open();
-  }
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--;
-      return;
-    }
-
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          if (polyline.show) {
-            target.show();
-          } else {
-            target.hide();
-          }
-          break;
-        case "editable":
-          break;
-        case "coordinates":
-          if (polyline.coordinates) {
-            target.setPath(polyline.coordinates);
-            target.setzIndex(polyline.coordinates[2]);
-            target.show();
-            status = 2;
-          } else {
-            target.hide();
-            status = 0;
-          }
-          break;
-
-        case "lineWidth":
-          target.setOptions({
-            strokeWeight: polyline.lineWidth,
-          });
-          break;
-        case "stroke":
-          target.setOptions({
-            strokeColor: polyline.stroke,
-          });
-          break;
-        case "dash":
-          target.setOptions({
-            strokeStyle: polyline.dash ? "dashed" : "solid",
-          });
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`);
-      }
-    });
-  };
-  const onDbClick = () => {
-    switch (status) {
-      case 1:
-        status = 2;
-        skip++;
-        polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-        polyline.event.trigger("data-loaded");
-        polyline.event.trigger("pointer-in");
-        break;
-      case 3:
-        polyline.event.trigger("stop-edit");
-        aMapPolylineEditor.setTarget();
-        aMapPolylineEditor.close();
-        break;
-    }
-  };
-  const onStartEdit = () => {
-    switch (status) {
-      case 2:
-        status = 3;
-        break;
-    }
-  };
-
-  const onStopEdit = () => {
-    if (status == 3) {
-      status = 2;
-      skip++;
-      polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-    }
-  };
-
-  const onDestroy = () => {
-    viewer.remove(target);
-    aMapPolylineEditor.close();
-    aMapPolylineEditor.setTarget();
-    event.off("double-click", onDbClick);
-    polyline.event.off("update", onUpdate);
-    polyline.event.off("start-edit", onStartEdit);
-    polyline.event.off("stop-edit", onStopEdit);
-    polyline.event.off("destroy", onDestroy);
-  };
-
-  event.on("double-click", onDbClick);
-  polyline.event.on("update", onUpdate);
-  polyline.event.on("start-edit", onStartEdit);
-  polyline.event.on("stop-edit", onStopEdit);
-  polyline.event.on("destroy", onDestroy);
-}
+import { AMap } from "./AMap";
+import { Polyline } from "../basic/Polyline";
+
+import { parseHexColor } from "../utils/color";
+
+export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
+  const { event, viewer, LbsAMap } = map;
+  const { color: strokeColor, opacity: strokeOpacity } = parseHexColor(polyline.stroke);
+
+  let status = 0;
+  let skip = 0;
+  let target = null;
+  let aMapPolylineEditor = null;
+
+  const _event = {
+    cursor: polyline.cursor,
+    silent: polyline.silent,
+    onPointerIn() {
+      status == 2 && polyline.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      status == 2 && polyline.event.trigger("pointer-out");
+    },
+    onLClick() {
+      status == 2 && polyline.event.trigger("left-click");
+    },
+    onRClick(e) {
+      event.canvas = [e.pixel.x, e.pixel.y];
+      if (polyline.menu) {
+        map.menu.show(polyline.menu);
+      }
+      status == 2 && polyline.event.trigger("right-click");
+    },
+    onDbClick() {
+      polyline.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          aMapPolylineEditor.setTarget(target);
+          aMapPolylineEditor.open();
+          polyline.event.trigger("start-edit");
+        });
+    },
+  };
+
+  const bindEvent = (graphical) => {
+    graphical.on("click", _event.onLClick);
+    graphical.on("rightclick", _event.onRClick);
+    graphical.on("dblclick", _event.onDbClick);
+    graphical.on("mouseover", _event.onPointerIn);
+    graphical.on("mouseout", _event.onPointerOut);
+  };
+
+  aMapPolylineEditor = new LbsAMap.PolylineEditor(viewer, undefined, {
+    createOptions: {
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+    editOptions: {
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+  });
+
+  aMapPolylineEditor.on("add", (e) => {
+    status = 3;
+    target = e.target;
+    bindEvent(target);
+    // polygon.event.trigger("data-loaded");
+  });
+
+  if (polyline.coordinates) {
+    status = 2;
+    target = new LbsAMap.Polyline({
+      path: polyline.coordinates,
+      strokeColor: strokeColor,
+      strokeOpacity: strokeOpacity,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+      zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
+      bubble: true,
+      extData: {
+        userdata: polyline.userdata,
+        cursor: polyline.cursor,
+        silent: polyline.silent,
+        target: polyline,
+      },
+    });
+    viewer.add(target);
+    bindEvent(target);
+  } else {
+    aMapPolylineEditor.close();
+    aMapPolylineEditor.setTarget();
+    aMapPolylineEditor.open();
+  }
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (polyline.show) {
+            target.show();
+          } else {
+            target.hide();
+          }
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          if (polyline.coordinates) {
+            target.setPath(polyline.coordinates);
+            target.setzIndex(polyline.coordinates[0]?.[2] ?? polyline.height);
+            target.show();
+            status = 2;
+          } else {
+            target.hide();
+            status = 0;
+          }
+          break;
+
+        case "lineWidth":
+          target.setOptions({
+            strokeWeight: polyline.lineWidth,
+          });
+          break;
+        case "stroke":
+          target.setOptions({
+            strokeColor: polyline.stroke,
+          });
+          break;
+        case "dash":
+          target.setOptions({
+            strokeStyle: polyline.dash ? "dashed" : "solid",
+          });
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+  };
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2;
+        skip++;
+        polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+        polyline.event.trigger("data-loaded");
+        polyline.event.trigger("pointer-in");
+        break;
+      case 3:
+        polyline.event.trigger("stop-edit");
+        aMapPolylineEditor.setTarget();
+        aMapPolylineEditor.close();
+        break;
+    }
+  };
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3;
+        break;
+    }
+  };
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2;
+      skip++;
+      polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+    }
+  };
+
+  const onDestroy = () => {
+    viewer.remove(target);
+    aMapPolylineEditor.close();
+    aMapPolylineEditor.setTarget();
+    event.off("double-click", onDbClick);
+    polyline.event.off("update", onUpdate);
+    polyline.event.off("start-edit", onStartEdit);
+    polyline.event.off("stop-edit", onStopEdit);
+    polyline.event.off("destroy", onDestroy);
+  };
+
+  event.on("double-click", onDbClick);
+  polyline.event.on("update", onUpdate);
+  polyline.event.on("start-edit", onStartEdit);
+  polyline.event.on("stop-edit", onStopEdit);
+  polyline.event.on("destroy", onDestroy);
+}

package/src/basic/BasicBusiness.ts

@@ -36,11 +36,11 @@ export abstract class BasicBusiness<T extends BasicBusinessOption> {
   constructor(map: MapCombine, option: T) {
     this._map = map;
     this._option = option;
-    // const oldElement = map.bussinesses.get(this.name);
-    // if (oldElement) {
-    //   oldElement.destroy();
-    // }
-    // map.bussinesses.set(this.name, this);
+    const oldElement = map.bussinesses.get(this.name);
+    if (oldElement) {
+      oldElement.destroy();
+    }
+    map.bussinesses.set(this.name, this);
   }
 
   /** 地图展示时触发一次 */

package/src/basic/BasicModel.ts

@@ -0,0 +1,49 @@
+import { BasicElement, type BasicElementOption } from "./BasicElement";
+
+export interface BasicModelOption extends BasicElementOption {
+  name?: string;
+  /** 经度 */
+  lon: number;
+  /** 纬度 */
+  lat: number;
+  /** 海拔 */
+  alt: number;
+  /** 模型地址 */
+  model: string;
+  /** 缩放 */
+  scale: number;
+  /** 朝向 */
+  heading: number;
+  /** 俯角 */
+  pitch: number;
+  /** 倾角 */
+  roll: number;
+  /** 最小尺寸 */
+  minSize: number;
+}
+
+export abstract class BasicModel extends BasicElement<BasicModelOption> {
+  constructor(option: Partial<BasicModelOption> = {}) {
+    super(
+      Object.assign(
+        {
+          show: true,
+          cursor: "pointer",
+          silent: false,
+          lon: 120,
+          lat: 30,
+          alt: 0,
+          scale: 1,
+          model: BasicModel.defualtModel,
+          heading: 0,
+          pitch: 0,
+          roll: 0,
+          minSize: 16,
+        },
+        option,
+      ),
+    );
+  }
+
+  static defualtModel = "./public/xiaoche.glb";
+}

package/src/basic/Layer.ts

@@ -0,0 +1,154 @@
+import Eventful from "zrender/lib/core/Eventful";
+
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
+
+export interface LayerOption extends MapElementOption {
+  show: boolean;
+  src: string;
+  /** 中心点坐标 [lng, lat, height] */
+  coordinates?: number[];
+  /** 移动 [x, y, z] */
+  translates?: number[];
+  /** 旋转 [x, y, z] */
+  rotates?: number[];
+  /** 缩放 [x, y, z] */
+  scales?: number[];
+  quality: number;
+  opacity?: number;
+  zIndex?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  /** 瓦片地图的切分规则 */
+  tilingScheme?: any;
+  /** 正射影像瓦片数据在地球上覆盖的精确地理范围 */
+  rectangle?: any;
+  /** 支持自定义瓦片加载参数 */
+  credit?: any;
+}
+
+export class Layer extends MapElement<LayerOption> {
+  type = "Layer";
+  tileset;
+  event = new Eventful<{
+    ready: () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+    focus: () => void;
+  }>();
+
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val;
+      this._update("show");
+    }
+  }
+
+  get src() {
+    return this._option.src;
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val;
+      this._update("src");
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates;
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val;
+      this._update("coordinates");
+    }
+  }
+  get opacity() {
+    return this._option.opacity;
+  }
+
+  set opacity(val) {
+    if (this._option.opacity != val) {
+      this._option.opacity = val;
+      this._update("opacity");
+    }
+  }
+
+  get quality() {
+    return this._option.quality;
+  }
+
+  set quality(val) {
+    if (this._option.quality != val) {
+      this._option.quality = val;
+      this._update("quality");
+    }
+  }
+
+  constructor(map: MapCombine, option: Partial<LayerOption> = {}) {
+    super(map, Object.assign({ ...Layer.option }, option));
+  }
+
+  static option: LayerOption = {
+    name: "Layer",
+    show: true,
+    src: "",
+    quality: 0.5,
+    opacity: 1,
+  };
+
+  private _needUpdate?: Set<string>;
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key);
+    } else {
+      this._needUpdate = new Set([key]);
+      setTimeout(() => {
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
+      });
+    }
+  }
+
+  /** 基于本地的 ENU 坐标系的偏移，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param dx x轴偏移量。单位：米
+   * @param dy y轴偏移量。单位：米
+   * @param dz z轴偏移量。单位：米
+   * @param tileset Cesium3DTileset
+   */
+  translate(dx: number, dy: number, dz: number, tileset: any = this.tileset) {
+    console.info("Layer translate");
+  }
+  /** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param rx 绕X轴旋转的角度。单位：度
+   * @param ry 绕Y轴旋转的角度。单位：度
+   * @param rz 绕Z轴旋转的角度。单位：度
+   * @param tileset Cesium3DTileset
+   */
+  rotate(rx: number, ry: number, rz: number, tileset = this.tileset) {
+    console.info("Layer rotate");
+  }
+  /** 基于本地的 ENU 坐标系的缩放，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param sx x 轴缩放倍数
+   * @param sy y 轴缩放倍数
+   * @param sz z 轴缩放倍数
+   * @param tileset Cesium3DTileset
+   */
+  scale(sx: number, sy: number, sz: number, tileset = this.tileset) {
+    console.info("Layer scale");
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger("destroy");
+  }
+
+  focus() {
+    this.event.trigger("focus");
+  }
+}