@hzab/map-combine 0.4.2-alpha.0 → 0.4.2-alpha.2

package/src/openlayer/OpenlayerMap.ts

@@ -1,287 +1,287 @@
-import * as ol from "ol/index.js";
-import Map from "ol/Map.js";
-import View from "ol/View";
-import XYZ from "ol/source/XYZ";
-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 { 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";
-import { PointOption, Point } from "../basic/Point";
-import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
-import { Projection } from "../utils/Projection";
-import { bindEvent } from "./OpenlayerEvent";
-import { PolylineOption, Polyline } from "../basic/Polyline";
-import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
-import { PolygonOption, Polygon } from "../basic/Polygon";
-
-import { drawPoint } from "./OpenlayerPoint";
-import { drawPolyline } from "./OpenlayerPolyline";
-import { drawPolygon } from "./OpenlayerPolygon";
-import { Tile3DOption, Tile3D } from "../basic/Tile3D";
-import { gcjMecator } from "./openlayer-tile-gcj02-wgs84";
-
-const MAX_ZOOM = 18;
-
-export interface IOpenlayerOption {
-  container;
-  url: string | string[];
-  center?: number[];
-  zoom?: number;
-  maxZoom?: number;
-  minZoom?: number;
-  /** 地图瓦片转换规则 GCJ02 转 WGS84 */
-  proj?: "GCJ02->WGS84";
-}
-
-export class OpenlayerMap extends MapCombine {
-  viewer: Map;
-  container: HTMLDivElement;
-  dragPan: DragPan;
-  vectors: VectorSource;
-  option: IOpenlayerOption;
-  offset: number[];
-  fov = 0.9272952180016121;
-  isFromLonLat = true;
-  get cursor(): string {
-    return this.container.style.cursor;
-  }
-  set cursor(val: string) {
-    this.container.style.cursor = val;
-  }
-  get moveable(): boolean {
-    return this.dragPan.getActive();
-  }
-  set moveable(val: boolean) {
-    this.dragPan.setActive(val);
-  }
-  get center(): number[] {
-    const center = this.viewer.getView().getCenter()!;
-    return [Projection.xToLon(center[0]), Projection.yToLat(center[1]), 0];
-  }
-  set center(val: number[]) {
-    const { viewer } = this;
-    const view = viewer.getView();
-    view.setCenter([Projection.lonToX(val[0]), Projection.latToY(val[1])]);
-  }
-  get zoom(): number {
-    return this.viewer.getView().getZoom();
-  }
-  set zoom(val: number) {
-    this.viewer.getView().setZoom(val);
-  }
-
-  constructor(viewer?: Map) {
-    super();
-    viewer && this._initParamsEvent(viewer);
-  }
-
-  init(opt: IOpenlayerOption) {
-    this.option = opt;
-    const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url, maxZoom, minZoom, proj } = opt || {};
-
-    const viewer = new Map({
-      target: container,
-      controls: [],
-      view: new View({
-        projection: "EPSG:3857",
-        center: fromLonLat(center),
-        zoom: zoom,
-        maxZoom: maxZoom ?? 18,
-        minZoom: minZoom ?? 3,
-      }),
-      layers: [
-        new Tile({
-          visible: true,
-          source: new XYZ({
-            projection: proj === "GCJ02->WGS84" ? gcjMecator : undefined,
-            urls: Array.isArray(url) ? url : [url],
-            crossOrigin: "anonymous",
-          }),
-        }),
-      ],
-    });
-
-    this._initParamsEvent(viewer);
-
-    return new OpenlayerMap(viewer);
-  }
-
-  private _initParamsEvent(viewer) {
-    if (!viewer) {
-      return;
-    }
-    this.viewer = viewer;
-    this.container = viewer.getViewport() as HTMLDivElement;
-    this.container.appendChild(this.htmllayer);
-    this.cursor = "default";
-
-    const { center } = this;
-    const proj = this.viewer.getView().getProjection().getCode();
-    this.isFromLonLat = proj === "EPSG:3857" || proj === "EPSG:4326";
-    this.offset = this.getFromLonLat(center);
-    this.vectors = new VectorSource();
-    this.viewer.addLayer(
-      new VectorLayer({
-        source: this.vectors,
-      }),
-    );
-
-    this.dragPan = viewer
-      .getInteractions()
-      .getArray()
-      .find((interaction) => {
-        if (interaction instanceof DoubleClickZoom) {
-          interaction.setActive(false);
-        }
-        return interaction instanceof DragPan;
-      }) as DragPan;
-
-    bindEvent(this);
-  }
-
-  getFromLonLat(lonLat, isFromLonLat = this.isFromLonLat) {
-    return isFromLonLat ? fromLonLat(lonLat) : lonLat;
-  }
-
-  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;
-  }
-
-  // protected _onFrame(): void {
-  //   const { viewer, camera, offset } = this;
-  //   const box = viewer.getView().calculateExtent(viewer.getSize());
-
-  //   const height = box[3] - box[1];
-
-  //   camera.position.set((box[2] + box[0]) / 2 - offset[0], (box[3] + box[1]) / 2 - offset[1], height);
-
-  //   // this.meterPerPixel = height / this.container.offsetHeight;
-  // }
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @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 { avoid } = opt || {};
-    // 创建 Feature 数组
-    const features = points.map((point) => {
-      const [lon, lat] = point;
-      const coord = this.getFromLonLat([lon, lat]);
-      return new ol.Feature({
-        geometry: new olGeom.Point(coord),
-      });
-    });
-
-    // 创建 VectorSource
-    const source = new olSource.Vector({
-      features: features,
-    });
-
-    // 计算边界范围
-    const extent = source.getExtent();
-
-    // 调整边界范围
-    olExtent.buffer(extent, this.viewer.getView().getResolution(), extent);
-
-    // 设置地图视图
-    this.viewer.getView().fit(extent, {
-      // avoid  {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
-      // 上 右 下 左
-      padding: [avoid[0], avoid[3], avoid[1], avoid[2]],
-      duration: 1000,
-      maxZoom: opt?.maxZoom ?? MAX_ZOOM, // 最大缩放级别,
-      ...opt,
-    });
-  }
-
-  /**
-   * 移动点位到中心点
-   * @param point
-   */
-  flyTo(point, opt = {}) {
-    // 设置相机视角
-    this.viewer.getView().fit(point, {
-      duration: 1000,
-      ...opt,
-    });
-  }
-
-  geographyTspace(p: number[]): number[] {
-    const { offset } = this;
-    return [Projection.lonToX(p[0]) - offset[0], Projection.latToY(p[1]) - offset[1], p[2] ?? 0];
-  }
-  geographyTcanvas(p: number[]): number[] {
-    const pixel = this.viewer.getPixelFromCoordinate(this.getFromLonLat(p));
-    if (pixel) {
-      return [pixel[0], pixel[1]];
-    } else {
-      return [0, 0];
-    }
-  }
-  spaceTgeography(p: number[]): number[] {
-    const { offset } = this;
-    return [Projection.xToLon(p[0] + offset[0]), Projection.yToLat(p[1] + offset[1]), p[2] ?? 0];
-  }
-  spaceTcanvas(p: number[]): number[] {
-    const { offset } = this;
-    const pixel = this.viewer.getPixelFromCoordinate([p[0] + offset[0], p[1] + offset[1]]);
-    return [pixel[0], pixel[1]];
-  }
-  canvasTspace(p: number[]): number[] {
-    const coordinates = this.viewer.getCoordinateFromPixel(p);
-    // 解决 coordinates 为 null 异常情况
-    if (!coordinates) {
-      return [];
-    }
-    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 异常情况
-    if (!coordinates) {
-      return [];
-    }
-    return [Projection.xToLon(coordinates[0]), Projection.yToLat(coordinates[1]), 0];
-  }
-
-  _onDestroy() {
-    this.viewer.dispose();
-  }
-}
+import * as ol from "ol/index.js";
+import Map from "ol/Map.js";
+import View from "ol/View";
+import XYZ from "ol/source/XYZ";
+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 { 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";
+import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
+import { Projection } from "../utils/Projection";
+import { bindEvent } from "./OpenlayerEvent";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+
+import { drawPoint } from "./OpenlayerPoint";
+import { drawPolyline } from "./OpenlayerPolyline";
+import { drawPolygon } from "./OpenlayerPolygon";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { gcjMecator } from "./openlayer-tile-gcj02-wgs84";
+
+const MAX_ZOOM = 18;
+
+export interface IOpenlayerOption {
+  container;
+  url: string | string[];
+  center?: number[];
+  zoom?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  /** 地图瓦片转换规则 GCJ02 转 WGS84 */
+  proj?: "GCJ02->WGS84";
+}
+
+export class OpenlayerMap extends MapCombine {
+  viewer: Map;
+  container: HTMLDivElement;
+  dragPan: DragPan;
+  vectors: VectorSource;
+  option: IOpenlayerOption;
+  offset: number[];
+  fov = 0.9272952180016121;
+  isFromLonLat = true;
+  get cursor(): string {
+    return this.container.style.cursor;
+  }
+  set cursor(val: string) {
+    this.container.style.cursor = val;
+  }
+  get moveable(): boolean {
+    return this.dragPan.getActive();
+  }
+  set moveable(val: boolean) {
+    this.dragPan.setActive(val);
+  }
+  get center(): number[] {
+    const center = this.viewer.getView().getCenter()!;
+    return [Projection.xToLon(center[0]), Projection.yToLat(center[1]), 0];
+  }
+  set center(val: number[]) {
+    const { viewer } = this;
+    const view = viewer.getView();
+    view.setCenter([Projection.lonToX(val[0]), Projection.latToY(val[1])]);
+  }
+  get zoom(): number {
+    return this.viewer.getView().getZoom();
+  }
+  set zoom(val: number) {
+    this.viewer.getView().setZoom(val);
+  }
+
+  constructor(viewer?: Map) {
+    super();
+    viewer && this._initParamsEvent(viewer);
+  }
+
+  init(opt: IOpenlayerOption) {
+    this.option = opt;
+    const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url, maxZoom, minZoom, proj } = opt || {};
+
+    const viewer = new Map({
+      target: container,
+      controls: [],
+      view: new View({
+        projection: "EPSG:3857",
+        center: fromLonLat(center),
+        zoom: zoom,
+        maxZoom: maxZoom ?? 18,
+        minZoom: minZoom ?? 3,
+      }),
+      layers: [
+        new Tile({
+          visible: true,
+          source: new XYZ({
+            projection: proj === "GCJ02->WGS84" ? gcjMecator : undefined,
+            urls: Array.isArray(url) ? url : [url],
+            crossOrigin: "anonymous",
+          }),
+        }),
+      ],
+    });
+
+    this._initParamsEvent(viewer);
+
+    return this;
+  }
+
+  private _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    this.viewer = viewer;
+    this.container = viewer.getViewport() as HTMLDivElement;
+    this.container.appendChild(this.htmllayer);
+    this.cursor = "default";
+
+    const { center } = this;
+    const proj = this.viewer.getView().getProjection().getCode();
+    this.isFromLonLat = proj === "EPSG:3857" || proj === "EPSG:4326";
+    this.offset = this.getFromLonLat(center);
+    this.vectors = new VectorSource();
+    this.viewer.addLayer(
+      new VectorLayer({
+        source: this.vectors,
+      }),
+    );
+
+    this.dragPan = viewer
+      .getInteractions()
+      .getArray()
+      .find((interaction) => {
+        if (interaction instanceof DoubleClickZoom) {
+          interaction.setActive(false);
+        }
+        return interaction instanceof DragPan;
+      }) as DragPan;
+
+    bindEvent(this);
+  }
+
+  getFromLonLat(lonLat, isFromLonLat = this.isFromLonLat) {
+    return isFromLonLat ? fromLonLat(lonLat) : lonLat;
+  }
+
+  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;
+  }
+
+  // protected _onFrame(): void {
+  //   const { viewer, camera, offset } = this;
+  //   const box = viewer.getView().calculateExtent(viewer.getSize());
+
+  //   const height = box[3] - box[1];
+
+  //   camera.position.set((box[2] + box[0]) / 2 - offset[0], (box[3] + box[1]) / 2 - offset[1], height);
+
+  //   // this.meterPerPixel = height / this.container.offsetHeight;
+  // }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @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 { avoid } = opt || {};
+    // 创建 Feature 数组
+    const features = points.map((point) => {
+      const [lon, lat] = point;
+      const coord = this.getFromLonLat([lon, lat]);
+      return new ol.Feature({
+        geometry: new olGeom.Point(coord),
+      });
+    });
+
+    // 创建 VectorSource
+    const source = new olSource.Vector({
+      features: features,
+    });
+
+    // 计算边界范围
+    const extent = source.getExtent();
+
+    // 调整边界范围
+    olExtent.buffer(extent, this.viewer.getView().getResolution(), extent);
+
+    // 设置地图视图
+    this.viewer.getView().fit(extent, {
+      // avoid  {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+      // 上 右 下 左
+      padding: [avoid[0], avoid[3], avoid[1], avoid[2]],
+      duration: 1000,
+      maxZoom: opt?.maxZoom ?? MAX_ZOOM, // 最大缩放级别,
+      ...opt,
+    });
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    // 设置相机视角
+    this.viewer.getView().fit(point, {
+      duration: 1000,
+      ...opt,
+    });
+  }
+
+  geographyTspace(p: number[]): number[] {
+    const { offset } = this;
+    return [Projection.lonToX(p[0]) - offset[0], Projection.latToY(p[1]) - offset[1], p[2] ?? 0];
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const pixel = this.viewer.getPixelFromCoordinate(this.getFromLonLat(p));
+    if (pixel) {
+      return [pixel[0], pixel[1]];
+    } else {
+      return [0, 0];
+    }
+  }
+  spaceTgeography(p: number[]): number[] {
+    const { offset } = this;
+    return [Projection.xToLon(p[0] + offset[0]), Projection.yToLat(p[1] + offset[1]), p[2] ?? 0];
+  }
+  spaceTcanvas(p: number[]): number[] {
+    const { offset } = this;
+    const pixel = this.viewer.getPixelFromCoordinate([p[0] + offset[0], p[1] + offset[1]]);
+    return [pixel[0], pixel[1]];
+  }
+  canvasTspace(p: number[]): number[] {
+    const coordinates = this.viewer.getCoordinateFromPixel(p);
+    // 解决 coordinates 为 null 异常情况
+    if (!coordinates) {
+      return [];
+    }
+    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 异常情况
+    if (!coordinates) {
+      return [];
+    }
+    return [Projection.xToLon(coordinates[0]), Projection.yToLat(coordinates[1]), 0];
+  }
+
+  _onDestroy() {
+    this.viewer.dispose();
+  }
+}

