@hzab/map-combine 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 # @hzab/map-combine@0.1.0
 
 feat: BIM 模型加载；旋转、平移、缩放
+feat: 地图瓦片转 84 坐标系
 
 # @hzab/map-combine@0.0.1
 组件初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/basic/BasicBusiness.ts

@@ -0,0 +1,72 @@
+import { setValue } from "../utils";
+// import { type BasicElementOption, type BasicElement } from "./BasicElement";
+import { MapCombine } from "./MapCombine";
+
+export interface BasicBusinessOption {
+  /** 组件名，唯一标识 */
+  name: string;
+  /** 组件是否显示 */
+  show: boolean;
+}
+
+export abstract class BasicBusiness<T extends BasicBusinessOption> {
+  protected readonly _option: T;
+  protected readonly _map: MapCombine;
+  protected _elements = [];
+  /** 唯一标识 */
+  get name() {
+    return this._option.name;
+  }
+
+  /** 是否显示 */
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    setValue(this._option, "show", val, () => {
+      this._elements.forEach((e) => {
+        e?.update({
+          show: val,
+        });
+      });
+    });
+  }
+
+  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);
+  }
+
+  /** 地图展示时触发一次 */
+  onMapLoaded?(): void;
+  /** 每一帧触发一次 */
+  onFrame?(): void;
+  /** 视图变化先触发一次 */
+  onBeforeViewChange?(): void;
+  /** 视图变化时连续触发 */
+  onViewChange?(): void;
+  /** 视图变化后触发一次 */
+  onAfterViewChange?(): void;
+  /** 鼠标在地图上移动时触发 */
+  onMouseMove?(): void;
+  /** 鼠标在地图上单击左键 */
+  onMouseLClick?(): void;
+  /** 鼠标在地图上单击右键 */
+  onMouseRClick?(): void;
+
+  /** 销毁组件 */
+  destroy() {
+    this._map.bussinesses.delete(this.name);
+    if (this._map.isAlive) {
+      this._elements.forEach((e) => e?.destroy());
+      this.onDestroy?.();
+    }
+  }
+  onDestroy?(): void;
+}

package/src/basic/BasicElement.ts

@@ -0,0 +1,35 @@
+export interface BasicElementOption {
+  /** 是否显示 */
+  show: boolean
+  /** 鼠标样式 */
+  cursor: string
+  /** 元素是否静默（不触发鼠标事件） */
+  silent: boolean
+}
+
+export abstract class BasicElement<T extends BasicElementOption> {
+  option: T
+  constructor(option: T) {
+    this.option = option
+  }
+
+  update(option: Partial<T>) {
+    Object.assign(this.option, option)
+    this._onUpdate(option)
+  }
+
+  protected abstract _onUpdate(option: Partial<T>): void
+
+  /** 鼠标进入回调 */
+  onMouseIn?(): void
+  /** 鼠标离开回调 */
+  onMouseOut?(): void
+  /** 鼠标移动回调 */
+  onMouseMove?(): void
+  /** 鼠标点击回调 */
+  onClick?(): void
+  /** 鼠标右键点击回调 */
+  onRClick?(): void
+  /** 销毁元素 */
+  abstract destroy(): void
+}

package/src/basic/BasicMarker.ts

