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

package/src/mine/MineMap.ts

@@ -1,125 +1,217 @@
-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();
+    viewer && this._initParamsEvent(viewer);
+  }
+
+  init(opt) {
+    const {
+      container,
+      url,
+      minZoom = 4,
+      maxZoom = 18,
+      center = [120.2288892, 30.2349677, 0],
+      zoom = 13,
+      ...options
+    } = opt || {};
+    this.viewer = new minemap.Map({
+      container: container,
+      style: {
+        version: 8,
+        sources: {
+          tilemap: {
+            type: "raster",
+            tiles: [url],
+            tileSize: 256,
+          },
+        },
+        layers: [
+          {
+            id: "tilemap",
+            type: "raster",
+            source: "tilemap",
+            minzoom: 0,
+            maxzoom: 22,
+            layout: { visibility: "visible" },
+          },
+        ],
+      },
+      doubleClickZoom: false,
+      center,
+      zoom,
+      pitch: 0,
+      maxZoom,
+      minZoom,
+      ...options,
+    });
+    this._initParamsEvent(this.viewer);
+    return this.viewer;
+  }
+
+  _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    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;
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
+  }
+
+  createLayer(option?: Partial<unknown>): unknown {
+    const drawLayer = () => {
+      // 检查 source 是否已存在
+      if (this.viewer.getSource("ortho-source")) {
+        console.warn("Source already exists, removing old one");
+        try {
+          if (this.viewer.getLayer("ortho-layer")) {
+            this.viewer.removeLayer("ortho-layer");
+          }
+          this.viewer.removeSource("ortho-source");
+        } catch (e) {
+          console.warn("Remove failed:", e);
+        }
+      }
+
+      // 添加 source
+      this.viewer.addSource("ortho-source", {
+        type: "raster",
+        tiles: [option.url],
+        tileSize: 256,
+      });
+
+      // 添加 layer
+      this.viewer.addLayer({
+        id: "ortho-layer",
+        type: "raster",
+        source: "ortho-source",
+        paint: {
+          "raster-opacity": option.opacity || 1.0,
+        },
+      });
+    };
+
+    // 等待地图加载完成
+    if (this.viewer.loaded()) {
+      drawLayer();
+    } else {
+      this.viewer.once("load", drawLayer);
+    }
+  }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @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 });
+  }
+}

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) {
@@ -69,7 +75,7 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
           break;
         case "coordinates":
           if (point.coordinates) {
-            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0);
+            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? point.height);
             switch (status) {
               case 0:
                 point.show && marker.addTo(map.viewer);

package/src/mine/MinePolygon.ts

@@ -50,6 +50,7 @@ function getPolygonOption(polygon: Polygon<unknown>) {
       "fill-color": color,
       "fill-opacity": opacity,
     },
+    zIndex: polygon.coordinates[0]?.[2] ?? polygon.height,
   };
 }
 
@@ -148,11 +149,15 @@ function main(map: MineMap, polygon: Polygon<unknown>) {
         type: "Feature",
         geometry: {
           type: "Polygon",
-          coordinates: [[...coordinates, coordinates[0]]],
+          coordinates: [[...coordinates, coordinates[0]].map((it) => [it[0], it[1], it[2] ?? polygon.height])],
         },
         properties: {
           id: polygon.name,
         },
+        extData: {
+          name: polygon.name,
+          userdata: polygon.userdata,
+        },
       };
     } else {
       data.features = [];

package/src/mine/MinePolyline.ts

@@ -56,6 +56,7 @@ function getLayerOption(polyline: Polyline<unknown>) {
           "line-color": polyline.stroke,
           "line-width": polyline.lineWidth,
         },
+    zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
   };
 }
 
