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

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# @hzab/map-combine@0.4.2
+
+feat: 点线面 height 设置
+fix: openlayer getFromLonLat this 指向修复
+
 # @hzab/map-combine@0.4.1
 
 fix: 点聚合销毁时监听事件解除

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.1",
+  "version": "0.4.2-alpha.1",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/basic/BasicElement.ts

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

package/src/basic/BasicMarker.ts

@@ -1,45 +1,51 @@
-import { BasicElement, type BasicElementOption } from './BasicElement'
+import { BasicElement, type BasicElementOption } from "./BasicElement";
 
 export interface BasicMarkerOption extends BasicElementOption {
   /** 经度 */
-  lon: number
+  lon: number;
   /** 纬度 */
-  lat: number
+  lat: number;
   /** 海拔 */
-  alt: number
+  alt: number;
   /** 图标 */
-  icon?: string
+  icon?: string;
   /** 宽度 */
-  width: number
+  width: number;
   /** 高度 */
-  height: number
+  height: number;
   /** 横向偏移 */
-  x: number
+  x: number;
   /** 纵向偏移 */
-  y: number
+  y: number;
   /** 旋转角度 */
-  rotation: number
-  img?: HTMLCanvasElement | HTMLImageElement
+  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))
+    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'
+  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/BasicMouseHandler.ts

