tg-map-vue3 3.7.0 → 3.7.3

package/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.7.x
 
 - feat: 添加[IconSequence]到[TgPolyline]中
+- ***BREAKING CHANGE***: [MapStyle]简化成纯对象, 方便使用
 
 ## 3.6.x
 
@@ -67,3 +68,4 @@
 [LatLngBounds]: src/map/lat-lng.ts#L157
 [LatLng]: src/map/lat-lng.ts#L26
 [BaiduShape]: src/map/map/overlay/shape.ts#L32
+[MapStyle]: src/map/map/map-options.ts#72

package/dist/src/components/TgMap.vue.d.ts

@@ -202,16 +202,16 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:last-center"?: ((event: LatLng) => any) | undefined;
     onClick?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onDblclick?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
-    onRightclick?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
-    onContextmenu?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onMousedown?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseup?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseout?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseover?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
+    "onCenter-changed"?: ((event: import("../map/event").Tg.Event) => any) | undefined;
+    onRightclick?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
+    onContextmenu?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onDragstart?: ((event: import("../map/event").Tg.Event) => any) | undefined;
     onDrag?: ((event: import("../map/event").Tg.Event) => any) | undefined;
     onDragend?: ((event: import("../map/event").Tg.Event) => any) | undefined;
-    "onCenter-changed"?: ((event: import("../map/event").Tg.Event) => any) | undefined;
     onMousemove?: ((event: import("../map/event").Tg.MouseEvent) => any) | undefined;
     onTilesloaded?: ((event: import("../map/event").Tg.Event) => any) | undefined;
     "onZoom-changed"?: ((event: import("../map/event").Tg.Event) => any) | undefined;

package/dist/src/components/overlays/TgMarker.vue.d.ts