@@ -130,10 +131,14 @@ function main(map: MineMap, polyline: Polyline<unknown>) {
         type: "Feature",
         geometry: {
           type: "LineString",
-          coordinates: coordinates,
+          coordinates: coordinates?.map((it) => [it[0], it[1], it[2] ?? polyline.height]),
         },
         properties: {
           id: polyline.name,
+          extData: {
+            name: polyline.name,
+            userdata: polyline.userdata,
+          },
         },
       };
     } else {

package/src/openlayer/OpenlayerEvent.ts

@@ -1,87 +1,109 @@
-import { OpenlayerMap } from "./OpenlayerMap";
-
-export function bindEvent(map: OpenlayerMap) {
-  const { event, viewer, container } = map;
-  let target: any;
-  let moving = false;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-  });
-
-  viewer.on("pointermove", (e) => {
-    event.canvas = e.pixel;
-    event.geography = map.canvasTgeography(event.canvas);
-    let _target: any;
-    if (moving) {
-      event.trigger("pointer-move");
-      return;
-    }
-    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
-    _target = res ? res.get("event") : undefined;
-    if (_target?.silent) {
-      _target = undefined;
-    }
-    if (_target !== target) {
-      target?.onPointerOut?.();
-      _target?.onPointerIn?.();
-      target = _target;
-    }
-    event.trigger("pointer-move");
-  });
-
-  container.addEventListener("mousedown", () => {
-    if (target) {
-      moving = true;
-      target.onPointerDown?.();
-    }
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", () => {
-    if (target) {
-      moving = false;
-      target.onPointerUp?.();
-    }
-    event.trigger("pointer-up");
-  });
-
-  container.addEventListener("contextmenu", (e) => {
-    e.preventDefault();
-    if (target) {
-      target.onRClick?.();
-    }
-  });
-
-  viewer.on("click", () => {
-    if (target) {
-      target.onLClick?.();
-    }
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", () => {
-    if (target) {
-      target.onDbClick?.();
-    }
-    map.event.trigger("double-click");
-  });
-
-  let key = 0;
-
-  viewer.on("precompose", () => {
-    const _key = map.center.reduce((a, b) => a + b, map.zoom);
-    if (key != _key) {
-      key = _key;
-      event.trigger("view-change");
-    }
-  });
-}
+import { OpenlayerMap } from "./OpenlayerMap";
+
+export function bindEvent(map: OpenlayerMap) {
+  const { event, viewer, container } = map;
+  let target: any;
+  let moving = false;
+
+  const frame = () => {
+    if (map.isAlive) {
+      requestAnimationFrame(frame);
+      event.trigger("view-preRender");
+      map.bussinesses.forEach((e) => e.show && e.onFrame?.());
+    }
+  };
+  frame();
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+  });
+
+  viewer.on("pointermove", (e) => {
+    event.canvas = e.pixel;
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any;
+    if (moving) {
+      event.trigger("pointer-move");
+      return;
+    }
+    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
+    _target = res ? res.get("event") : undefined;
+    if (_target?.silent) {
+      _target = undefined;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+    event.trigger("pointer-move");
+  });
+
+  container.addEventListener("mousedown", () => {
+    if (target) {
+      moving = true;
+      target.onPointerDown?.();
+    }
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", () => {
+    if (target) {
+      moving = false;
+      target.onPointerUp?.();
+    }
+    event.trigger("pointer-up");
+  });
+
+  container.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    if (target) {
+      target.onRClick?.();
+    }
+  });
+
+  viewer.on("click", () => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger("left-click");
+  });
+
+  // 监听地图的单击事件
+  viewer.on("singleclick", function (e) {
+    // 使用 forEachFeatureAtPixel 查询该像素位置下的所有要素
+    const pickedObjects = [];
+    viewer.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+      // 这个回调函数会为每一个被点击到的要素执行
+      pickedObjects.push(feature);
+      // 返回 true 可以提前终止遍历
+      // return true;
+    });
+
+    if (pickedObjects.length > 0) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => it?.values_?.userData?.target),
+        sourceObjects: pickedObjects,
+        position: map.canvasTgeography(e.pixel),
+      });
+    }
+  });
+
+  viewer.on("dblclick", () => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    map.event.trigger("double-click");
+  });
+
+  let key = 0;
+
+  viewer.on("precompose", () => {
+    const _key = map.center.reduce((a, b) => a + b, map.zoom);
+    if (key != _key) {
+      key = _key;
+      event.trigger("view-change");
+    }
+  });
+}

package/src/openlayer/OpenlayerMap.ts

@@ -6,11 +6,10 @@ import Tile from "ol/layer/Tile";
 import DragPan from "ol/interaction/DragPan";
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
+import TileLayer from "ol/layer/Tile";
 import { fromLonLat } from "ol/proj";
 import * as olGeom from "ol/geom";
 import * as olSource from "ol/source";
-import * as olStyle from "ol/style";
-import * as olLayer from "ol/layer";
 import * as olExtent from "ol/extent";
 
 import { MapCombine } from "../basic/MapCombine";
@@ -173,6 +172,38 @@ export class OpenlayerMap extends MapCombine {
     return e;
   }
 
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    throw new Error("Method not implemented.");
+  }
+
+  createLayer(option?: Partial<unknown>): unknown {
+    /**
+     * 
+      import {transformExtent} from 'ol/proj';
+
+      // 假设你的图片地理范围是经纬度 (EPSG:4326)
+      const imageExtent = [115.38, 40.18, 115.39, 40.19]; 
+      // 如果地图视图是 Web Mercator (EPSG:3857)，需要转换范围
+      const extent3857 = transformExtent(imageExtent, 'EPSG:4326', 'EPSG:3857');
+     */
+    const layer = new TileLayer({
+      source: new XYZ({
+        ...option,
+        // 可选：如果图片有透明背景，设置透明属性
+        // 可选：设置投影（如果你的瓦片是经纬度投影）
+        // projection: 'EPSG:4326',
+        // 可选：设置瓦片大小（默认256）
+        // tileSize: 256,
+        // 可选：处理跨域问题
+        // crossOrigin: 'anonymous',
+        // 可选：设置瓦片加载失败时的重试次数
+        // transition: 0,
+      }),
+    });
+    this.viewer.addLayer(layer);
+    return layer;
+  }
+
   // protected _onFrame(): void {
   //   const { viewer, camera, offset } = this;
   //   const box = viewer.getView().calculateExtent(viewer.getSize());
@@ -268,10 +299,6 @@ export class OpenlayerMap extends MapCombine {
     return [coordinates[0] - this.offset[0], coordinates[1] - this.offset[1], 0];
   }
 
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    throw new Error("Method not implemented.");
-  }
-
   canvasTgeography(p: number[]): number[] {
     const coordinates = this.viewer.getCoordinateFromPixel(p);
     // 解决 coordinates 为 null 异常情况