package/src/openlayer/OpenlayerPolygon.ts

@@ -10,26 +10,10 @@ import iconPoint from "../assets/point.png";
 import iconAdd from "../assets/add.png";
 import Point from "ol/geom/Point.js";
 import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
-const styleNode = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconPoint,
-    crossOrigin: "anonymous",
-  }),
-});
-
-const styleVirtual = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconAdd,
-    crossOrigin: "anonymous",
-  }),
-});
 
 export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
-  const { event, viewer, vectors, getFromLonLat, isFromLonLat } = map;
+  const { event, viewer, vectors, isFromLonLat } = map;
+  // getFromLonLat 使用 map.getFromLonLat 调用，保证 this 指向正确
 
   const source = new VectorSource();
 
@@ -62,6 +46,27 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     stroke,
     fill,
   });
+  const styleNode = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconPoint,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
+
+  const styleVirtual = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconAdd,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
 
   const _event = {
     cursor: polygon.cursor,
@@ -95,7 +100,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
   feature.set("event", _event, true);
   if (polygon.coordinates) {
     status = 2;
-    geometry.setCoordinates([polygon.coordinates.map((e) => getFromLonLat(e, isFromLonLat))]);
+    geometry.setCoordinates([polygon.coordinates.map((e) => map.getFromLonLat(e, isFromLonLat))]);
     layer.setZIndex(polygon.coordinates[0][2] ?? 1);
     source.addFeature(feature);
   }
@@ -115,7 +120,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
           break;
         case "coordinates":
           if (polygon.coordinates) {
-            geometry.setCoordinates([polygon.coordinates.map((e) => getFromLonLat(e, isFromLonLat))]);
+            geometry.setCoordinates([polygon.coordinates.map((e) => map.getFromLonLat(e, isFromLonLat))]);
             layer.setZIndex(polygon.coordinates[0][2] ?? 1);
             switch (status) {
               case 0:
@@ -157,11 +162,11 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 1:
         cache.pop();
-        cache.push(getFromLonLat(event.geography));
+        cache.push(map.getFromLonLat(event.geography));
         geometry.setCoordinates([cache]);
         break;
       case 4:
-        activeNode.update(getFromLonLat(event.geography));
+        activeNode.update(map.getFromLonLat(event.geography));
         geometry.setCoordinates([editor.getCoordinates()]);
         break;
     }
@@ -171,7 +176,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 0:
         status = 1;
-        cache = [getFromLonLat(event.geography)];
+        cache = [map.getFromLonLat(event.geography)];
         cache.push(cache[0]);
         geometry.setCoordinates([cache]);
         source.addFeature(feature);