@@ -243,12 +243,12 @@ declare const TgMarker: import("vue").DefineComponent<{
 }>> & {
     onClick?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onDblclick?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
-    onRightclick?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
-    onContextmenu?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onMousedown?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseup?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseout?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onMouseover?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
+    onRightclick?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
+    onContextmenu?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onDragstart?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onDrag?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;
     onDragend?: ((event: import("../../map/event").Tg.MouseEvent) => any) | undefined;

package/dist/src/map/map/baidu-map.d.ts

@@ -43,7 +43,7 @@ export declare class BaiduMap extends AbstractMap {
     setZoom(zoom: number): void;
     setMinZoom(zoom: number): void;
     setMaxZoom(zoom: number): void;
-    setMapStyle(mapStyle: MapStyle): void;
+    setMapStyle(mapStyle?: MapStyle): void;
     setBuildInMapTypeId(id: BuildInMapTypeId): void;
     setMapType(mapType: MapType): void;
     getMapType(): MapType;

package/dist/src/map/map/google-map.d.ts

@@ -41,7 +41,7 @@ export declare class GoogleMap extends AbstractMap {
     setCenter(latlng: LatLng): void;
     setMinZoom(zoom: number): void;
     setMaxZoom(zoom: number): void;
-    setMapStyle(mapStyle: MapStyle): void;
+    setMapStyle(mapStyle?: MapStyle): void;
     setBuildInMapTypeId(id: BuildInMapTypeId): void;
     setMapType(mapType: MapType): void;
     getMapType(): MapType;

package/dist/src/map/map/here-map.d.ts

@@ -40,7 +40,7 @@ export declare class HereMap extends AbstractMap {
     setDoubleClickZoom(enable: boolean): void;
     setMinZoom(zoom: number): void;
     setMaxZoom(zoom: number): void;
-    setMapStyle(mapStyle: MapStyle): void;
+    setMapStyle(mapStyle?: MapStyle): void;
     setBuildInMapTypeId(id: BuildInMapTypeId): void;
     setMapType(mapType: MapType): void;
     getMapType(): MapType;

package/dist/src/map/map/map-options.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="baidumap-web-sdk" />
 /// <reference types="google.maps" />
 import { LatLng } from '../lat-lng';
 import type { BuildInMapTypeId } from './map-type';
@@ -43,14 +44,19 @@ export interface MapOptions {
 export declare namespace MapOptions {
     function create(options?: Partial<MapOptions>): MapOptions;
 }
+/**
+ * ## 本地样式编辑器
+ * - google: https://mapstyle.withgoogle.com/
+ * - baidu: https://lbsyun.baidu.com/apiconsole/custommap
+ *
+ * ## 关于云端样式
+ * - google: mapId只有创建时有效, 之后再更改无效
+ * - baidu: styleId无效, 原因未知
+ */
 export interface MapStyle {
-    toBaidu(): BMap.MapStyleV2;
-    toGoogle(): google.maps.MapTypeStyle[];
-}
-export declare class SimpleMapStyle implements MapStyle {
     baidu: BMap.MapStyleV2;
-    google: google.maps.MapTypeStyle[];
-    constructor(baidu: BMap.MapStyleV2, google: google.maps.MapTypeStyle[]);
-    toBaidu(): BMap.MapStyleV2;
-    toGoogle(): google.maps.MapTypeStyle[];
+    google: {
+        styles?: google.maps.MapTypeStyle[];
+        mapId?: string;
+    };
 }

package/dist/src/map/map/map.d.ts

@@ -116,7 +116,7 @@ export declare abstract class AbstractMap implements CoordTypeSupplier, Tg.Event
     abstract setCenter(latlng: LatLng): void;
     abstract setMinZoom(zoom: number): void;
     abstract setMaxZoom(zoom: number): void;
-    abstract setMapStyle(mapStyle: MapStyle): void;
+    abstract setMapStyle(mapStyle?: MapStyle): void;
     /** setMapType的便利版, 只能够用来设置内置地图类型 */
     abstract setBuildInMapTypeId(id: BuildInMapTypeId): void;
     abstract setMapType(mapType: MapType): void;

package/dist/src/map/map/overlay/marker.d.ts

@@ -5,7 +5,6 @@ import { CoordType, LatLng } from '../../lat-lng';
 import type { UnionBaiduIcon, UnionGoogleIcon } from '../../unions';
 import type { BaiduMap } from '../baidu-map';
 import type { GoogleMap } from '../google-map';
-import type { AbstractMap } from '../map';
 import type { BaiduInfoBox } from './baidu-info-box';
 import { UnionIcon } from './icon';
 import type { BaiduLabelOverlay, GoogleLabelOverlay, LabelOverlay } from './label';
@@ -86,12 +85,13 @@ export interface Marker extends Tg.EventTargetTyped<Marker, MarkerEventMap> {
 export type MarkerOverlay = Marker & Overlay;
 export type BMarker = BMap.Marker & {
     __info_box__?: BaiduInfoBox;
+    __create_by_tg__?: boolean;
 };
 export declare class BaiduMarker extends BaiduOverlay<BMarker> implements Marker {
     /** baidu的Marker不支持读/写clickable等属性, 故只能将创建临时的clickable保存在这个state中 */
     private state;
     static create(this: BaiduMap, options: MarkerOptions): BaiduMarker;
-    constructor(innerOverlay: BMap.Marker, coordType: CoordType, map: AbstractMap, 
+    constructor(innerOverlay: BMap.Marker, coordType: CoordType, map: BaiduMap, 
     /** baidu的Marker不支持读/写clickable等属性, 故只能将创建临时的clickable保存在这个state中 */
     state: {
         clickable: boolean;

package/dist/src/map/map/overlay/overlay.d.ts

@@ -2,6 +2,8 @@ import type { Tg } from '../../event';
 import { type EventTargetDelegate } from '../../event-target';
 import type { CoordType } from '../../lat-lng';
 import type { UnionBaiduOverlay, UnionGoogleOverlay } from '../../unions';
+import type { BaiduMap } from '../baidu-map';
+import type { GoogleMap } from '../google-map';
 import type { AbstractMap } from '../map';
 export interface OverlayOptions {
     /** @default true */
@@ -11,10 +13,10 @@ export declare abstract class Overlay<T = unknown> implements Tg.EventTarget {
     innerOverlay: T;
     /** 用于保存Overlay内部点的坐标, 它的值有可能和map的不同 */
     protected coordType: CoordType;
-    protected map: AbstractMap;
     constructor(innerOverlay: T, 
     /** 用于保存Overlay内部点的坐标, 它的值有可能和map的不同 */
-    coordType: CoordType, map: AbstractMap);
+    coordType: CoordType);
+    protected abstract map: AbstractMap;
     protected abstract createDelegate(): EventTargetDelegate;
     private _delegate;
     private get delegate();
@@ -25,13 +27,15 @@ export declare abstract class Overlay<T = unknown> implements Tg.EventTarget {
     abstract setVisible(visible: boolean): void;
 }
 export declare class GoogleOverlay<T extends UnionGoogleOverlay = UnionGoogleOverlay> extends Overlay<T> {
-    constructor(innerOverlay: T, coordType: CoordType, map: AbstractMap);
+    protected map: GoogleMap;
+    constructor(innerOverlay: T, coordType: CoordType, map: GoogleMap);
     protected createDelegate(): EventTargetDelegate;
     isVisible(): boolean;
     setVisible(visible: boolean): void;
 }
 export declare class BaiduOverlay<T extends UnionBaiduOverlay = UnionBaiduOverlay> extends Overlay<T> {
-    constructor(innerOverlay: T, coordType: CoordType, map: AbstractMap);
+    protected map: BaiduMap;
+    constructor(innerOverlay: T, coordType: CoordType, map: BaiduMap);
     protected createDelegate(): EventTargetDelegate;
     /** 仅限内部使用; 设为private时, 生成的d.ts文件中, 方法返回值会变成any, 故改成了public */
     get overlay(): Required<Pick<UnionBaiduOverlay, "isVisible" | "show" | "hide">>;

package/dist/src/map/map/overlay/polyline.d.ts

@@ -29,6 +29,11 @@ export type PolylineEventMap = {
 };
 export interface PolylineOptions extends NotFillableShapeOptions {
     path: LatLng[];
+    /**
+     * ## 不同行为
+     * - google: 功能正常
+     * - baidu: 百度地图在移除Polyline时, icons不会被移除, 导致错乱, 这里通过复写{@link BaiduPolyline.remove}, 规避了该bug
+     */
     icons?: IconSequence[];
 }
 export interface Polyline extends Tg.EventTargetTyped<Polyline, PolylineEventMap>, NotFillableShape {
@@ -52,6 +57,7 @@ export declare class BaiduPolyline extends BaiduPolyShape<BMap.Polyline> impleme
     protected pathEditedEventType: string;
     getPath(): LatLng[];
     setPath(path: LatLng[]): void;
+    remove(): void;
 }
 /**
  * Google地图的网页版不支持Advanced Polyline(纹理/渐变等效果), 详见: https://issuetracker.google.com/issues/267845944

package/dist/src/map/map/overlay/shape.d.ts

@@ -1,12 +1,18 @@
 import type { CoordType } from '../../lat-lng';
 import type { UnionBaiduShape, UnionGoogleShape } from '../../unions';
 import type { BaiduMap } from '../baidu-map';
+import type { SymbolIcon } from './icon';
 import { BaiduOverlay, GoogleOverlay, type OverlayOptions } from './overlay';
 export interface ShapeOptions extends OverlayOptions {
     clickable?: boolean;
     editable?: boolean;
     strokeColor?: string;
     strokeOpacity?: number;
+    /**
+     * ## 取值范围不同
+     * - google: 最大值约为32, 更大的值不影响线宽
+     * - baidu: 没有上限
+     */
     strokeWeight?: number;
     fillColor?: string;
     fillOpacity?: number;
@@ -27,6 +33,7 @@ export type NotFillableShapeOptions = Omit<ShapeOptions, 'fillColor' | 'fillOpac
 export declare abstract class BaiduShape<T extends UnionBaiduShape> extends BaiduOverlay<T> implements Shape {
     protected state: {
         editable: boolean;
+        symbolIcons?: SymbolIcon[];
     };
     /**
      * baidu地图的透明度属性有如下问题:
@@ -37,6 +44,7 @@ export declare abstract class BaiduShape<T extends UnionBaiduShape> extends Baid
     static OPACITY_DELTA: number;
     constructor(innerOverlay: T, coordType: CoordType, map: BaiduMap, state: {
         editable: boolean;
+        symbolIcons?: SymbolIcon[];
     });
     isEditable(): boolean;
     setEditable(editable: boolean): void;

package/dist/tg-map.js

@@ -2871,9 +2871,9 @@ var j = /* @__PURE__ */ ((i) => (i.auto = "auto", i.none = "none", i.greedy = "g
   i.create = t;
 })(lt || (lt = {}));
 class Er {
-  constructor(t, e, r) {
+  constructor(t, e) {
     c(this, "_delegate");
-    this.innerOverlay = t, this.coordType = e, this.map = r;
+    this.innerOverlay = t, this.coordType = e;
   }
   get delegate() {
     return this._delegate ?? (this._delegate = this.createDelegate().setTarget(this)), this._delegate;
@@ -2890,7 +2890,7 @@ class Er {
 }
 class Mt extends Er {
   constructor(t, e, r) {
-    super(t, e, r);
+    super(t, e), this.map = r;
   }
   createDelegate() {
     return new re(this.innerOverlay, this.map);
@@ -2904,7 +2904,7 @@ class Mt extends Er {
 }
 class Ye extends Er {
   constructor(t, e, r) {
-    super(t, e, r);
+    super(t, e), this.map = r;
   }
   createDelegate() {
     return new ae(this.innerOverlay, this.map);
@@ -3777,7 +3777,7 @@ class Le extends Ye {
       raiseOnDrag: t.crossOnDrag === void 0 ? !0 : t.crossOnDrag,
       draggingCursor: t.cursor
     }, n = new BMap.Marker(t.position.toBaidu(e, t.normalizePositionForBaidu), s);
-    t.zIndex !== void 0 && n.setZIndex(t.zIndex);
+    n.__create_by_tg__ = !0, t.zIndex !== void 0 && n.setZIndex(t.zIndex);
     const a = t.clickable === void 0 ? !0 : t.clickable, h = !!t.draggable;
     return new Le(n, e, this, { clickable: a, draggable: h, zIndex: t.zIndex, normalize: t.normalizePositionForBaidu }).visibleOptionInternal(t.visible);
   }
@@ -3948,8 +3948,8 @@ class At extends St {
     c(this, "pathEditedEventType", "path-edited");
   }
   static create(e) {
-    var n;
-    const r = this.coordType, s = new BMap.Polyline(e.path.map((a) => a.toBaidu(r)), {
+    var n, a;
+    const r = this.coordType, s = new BMap.Polyline(e.path.map((h) => h.toBaidu(r)), {
       enableClicking: e.clickable,
       enableEditing: e.editable,
       strokeColor: e.strokeColor,
@@ -3957,7 +3957,10 @@ class At extends St {
       strokeWeight: e.strokeWeight,
       icons: (n = e.icons) == null ? void 0 : n.map(Ze.toBaidu)
     });
-    return new At(s, r, this, { editable: !!e.editable }).visibleOptionInternal(e.visible);
+    return new At(s, r, this, {
+      editable: !!e.editable,
+      symbolIcons: (a = e.icons) == null ? void 0 : a.map((h) => h.icon)
+    }).visibleOptionInternal(e.visible);
   }
   getPath() {
     return this.innerOverlay.getPath().map((e) => y.fromBaidu(e, this.coordType));
@@ -3965,6 +3968,22 @@ class At extends St {
   setPath(e) {
     this.coordType = this.map.coordType, this.setPathInternal(e.map((r) => r.toBaidu(this.coordType)));
   }
+  remove() {
+    var e;
+    super.remove(), (e = this.state.symbolIcons) != null && e.length && this.map.innerMap.getOverlays().filter((s) => {
+      var o;
+      if (!(s instanceof BMap.Marker))
+        return !1;
+      const n = s;
+      if (n.__create_by_tg__)
+        return !1;
+      const a = n.getIcon();
+      if (!(a instanceof BMap.Symbol))
+        return !1;
+      const h = a;
+      return h.__icon__ ? (o = this.state.symbolIcons) == null ? void 0 : o.includes(h.__icon__) : !1;
+    }).forEach((s) => this.map.innerMap.removeOverlay(s));
+  }
 }
 class Rt extends qe {
   constructor() {
@@ -4203,7 +4222,7 @@ class Gi extends Tt {
       mapType: r.buildInMapTypeId && ((s = this.buildInMapTypeId2BIMT.get(r.buildInMapTypeId)) == null ? void 0 : s.asBaiduMapType()),
       enableMapClick: !1
       // 关闭底图点击功能
-    }), this.map.centerAndZoom(r.center.toBaidu(this.coordType), r.zoom + ee), this.setGestureHandling(r.gestureHandling), r.infoWindowMode === "multi" && console.warn("baidu不支持多个InfoWindow, 可能会出现未知问题"), r.mapStyle && this.map.setMapStyleV2(r.mapStyle.toBaidu()), this.setEventTargetDelegate(new ae(this.map, this)), this.map.addEventListener("addoverlay", (n) => {
+    }), this.map.centerAndZoom(r.center.toBaidu(this.coordType), r.zoom + ee), this.setGestureHandling(r.gestureHandling), r.infoWindowMode === "multi" && console.warn("baidu不支持多个InfoWindow, 可能会出现未知问题"), r.mapStyle && this.map.setMapStyleV2(r.mapStyle.baidu), this.setEventTargetDelegate(new ae(this.map, this)), this.map.addEventListener("addoverlay", (n) => {
       const a = n.target.__info_box__;
       a && (console.debug("add:info-box", a), this.map.addOverlay(a));
     }), this.map.addEventListener("removeoverlay", (n) => {
@@ -4278,7 +4297,7 @@ class Gi extends Tt {
     this.map.setMaxZoom(e + ee);
   }
   setMapStyle(e) {
-    this.map.setMapStyleV2(e.toBaidu());
+    this.map.setMapStyleV2((e == null ? void 0 : e.baidu) ?? { styleJson: [] });
   }
   setBuildInMapTypeId(e) {
     var s;
@@ -4362,7 +4381,7 @@ class Gi extends Tt {
 }
 class Zi extends Tt {
   constructor(e, r) {
-    var n;
+    var n, a;
     super(e);
     c(this, "buildInMapTypeId2BIMT");
     c(this, "googleMapTypeId2BIMT");
@@ -4388,7 +4407,8 @@ class Zi extends Tt {
       gestureHandling: r.gestureHandling,
       minZoom: r.minZoom,
       maxZoom: r.maxZoom,
-      styles: (n = r.mapStyle) == null ? void 0 : n.toGoogle(),
+      styles: (n = r.mapStyle) == null ? void 0 : n.google.styles,
+      mapId: (a = r.mapStyle) == null ? void 0 : a.google.mapId,
       mapTypeId: s == null ? void 0 : s.getGoogleMapTypeId()
     }), this.setEventTargetDelegate(new re(this.map, this));
   }
@@ -4445,7 +4465,10 @@ class Zi extends Tt {
     this.map.setOptions({ maxZoom: e });
   }
   setMapStyle(e) {
-    this.map.setOptions({ styles: e.toGoogle() });
+    this.map.setOptions({
+      styles: e == null ? void 0 : e.google.styles,
+      mapId: e == null ? void 0 : e.google.mapId
+    });
   }
   setBuildInMapTypeId(e) {
     var s;
@@ -5922,7 +5945,7 @@ const Es = /* @__PURE__ */ K(Cs, [["render", ws]]), Ls = w({
     });
   },
   onDestroy() {
-    this.$map.removeOverlay(this.overlay);
+    this.overlay.remove();
   }
 }), Ps = w({
   name: "tg-rectangle",