@@ -1,8 +1,8 @@
-export abstract class BasicMouseHandler{
+export abstract class BasicMouseHandler {
   /** 鼠标在屏幕上的坐标 */
-  position = [0, 0]
+  position = [0, 0];
   /** 鼠标在地图上的坐标 */
-  location = [0, 0, 0]
+  location = [0, 0, 0];
   /** 忽略要素,使要素不会拦截鼠标事件 */
-  ignoreElement = false
+  ignoreElement = false;
 }

package/src/basic/Point.ts

@@ -1,173 +1,173 @@
-import Eventful from "zrender/lib/core/Eventful";
-
-import { MapElement, MapElementOption } from "./MapElement";
-import { MapCombine } from "./MapCombine";
-
-export interface PointOption<K> extends MapElementOption {
-  show: boolean;
-  cursor: string;
-  coordinates?: number[];
-  src: string;
-  center: number[];
-  size: number[];
-  rotation: number;
-  editable: boolean;
-  userdata: K;
-  silent: boolean;
-  height: number;
-}
-
-export class Point<K = undefined> extends MapElement<PointOption<K>> {
-  type = "Point";
-  event = new Eventful<{
-    "data-loaded": () => void;
-    "data-update": () => void;
-    "pointer-in": () => void;
-    "pointer-out": () => void;
-    "left-click": () => void;
-    "right-click": () => void;
-    update: (keys: Set<string>) => void;
-    destroy: () => void;
-  }>();
-
-  get userdata() {
-    return this._option.userdata;
-  }
-
-  get cursor() {
-    return this._option.cursor;
-  }
-
-  get show() {
-    return this._option.show;
-  }
-
-  set show(val) {
-    if (this._option.show != val) {
-      this._option.show = val;
-      this._update("show");
-    }
-  }
-
-  get silent() {
-    return this._option.silent;
-  }
-
-  set silent(val) {
-    if (this._option.silent != val) {
-      this._option.silent = val;
-      this._update("silent");
-    }
-  }
-
-  get editable() {
-    return this._option.editable;
-  }
-
-  set editable(val) {
-    if (this._option.editable != val) {
-      this._option.editable = val;
-      this._update("editable");
-    }
-  }
-
-  get coordinates() {
-    return this._option.coordinates;
-  }
-
-  set coordinates(val) {
-    if (this._option.coordinates != val) {
-      this._option.coordinates = val;
-      this._update("coordinates");
-    }
-  }
-
-  get src() {
-    return this._option.src;
-  }
-
-  set src(val) {
-    if (this._option.src != val) {
-      this._option.src = val;
-      this._update("src");
-    }
-  }
-
-  get size() {
-    return this._option.size;
-  }
-
-  set size(val) {
-    if (this._option.size != val) {
-      this._option.size = val;
-      this._update("size");
-    }
-  }
-  get center() {
-    return this._option.center;
-  }
-
-  set center(val) {
-    if (this._option.center != val) {
-      this._option.center = val;
-      this._update("center");
-    }
-  }
-
-  get height() {
-    return this._option.height;
-  }
-
-  set height(val) {
-    if (this._option.height != val) {
-      this._option.height = val;
-      this._update("height");
-    }
-  }
-
-  get rotation() {
-    return this._option.rotation;
-  }
-
-  set rotation(val) {
-    if (this._option.rotation != val) {
-      this._option.rotation = val;
-      this._update("rotation");
-    }
-  }
-
-  constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
-    super(map, Object.assign({ ...Point.option }, option));
-  }
-
-  static option: PointOption<undefined> = {
-    name: "点",
-    show: true,
-    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC",
-    center: [0.5, 0.5],
-    editable: false,
-    size: [16, 16],
-    rotation: 0,
-    cursor: "pointer",
-    userdata: undefined,
-    silent: false,
-    height: 0,
-  };
-
-  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;
-      });
-    }
-  }
-
-  protected _onDestroy(): void {
-    this.event.trigger("destroy");
-  }
-}
+import Eventful from "zrender/lib/core/Eventful";
+
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
+
+export interface PointOption<K> extends MapElementOption {
+  show: boolean;
+  cursor: string;
+  coordinates?: number[];
+  src: string;
+  center: number[];
+  size: number[];
+  rotation: number;
+  editable: boolean;
+  userdata: K;
+  silent: boolean;
+  height: number;
+}
+
+export class Point<K = undefined> extends MapElement<PointOption<K>> {
+  type = "Point";
+  event = new Eventful<{
+    "data-loaded": () => void;
+    "data-update": () => void;
+    "pointer-in": () => void;
+    "pointer-out": () => void;
+    "left-click": () => void;
+    "right-click": () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+  }>();
+
+  get userdata() {
+    return this._option.userdata;
+  }
+
+  get cursor() {
+    return this._option.cursor;
+  }
+
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val;
+      this._update("show");
+    }
+  }
+
+  get silent() {
+    return this._option.silent;
+  }
+
+  set silent(val) {
+    if (this._option.silent != val) {
+      this._option.silent = val;
+      this._update("silent");
+    }
+  }
+
+  get editable() {
+    return this._option.editable;
+  }
+
+  set editable(val) {
+    if (this._option.editable != val) {
+      this._option.editable = val;
+      this._update("editable");
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates;
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val;
+      this._update("coordinates");
+    }
+  }
+
+  get src() {
+    return this._option.src;
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val;
+      this._update("src");
+    }
+  }
+
+  get size() {
+    return this._option.size;
+  }
+
+  set size(val) {
+    if (this._option.size != val) {
+      this._option.size = val;
+      this._update("size");
+    }
+  }
+  get center() {
+    return this._option.center;
+  }
+
+  set center(val) {
+    if (this._option.center != val) {
+      this._option.center = val;
+      this._update("center");
+    }
+  }
+
+  get height() {
+    return this._option.height;
+  }
+
+  set height(val) {
+    if (this._option.height != val) {
+      this._option.height = val;
+      this._update("height");
+    }
+  }
+
+  get rotation() {
+    return this._option.rotation;
+  }
+
+  set rotation(val) {
+    if (this._option.rotation != val) {
+      this._option.rotation = val;
+      this._update("rotation");
+    }
+  }
+
+  constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
+    super(map, Object.assign({ ...Point.option }, option));
+  }
+
+  static option: PointOption<undefined> = {
+    name: "点",
+    show: true,
+    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC",
+    center: [0.5, 0.5],
+    editable: false,
+    size: [16, 16],
+    rotation: 0,
+    cursor: "pointer",
+    userdata: undefined,
+    silent: false,
+    height: 3,
+  };
+
+  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;
+      });
+    }
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger("destroy");
+  }
+}

package/src/basic/PointAggregation.tsx

@@ -171,6 +171,7 @@ export class PointAggregation {
 
   onAfterViewChange(): void {
     const { _map } = this;
+    // 限制最大缩放层级
     const zoom = Math.min(Math.round(_map.zoom * 4) / 4, this._option.maxZoomLevel ?? 17);
     if (zoom !== this._current) {
       this._turnoff();