@@ -0,0 +1,45 @@
+import { BasicElement, type BasicElementOption } from './BasicElement'
+
+export interface BasicMarkerOption extends BasicElementOption {
+  /** 经度 */
+  lon: number
+  /** 纬度 */
+  lat: number
+  /** 海拔 */
+  alt: number
+  /** 图标 */
+  icon?: string
+  /** 宽度 */
+  width: number
+  /** 高度 */
+  height: number
+  /** 横向偏移 */
+  x: number
+  /** 纵向偏移 */
+  y: number
+  /** 旋转角度 */
+  rotation: number
+  img?: HTMLCanvasElement | HTMLImageElement
+}
+
+export abstract class BasicMarker extends BasicElement<BasicMarkerOption> {
+  constructor(option: Partial<BasicMarkerOption> = {}) {
+    super(Object.assign({
+      show: true,
+      cursor: 'pointer',
+      silent: false,
+      lon: 120,
+      lat: 30,
+      alt: 0,
+      width: 64,
+      height: 64,
+      x: 0,
+      y: -32,
+      rotation: 0,
+      icon: BasicMarker.defualtIcon,
+    }, option))
+  }
+
+  /** 默认图标 */
+  static defualtIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA7NJREFUeF7lmwlu3DAMRZ2TtbmNbtHmFr5Nk5O1YCAHiobL5yK5wAwQZPEmPn5+0bLzcjz55+XJ4z+2AWit/TyOg75+DNDp9+vz3n/4oO/nef7ekZylAHrQv3rgkXgIysdKGEsAFATOwXpbAaIUwKLAZxilIMoAtNaoZknu3g/JfPQC9PgSEGkAjqxToG9XdOd5Xqb3FfBglPQ3BGYaQgpAH/AfI2UU9DsXsJXqAYgGIwUhDAAIPjWwEU4vL00VBPjVAsptzwD4K1zwU+qRjFsBGD4TAh4C0Foj2XPGFRqEFfikBrquVHbu67sBKFlwX9wT+LyvkoRXj/pcAP6X4AmG4kEuP/AC4KTvuiAjZ+r7H6ZERB0KBFgFMAAp++d5es5B9XtNaZyHuHt/YVxwUjyD51wfrntnpwift5cDp0zoHBCAbPYVw7KUDgUhlAKkggwAdHDRe4QLDlTPAmTzWBTAg/yR2jdkPy6A0CKJeEMEXovrD/IABHmh2ed8Q+wUFWCmnKNlYCpAGJQJIOobCgQzm1wZWOoJAbBOmnXmaD0L8FRwCICHKQYEMMvflPHletGyE44rB2AGEg1g6hLdAFcBqBqI6RsGAGqZVcVGwCMlUAXAVE62BLr3zONVwSMAZg+AAmmthXqHHgTXPJkKWqWAqAmG+3MO3nEcyDTIgSs3QUoSMhhp5UbMpLbCbNW/pBzrOKQEQi2m0gvQpm8rxcDqryl/of5N4zQBCCdGfUBbv7PuBK/taPAh30ABcPVsloFiaGjwZgaHmcNd/3QsCoDLJKSCBAT4/BmVQgCUeoZUYGSJU0PFeaHS8QBIqWDq8q6XH8aXJT6fG3oXSKN3ndd4YABVKoCLH9xRuHOEsg97gNGiwkYFxgTvFl2rGC/gUoCiApdhwREaO0Y7xhQAqeFAusOqwJVEwNIPeQDg5i73jgLJGl9aAXeWQvXzSbcHTNNZ6mlRRAFC3bulnyoBa1boL0iUv+goTHkpA04pwGhzS/0gs1yuKS0NYIcfVNd9iQnOVIXaTMnTUFi47lcBcK8AWSaovABREry7FQYGLD0JDg14laqWKABoklwQql6CspJWYoKMH6SUsCv48hKYmqTQu4S730FcooChHFwQVk53UiksBaD0CLTpmyfcEfzSEgDa5S8IdwW/BUBXgfZ8QPqHCdesYbn9bSUAKmEe35bgtynACWFb8NsBAOWwNfhbACgQtgd/GwCmT7gl+NsBXGrwPg2KOj533PJGqHKwK8719AD+Aby+uV/6QmnsAAAAAElFTkSuQmCC'
+}

package/src/basic/MapCombine.ts

@@ -6,6 +6,8 @@ import { Polygon, PolygonOption } from "./Polygon";
 import { Polyline, PolylineOption } from "./Polyline";
 import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
 import { Tile3D, Tile3DOption } from "./Tile3D";
+import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
+
 export abstract class MapCombine {
   /* 用于挂载html元素的根节点 */
   readonly htmllayer = document.createElement("div");
@@ -24,6 +26,10 @@ export abstract class MapCombine {
   abstract get zoom(): number
   abstract set zoom(val)
 
+  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
+
+  /** 地图是否存在 */
+  isAlive = true;
   constructor() {
     const { htmllayer } = this
     htmllayer.style.zIndex = "1000";
@@ -33,7 +39,10 @@ export abstract class MapCombine {
     htmllayer.style.left = "0";
     htmllayer.style.top = "0";
     this.menu = new ContextMenu(this);
-    (window as any).map = this
+    (window as any).map = this;
+    setTimeout(() => {
+      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
+    }, 100);
   }
 
   createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
@@ -61,6 +70,7 @@ export abstract class MapCombine {
   abstract geographyTcanvas(p: number[]): number[]
 
   destroy() {
+    this.isAlive = false;
     this.htmllayer.remove()
     this.event.trigger('destroy')
   }

package/src/basic/ReactPopup.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import ReactDOM from "react-dom";
+import { MapCombine } from "./MapCombine";
 
 
 export interface ReactPopupOption {
@@ -7,16 +8,22 @@ export interface ReactPopupOption {
   element: ReactElement;
   /** 层高 */
   zIndex?: number;
+  show?: boolean;
+  name?: string
 }
 
 export class ReactPopup {
   private dom: HTMLDivElement;
   option: ReactPopupOption;
   node: HTMLDivElement;
+  map: MapCombine;
   constructor(map, option: ReactPopupOption = {
     element: <></>,
-    zIndex: 10
+    zIndex: 10,
+    show: true,
+    name: "bubble"
   }) {
+    this.map = map;
     this.dom = document.createElement("div");
     this.option = option;
     const coordinate = map.geographyTcanvas(map.event.geography)
@@ -27,6 +34,22 @@ export class ReactPopup {
     ReactDOM.render(option.element ?? <></>, this.dom);
   }
 
+  get show(): boolean {
+    return this.option.show;
+  }
+
+  set show(val: boolean) {
+    if (val !== this.show) {
+      this.option.show = val;
+      this.dom.style.display = val ? "" : "none";
+    }
+  }
+  showAt(lon, lat) {
+    const coordinate = this.map.geographyTcanvas([lon, lat, 0])
+    this.dom.style.position = "absolute";
+    this.dom.style.top = coordinate[1] + "px";
+    this.dom.style.left = coordinate[0] + "px";
+  }
   destroy() {
     this.dom.remove();
     ReactDOM.unmountComponentAtNode(this.dom);

package/src/openlayer/OpenlayerMap.ts

@@ -1,6 +1,9 @@
 import { MapCombine } from "../basic/MapCombine";
 import { PointOption, Point } from "../basic/Point";
 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 { Projection } from "../utils/Projection";
 import VectorSource from "ol/source/Vector";
@@ -15,19 +18,32 @@ 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";
+
+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
+  vectors: VectorSource;
+  option: IOpenlayerOption;
   offset: number[];
   fov = 0.9272952180016121;
   get cursor(): string {
-    return (this.container).style.cursor
+    return this.container.style.cursor;
   }
   set cursor(val: string) {
-    (this.container).style.cursor = val
+    this.container.style.cursor = val;
   }
   get moveable(): boolean {
     return this.dragPan.getActive();
@@ -36,8 +52,8 @@ export class OpenlayerMap extends MapCombine {
     this.dragPan.setActive(val);
   }
   get center(): number[] {
-    const center = this.viewer.getView().getCenter()!
-    return [Projection.xToLon(center[0]), Projection.yToLat(center[1]), 0]
+    const center = this.viewer.getView().getCenter()!;
+    return [Projection.xToLon(center[0]), Projection.yToLat(center[1]), 0];
   }
   set center(val: number[]) {
     const { viewer } = this;
@@ -45,19 +61,59 @@ export class OpenlayerMap extends MapCombine {
     view.setCenter([Projection.lonToX(val[0]), Projection.latToY(val[1])]);
   }
   get zoom(): number {
-    return this.viewer.getView().getZoom()
+    return this.viewer.getView().getZoom();
   }
   set zoom(val: number) {
     this.viewer.getView().setZoom(val);
   }
 
-  constructor(viewer: Map) {
-    super()
-    this.viewer = viewer
-    this.container = viewer.getViewport() as HTMLDivElement
-    this.container.appendChild(this.htmllayer)
+  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;
-    this.offset = fromLonLat(center)
+    this.offset = fromLonLat(center);
 
     this.vectors = new VectorSource();
     this.viewer.addLayer(
@@ -71,29 +127,29 @@ export class OpenlayerMap extends MapCombine {
       .getArray()
       .find((interaction) => {
         if (interaction instanceof DoubleClickZoom) {
-          interaction.setActive(false)
+          interaction.setActive(false);
         }
         return interaction instanceof DragPan;
       }) as DragPan;
 
-    bindEvent(this)
+    bindEvent(this);
   }
 
   createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option)
-    drawPoint(this, e)
-    return e
+    const e = new Point(this, option);
+    drawPoint(this, e);
+    return e;
   }
 
   createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
-    const e = new Polyline(this, option)
-    drawPolyline(this, e)
-    return e
+    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
+    const e = new Polygon(this, option);
+    drawPolygon(this, e);
+    return e;
   }
 
   // protected _onFrame(): void {
@@ -116,9 +172,8 @@ export class OpenlayerMap extends MapCombine {
     if (pixel) {
       return [pixel[0], pixel[1]];
     } else {
-      return [0, 0]
+      return [0, 0];
     }
-
   }
   spaceTgeography(p: number[]): number[] {
     const { offset } = this;
@@ -144,6 +199,6 @@ export class OpenlayerMap extends MapCombine {
   }
 
   _onDestroy() {
-    this.viewer.dispose()
+    this.viewer.dispose();
   }
-}
+}

package/src/openlayer/openlayer-tile-gcj02-wgs84.js

@@ -0,0 +1,144 @@
+import { Projection, addProjection, addCoordinateTransforms } from "ol/proj";
+
+let projzh = {};
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+  let output = gcj02.fromWGS84(input, opt_output, opt_dimension);
+  return projzh.ll2smerc(output, output, opt_dimension);
+};
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension);
+  return gcj02.toWGS84(output, opt_output, opt_dimension);
+};
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension);
+  output = gcj02.fromWGS84(output, output, opt_dimension);
+  return projzh.ll2smerc(output, output, opt_dimension);
+};
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension);
+  output = gcj02.toWGS84(output, output, opt_dimension);
+  return projzh.ll2smerc(output, output, opt_dimension);
+};
+
+function forEachPoint(func) {
+  return function (input, opt_output, opt_dimension) {
+    const len = input.length;
+    const dimension = opt_dimension ? opt_dimension : 2;
+    let output;
+    if (opt_output) {
+      output = opt_output;
+    } else {
+      if (dimension !== 2) {
+        output = input.slice();
+      } else {
+        output = new Array(len);
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset);
+    }
+    return output;
+  };
+}
+
+let RADIUS = 6378137;
+let MAX_LATITUDE = 85.0511287798;
+let RAD_PER_DEG = Math.PI / 180;
+
+let sphericalMercator = {};
+sphericalMercator.forward = forEachPoint(function (input, output, offset) {
+  let lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
+  let sin = Math.sin(lat * RAD_PER_DEG);
+
+  output[offset] = RADIUS * input[offset] * RAD_PER_DEG;
+  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2;
+});
+
+sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
+  output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
+  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG;
+});
+
+projzh.ll2smerc = sphericalMercator.forward;
+projzh.smerc2ll = sphericalMercator.inverse;
+
+const gcj02 = {};
+const PI = Math.PI;
+const AXIS = 6378245.0;
+// eslint-disable-next-line @typescript-eslint/no-loss-of-precision
+const OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+  const radLat = (wgLat / 180.0) * PI;
+  let magic = Math.sin(radLat);
+  magic = 1 - OFFSET * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI);
+  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI);
+  return [dLon, dLat];
+}
+
+function outOfChina(lon, lat) {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true;
+  }
+  if (lat < 0.8293 || lat > 55.8271) {
+    return true;
+  }
+  return false;
+}
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0;
+  return ret;
+}
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0;
+  return ret;
+}
+
+gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
+  let lng = input[offset];
+  let lat = input[offset + 1];
+  if (!outOfChina(lng, lat)) {
+    let deltaD = delta(lng, lat);
+    lng = lng - deltaD[0];
+    lat = lat - deltaD[1];
+  }
+  output[offset] = lng;
+  output[offset + 1] = lat;
+});
+
+gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
+  let lng = input[offset];
+  let lat = input[offset + 1];
+  if (!outOfChina(lng, lat)) {
+    let deltaD = delta(lng, lat);
+    lng = lng + deltaD[0];
+    lat = lat + deltaD[1];
+  }
+  output[offset] = lng;
+  output[offset + 1] = lat;
+});
+
+const gcj02Extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
+const gcjMecator = new Projection({
+  code: "GCJ-02",
+  extent: gcj02Extent,
+  units: "m",
+});
+addProjection(gcjMecator);
+
+addCoordinateTransforms("EPSG:4326", gcjMecator, projzh.ll2gmerc, projzh.gmerc2ll);
+addCoordinateTransforms("EPSG:3857", gcjMecator, projzh.smerc2gmerc, projzh.gmerc2smerc);
+
+export { gcjMecator };