@tianditu/web-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Demo Macro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# @tianditu/web-components
+
+![npm version](https://img.shields.io/npm/v/@tianditu/web-components)
+![npm downloads](https://img.shields.io/npm/dw/@tianditu/web-components)
+![npm license](https://img.shields.io/npm/l/@tianditu/web-components)
+
+> 用标准 Web Components 写天地图，任何框架或纯 HTML 均可使用。
+> 基于 Lit 的自定义元素与 Vue 适配层共享同一份 core 定义：attribute 带类型化转换器，事件以 `tdt-` 前缀转发，覆盖物元素嵌套即挂载，容器元素就近收编子级。
+
+## 特性
+
+- 🖥️ **框架无关** — 标准自定义元素，任何框架或纯 HTML 均可使用
+- 🧩 **基于 Lit** — 响应式 attribute，坐标与集合带类型化转换器
+- 📦 **同源内核** — 与 Vue 适配层共享 @tianditu/core 的挂载/同步/卸载编排
+- 🏷️ **声明式子级** — 覆盖物元素写在 `<tdt-map>` 内部即自动挂载
+
+## 安装
+
+```bash
+# npm
+$ npm install @tianditu/web-components
+
+# yarn
+$ yarn add @tianditu/web-components
+
+# pnpm
+$ pnpm add @tianditu/web-components
+```
+
+## 快速开始
+
+```html
+<script type="module">
+  import { registerComponents } from "@tianditu/web-components";
+
+  registerComponents();
+</script>
+
+<tdt-map tk="你的浏览器端密钥" center="116.404,39.915" zoom="12" style="width:100vw;height:100vh">
+  <tdt-marker lnglat="116.404,39.915">
+    <tdt-info-window open>
+      <div>天安门</div>
+    </tdt-info-window>
+  </tdt-marker>
+  <tdt-polyline path="116.38,39.9;116.42,39.92" color="#2563eb" weight="4"></tdt-polyline>
+  <tdt-control-zoom position="bottomright"></tdt-control-zoom>
+</tdt-map>
+```
+
+## 元素
+
+| 元素              | 官方类         | 说明                                                                                                                                   |
+| ----------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `tdt-map`         | `T.Map`        | `tk`、`center`（"lng,lat"）、`locate`（定位方式："geolocation" / "ip" / "auto"，`locate` 空值即 auto）、`zoom`；事件以 `tdt-` 前缀派发 |
+| `tdt-info-window` | `T.InfoWindow` | `open`、`lnglat`、`max-width` 等；嵌套在覆盖物内由宿主打开                                                                             |
+
+### 覆盖物
+
+| 元素                   | 官方类                    | 说明                                                                        |
+| ---------------------- | ------------------------- | --------------------------------------------------------------------------- |
+| `tdt-marker`           | `T.Marker`                | `lnglat`、`icon`（JSON）、`draggable`、`title`、`z-index-offset`、`opacity` |
+| `tdt-polyline`         | `T.Polyline`              | `path`（"lng,lat;…"）、`color`、`weight`、`opacity`、`line-style`           |
+| `tdt-polygon`          | `T.Polygon`               | 折线 attribute + `fill-color`、`fill-opacity`                               |
+| `tdt-rectangle`        | `T.Rectangle`             | `bounds`（"swLng,swLat;neLng,neLat"）、线与填充 attribute                   |
+| `tdt-circle`           | `T.Circle`                | `center`、`radius`、线与填充 attribute                                      |
+| `tdt-label`            | `T.Label`                 | `text`、`lnglat`、`font-color`、`font-size`、`background-color`             |
+| `tdt-cloud-marker`     | `T.CloudMarkerCollection` | `lnglats`（"lng,lat;…"）、`styles`（JSON）                                  |
+| `tdt-marker-clusterer` | `T.MarkerClusterer`       | 收编子级标注；`grid-size`、`max-zoom`                                       |
+| `tdt-layer-group`      | `T.LayerGroup`            | 收编子级覆盖物                                                              |
+
+### 控件
+
+`tdt-control-zoom`、`tdt-control-scale`、`tdt-control-copyright`、`tdt-control-overview-map`、`tdt-control-map-type` — attribute 随官方控件选项（`position`、`zoom-in-text`、`is-open` 等）。
+
+### 图层
+
+`tdt-tile-layer`、`tdt-tile-layer-wms`、`tdt-tile-layer-tdt`、`tdt-gridline-layer` — `url`（瓦片图层必填）、`opacity`、`z-index`、`bounds`；事件以 `tdt-` 前缀派发（`tdt-load`、`tdt-tileerror` 等）。
+
+### 鼠标工具
+
+`tdt-polyline-tool`、`tdt-polygon-tool`、`tdt-circle-tool`、`tdt-rectangle-tool`、`tdt-mark-tool`、`tdt-paint-brush-tool`、`tdt-coordinate-pickup` — 经布尔 `active` attribute 开关（presence 语义：框架绑定走 property，attribute 不存在即关闭）。
+
+### 标绘
+
+22 个标绘实体（`tdt-arc`、`tdt-bezier-curve2`、`tdt-bezier-curve3`、`tdt-bezier-curve-arrow`、`tdt-bezier-curve-n`、`tdt-cardinal-curve`、`tdt-cardinal-curve-arrow`、`tdt-parallel-search`、`tdt-polyline-arrow`、`tdt-sector-search`、`tdt-close-curve`、`tdt-curve-flag`、`tdt-diagonal-arrow`、`tdt-double-arrow`、`tdt-dove-tail-diagonal-arrow`、`tdt-dove-tail-straight-arrow`、`tdt-gathering-place`、`tdt-rect-flag`、`tdt-round-rect`、`tdt-sector`、`tdt-straight-arrow`、`tdt-triangle-flag`）共用 `path` attribute 与线、填充样式；23 个标绘工具（实体 tag 加 `-tool` 后缀，如 `tdt-arc-tool`、`tdt-hand-drawing-tool`）共用 `active` 开关、`style`（JSON）与 JS-only 的 `layers` property。
+
+坐标类 attribute 用 `"lng,lat"` 逗号分隔；坐标集合用 `";"` 分隔；纯数据对象用 JSON。SDK 实例（图层组、地图类型等）为 JS-only property，无对应 attribute。
+
+## 相关包
+
+- [@tianditu/core](https://www.npmjs.com/package/@tianditu/core) — 框架无关内核（自动安装）
+- [@tianditu/vue](https://www.npmjs.com/package/@tianditu/vue) — Vue 3 组件适配层
+- [@tianditu/services](https://www.npmjs.com/package/@tianditu/services) — 类型化 REST 服务客户端
+
+## 许可
+
+- [MIT](LICENSE) &copy; [Demo Macro](https://www.demomacro.com/)

package/dist/index.d.mts

@@ -0,0 +1,313 @@
+import { OverlayCollector } from "@tianditu/core";
+import { LitElement, PropertyValues } from "lit";
+//#region src/tdt-map.d.ts
+/**
+ * 地图容器。light DOM 渲染（createRenderRoot 返回自身）：SDK 直接持有
+ * 容器并挂载控件、覆盖物与窗体，shadow 边界会隔离 SDK 的样式与 DOM 操作。
+ *
+ * 子组件经 closest("tdt-map") 取容器、经 whenReady() 等待 SDK 就绪；
+ * 地图事件以 `tdt-<官方事件名>` 的 CustomEvent 转发（detail 为 SDK 原生
+ * 事件对象），避免与标准 DOM 事件同名混淆。
+ */
+/** "lng,lat" 字符串 → [lng, lat] 数组；attribute 不传时为 undefined（回退默认中心） */
+declare function lnglatConverter(value: string | null): [number, number] | undefined;
+/**
+ * 定位方式：attribute 不存在即关闭；空值（presence 写法 `locate`）或
+ * "auto" 为自动模式（浏览器定位 → IP 定位），亦可显式写 "geolocation"/"ip"。
+ */
+type LocateMode = boolean | "geolocation" | "ip" | "auto";
+declare function locateConverter(value: string | null): LocateMode;
+declare class TdtMapElement extends LitElement {
+  tk: string;
+  center?: [number, number];
+  locate: LocateMode;
+  zoom: number;
+  minZoom?: number;
+  maxZoom?: number;
+  private session?;
+  private ready?;
+  private unbindEvents?;
+  /** 当前地图实例；SDK 就绪前为 undefined */
+  get map(): T.Map | undefined;
+  static properties: {
+    tk: {
+      type: StringConstructor;
+    };
+    center: {
+      converter: typeof lnglatConverter;
+    };
+    locate: {
+      converter: typeof locateConverter;
+    };
+    zoom: {
+      type: NumberConstructor;
+    };
+    minZoom: {
+      type: NumberConstructor;
+    };
+    maxZoom: {
+      type: NumberConstructor;
+    };
+  };
+  createRenderRoot(): HTMLElement;
+  /** SDK 与地图实例就绪的 promise；子组件挂载前等待 */
+  whenReady(): Promise<T.Map>;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changed: PropertyValues): void;
+  render(): import("lit").TemplateResult<1>;
+}
+//#endregion
+//#region src/factory.d.ts
+/** 覆盖物元素类（具名类型：d.ts 不展开工厂内的匿名类实现） */
+interface OverlayElementClass<O> {
+  new (): LitElement & {
+    /** SDK 实例就绪 promise（容器收编子级、InfoWindow 宿主等待） */
+    whenInstance(): Promise<O>;
+    /** 当前 SDK 实例；未挂载时 undefined */
+    readonly instance: O | undefined;
+    /** 收集容器时把实例适配为 OverlayCollector */
+    collectorFor(instance: O): OverlayCollector;
+  };
+}
+/** 工具元素类（具名类型） */
+interface ToolElementClass {
+  new (): LitElement & {
+    /** 受控开关：attribute 存在即开启 */
+    active: boolean;
+    /** SDK 工具实例就绪 promise */
+    whenInstance(): Promise<unknown>;
+  };
+}
+/** 控件元素类（具名类型） */
+interface ControlElementClass {
+  new (): LitElement & {
+    /** 当前 SDK 控件实例；未挂载时 undefined */
+    readonly instance: T.Control | undefined;
+  };
+}
+/** 图层元素类（具名类型） */
+interface LayerElementClass {
+  new (): LitElement & {
+    /** SDK 图层实例就绪 promise */
+    whenInstance(): Promise<T.TileLayer>;
+    /** 当前 SDK 图层实例；未挂载时 undefined */
+    readonly instance: T.TileLayer | undefined;
+  };
+}
+//#endregion
+//#region src/overlays.d.ts
+/**
+ * 覆盖物元素：定义（props/构造/sync/事件表）见 core defs，元素只承载
+ * attribute 声明与生命周期桥接。attribute 命名随官方 Options 字段
+ * （kebab-case）；坐标 "lng,lat"、集合 "lng,lat;…"、对象 JSON。
+ */
+declare const TdtMarkerElement: OverlayElementClass<T.Marker>;
+declare const TdtPolylineElement: OverlayElementClass<T.Polyline>;
+declare const TdtPolygonElement: OverlayElementClass<T.Polygon>;
+declare const TdtRectangleElement: OverlayElementClass<T.Rectangle>;
+declare const TdtLabelElement: OverlayElementClass<T.Label>;
+declare const TdtCircleElement: OverlayElementClass<T.Circle>;
+declare const TdtCloudMarkerElement: OverlayElementClass<T.CloudMarkerCollection>;
+/** 点聚合容器：子级 tdt-marker 经 DOM 就近收编加入聚合而非直接上屏 */
+declare const TdtMarkerClustererElement: OverlayElementClass<T.MarkerClusterer>;
+/** 图层组容器：子级覆盖物加入容器，容器卸载时随 clearLayers 清空 */
+declare const TdtLayerGroupElement: OverlayElementClass<T.LayerGroup>;
+//#endregion
+//#region src/controls.d.ts
+/**
+ * 控件元素：定义（props/构造）见 core defs，attribute 声明与 addControl/
+ * removeControl 生命周期编排已在 factory 的 makeControlElement。
+ */
+declare const TdtControlZoomElement: ControlElementClass;
+declare const TdtControlScaleElement: ControlElementClass;
+declare const TdtControlCopyrightElement: ControlElementClass;
+declare const TdtControlOverviewMapElement: ControlElementClass;
+declare const TdtControlMapTypeElement: ControlElementClass;
+//#endregion
+//#region src/layers.d.ts
+/**
+ * 瓦片图层元素：定义（props/构造/sync/事件表）见 core defs，元素只承载
+ * attribute 声明与生命周期桥接。url 为必填 attribute；bounds 用
+ * "swLng,swLat;neLng,neLat" 形态；格网图层的样式对象用 JSON。
+ */
+declare const TdtTileLayerElement: LayerElementClass;
+declare const TdtTileLayerWmsElement: LayerElementClass;
+declare const TdtTileLayerTdtElement: LayerElementClass;
+declare const TdtGridlineLayerElement: LayerElementClass;
+//#endregion
+//#region src/plot-entities.d.ts
+/**
+ * 标绘覆盖物元素：定义（props/构造/sync）见 core defs，vue/wc 共享。
+ * attribute path 形如 "lng,lat;lng,lat"；样式 props 仅构造时生效。
+ */
+declare const TdtArcElement: OverlayElementClass<T.Arc>;
+declare const TdtBezierCurve2Element: OverlayElementClass<T.BezierCurve2>;
+declare const TdtBezierCurve3Element: OverlayElementClass<T.BezierCurve3>;
+declare const TdtBezierCurveArrowElement: OverlayElementClass<T.BezierCurveArrow>;
+declare const TdtBezierCurveNElement: OverlayElementClass<T.BezierCurveN>;
+declare const TdtCardinalCurveElement: OverlayElementClass<T.CardinalCurve>;
+declare const TdtCardinalCurveArrowElement: OverlayElementClass<T.CardinalCurveArrow>;
+declare const TdtParallelSearchElement: OverlayElementClass<T.ParallelSearch>;
+declare const TdtPolylineArrowElement: OverlayElementClass<T.PolylineArrow>;
+declare const TdtSectorSearchElement: OverlayElementClass<T.SectorSearch>;
+declare const TdtCloseCurveElement: OverlayElementClass<T.CloseCurve>;
+declare const TdtCurveFlagElement: OverlayElementClass<T.CurveFlag>;
+declare const TdtDiagonalArrowElement: OverlayElementClass<T.DiagonalArrow>;
+declare const TdtDoubleArrowElement: OverlayElementClass<T.DoubleArrow>;
+declare const TdtDoveTailDiagonalArrowElement: OverlayElementClass<T.DoveTailDiagonalArrow>;
+declare const TdtDoveTailStraightArrowElement: OverlayElementClass<T.DoveTailStraightArrow>;
+declare const TdtGatheringPlaceElement: OverlayElementClass<T.GatheringPlace>;
+declare const TdtRectFlagElement: OverlayElementClass<T.RectFlag>;
+declare const TdtRoundRectElement: OverlayElementClass<T.RoundRect>;
+declare const TdtSectorElement: OverlayElementClass<T.Sector>;
+declare const TdtStraightArrowElement: OverlayElementClass<T.StraightArrow>;
+declare const TdtTriangleFlagElement: OverlayElementClass<T.TriangleFlag>;
+//#endregion
+//#region src/plot-tools.d.ts
+/**
+ * 标绘工具元素族：定义见 core defs，vue/wc 共享。active attribute
+ * （presence 语义）受控开关，事件以 `tdt-<官方事件名>` 转发（如 tdt-dbclick）。
+ */
+declare const TdtArcToolElement: ToolElementClass;
+declare const TdtBezierCurve2ToolElement: ToolElementClass;
+declare const TdtBezierCurve3ToolElement: ToolElementClass;
+declare const TdtBezierCurveArrowToolElement: ToolElementClass;
+declare const TdtBezierCurveNToolElement: ToolElementClass;
+declare const TdtCardinalCurveArrowToolElement: ToolElementClass;
+declare const TdtCardinalCurveToolElement: ToolElementClass;
+declare const TdtCloseCurveToolElement: ToolElementClass;
+declare const TdtCurveFlagToolElement: ToolElementClass;
+declare const TdtDiagonalArrowToolElement: ToolElementClass;
+declare const TdtDoubleArrowToolElement: ToolElementClass;
+declare const TdtDoveTailDiagonalArrowToolElement: ToolElementClass;
+declare const TdtDoveTailStraightArrowToolElement: ToolElementClass;
+declare const TdtGatheringPlaceToolElement: ToolElementClass;
+declare const TdtHandDrawingToolElement: ToolElementClass;
+declare const TdtParallelSearchToolElement: ToolElementClass;
+declare const TdtPolylineArrowToolElement: ToolElementClass;
+declare const TdtRectFlagToolElement: ToolElementClass;
+declare const TdtRoundRectToolElement: ToolElementClass;
+declare const TdtSectorSearchToolElement: ToolElementClass;
+declare const TdtSectorToolElement: ToolElementClass;
+declare const TdtStraightArrowToolElement: ToolElementClass;
+declare const TdtTriangleFlagToolElement: ToolElementClass;
+//#endregion
+//#region src/info-window.d.ts
+/**
+ * 信息窗元素。内容为元素自身的子节点（light DOM），经 MutationObserver
+ * 克隆进窗体容器：SDK 在 open 时会搬移内容容器，克隆可保持元素内原始
+ * 子节点稳定，且避免 observer 被搬移触发误清窗口（vue 适配层同款方案）。
+ * 独立使用时经 lnglat 属性由地图打开；嵌套在覆盖物元素内时由宿主打开。
+ * attribute 随官方 InfoWindowOptions 字段（kebab-case）。
+ */
+/** "x,y" 属性 → T.Point */
+declare function pointConverter(value: string | null): T.Point | undefined;
+declare class TdtInfoWindowElement extends LitElement {
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+      reflect: boolean;
+    };
+    lnglat: {
+      converter: typeof lnglatConverter;
+    };
+    minWidth: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    maxWidth: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    maxHeight: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    autoPan: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    closeButton: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    offset: {
+      converter: typeof pointConverter;
+    };
+    autoPanPadding: {
+      converter: typeof pointConverter;
+      attribute: string;
+    };
+    closeOnClick: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+  };
+  open: boolean;
+  lnglat?: [number, number];
+  minWidth?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  autoPan?: boolean;
+  closeButton?: boolean;
+  offset?: T.Point;
+  autoPanPadding?: T.Point;
+  closeOnClick?: boolean;
+  private handle?;
+  private observer?;
+  private map?;
+  /** 就近解析到的覆盖物宿主（如 tdt-marker）；无宿主时为 undefined */
+  private host?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** 把元素子节点克隆进窗体容器 */
+  private syncContent;
+  private syncOpen;
+  protected updated(): void;
+}
+//#endregion
+//#region src/tools.d.ts
+/**
+ * 鼠标工具元素：定义见 core defs；active attribute（presence 语义）受控
+ * 开关。事件以 `tdt-<官方事件名>` 转发（如 tdt-draw）。
+ */
+declare const TdtPolylineToolElement: ToolElementClass;
+declare const TdtPolygonToolElement: ToolElementClass;
+declare const TdtCircleToolElement: ToolElementClass;
+declare const TdtRectangleToolElement: ToolElementClass;
+declare const TdtMarkToolElement: ToolElementClass;
+declare const TdtPaintBrushToolElement: ToolElementClass;
+/**
+ * 坐标拾取元素（官方 CoordinatePickup）：非 Mousetool 体系，以
+ * addEvent/removeEvent 开关；官方 Options.callback 转写为 tdt-pick 事件
+ * （SDK 点击地图即调用 callback，未设置时点击会抛错，故构造必传）。
+ */
+declare class TdtCoordinatePickupElement extends LitElement {
+  static properties: {
+    active: {
+      type: BooleanConstructor;
+      reflect: boolean;
+    };
+  };
+  /** 受控开关：attribute 存在即开启 */
+  active: boolean;
+  private pickup?;
+  private callback;
+  connectedCallback(): void;
+  updated(changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  render(): import("lit").TemplateResult<1>;
+}
+//#endregion
+//#region src/index.d.ts
+/** tag → 元素类注册表（registerComponents 与副作用注册共用） */
+declare const ELEMENTS: Array<[string, CustomElementConstructor]>;
+/**
+ * 注册全部自定义元素；已注册的 tag 自动跳过（重复 import 安全）。
+ * SSR/Node 环境无 customElements，静默跳过（客户端水合后再调用）。
+ */
+declare function registerComponents(): void;
+//#endregion
+export { ELEMENTS, TdtArcElement, TdtArcToolElement, TdtBezierCurve2Element, TdtBezierCurve2ToolElement, TdtBezierCurve3Element, TdtBezierCurve3ToolElement, TdtBezierCurveArrowElement, TdtBezierCurveArrowToolElement, TdtBezierCurveNElement, TdtBezierCurveNToolElement, TdtCardinalCurveArrowElement, TdtCardinalCurveArrowToolElement, TdtCardinalCurveElement, TdtCardinalCurveToolElement, TdtCircleElement, TdtCircleToolElement, TdtCloseCurveElement, TdtCloseCurveToolElement, TdtCloudMarkerElement, TdtControlCopyrightElement, TdtControlMapTypeElement, TdtControlOverviewMapElement, TdtControlScaleElement, TdtControlZoomElement, TdtCoordinatePickupElement, TdtCurveFlagElement, TdtCurveFlagToolElement, TdtDiagonalArrowElement, TdtDiagonalArrowToolElement, TdtDoubleArrowElement, TdtDoubleArrowToolElement, TdtDoveTailDiagonalArrowElement, TdtDoveTailDiagonalArrowToolElement, TdtDoveTailStraightArrowElement, TdtDoveTailStraightArrowToolElement, TdtGatheringPlaceElement, TdtGatheringPlaceToolElement, TdtGridlineLayerElement, TdtHandDrawingToolElement, TdtInfoWindowElement, TdtLabelElement, TdtLayerGroupElement, TdtMapElement, TdtMarkToolElement, TdtMarkerClustererElement, TdtMarkerElement, TdtPaintBrushToolElement, TdtParallelSearchElement, TdtParallelSearchToolElement, TdtPolygonElement, TdtPolygonToolElement, TdtPolylineArrowElement, TdtPolylineArrowToolElement, TdtPolylineElement, TdtPolylineToolElement, TdtRectFlagElement, TdtRectFlagToolElement, TdtRectangleElement, TdtRectangleToolElement, TdtRoundRectElement, TdtRoundRectToolElement, TdtSectorElement, TdtSectorSearchElement, TdtSectorSearchToolElement, TdtSectorToolElement, TdtStraightArrowElement, TdtStraightArrowToolElement, TdtTileLayerElement, TdtTileLayerTdtElement, TdtTileLayerWmsElement, TdtTriangleFlagElement, TdtTriangleFlagToolElement, lnglatConverter, registerComponents };

package/dist/index.mjs

@@ -0,0 +1,771 @@
+import { MAP_EVENT_NAMES, arcDef, arcToolDef, bezierCurve2Def, bezierCurve2ToolDef, bezierCurve3Def, bezierCurve3ToolDef, bezierCurveArrowDef, bezierCurveArrowToolDef, bezierCurveNDef, bezierCurveNToolDef, bindEventNames, cardinalCurveArrowDef, cardinalCurveArrowToolDef, cardinalCurveDef, cardinalCurveToolDef, circleDef, circleToolDef, closeCurveDef, closeCurveToolDef, cloudMarkerDef, compact, copyrightDef, createInfoWindow, createMapSession, createWhenReady, curveFlagDef, curveFlagToolDef, diagonalArrowDef, diagonalArrowToolDef, doubleArrowDef, doubleArrowToolDef, doveTailDiagonalArrowDef, doveTailDiagonalArrowToolDef, doveTailStraightArrowDef, doveTailStraightArrowToolDef, gatheringPlaceDef, gatheringPlaceToolDef, gridlineLayerDef, handDrawingToolDef, labelDef, layerGroupDef, mapTypeDef, markToolDef, markerClustererDef, markerDef, mountOverlay, mountTileLayer, mountTool, overviewMapDef, paintBrushToolDef, parallelSearchDef, parallelSearchToolDef, parseLnglat, polygonDef, polygonToolDef, polylineArrowDef, polylineArrowToolDef, polylineDef, polylineToolDef, rectFlagDef, rectFlagToolDef, rectangleDef, rectangleToolDef, roundRectDef, roundRectToolDef, scaleDef, sectorDef, sectorSearchDef, sectorSearchToolDef, sectorToolDef, straightArrowDef, straightArrowToolDef, tileLayerDef, tileLayerTdtDef, tileLayerWmsDef, toLngLat, triangleFlagDef, triangleFlagToolDef, zoomDef } from "@tianditu/core";
+import { LitElement, html } from "lit";
+//#region src/context.ts
+/** SDK 事件 → `tdt-<name>` CustomEvent（detail 为原生事件对象） */
+function dispatchTdtEvent(el) {
+	return (name, event) => {
+		el.dispatchEvent(new CustomEvent(`tdt-${name}`, {
+			detail: event,
+			bubbles: true,
+			composed: true
+		}));
+	};
+}
+/** 就近查找地图容器 */
+function findMap(el) {
+	return el.closest("tdt-map");
+}
+/**
+* 就近解析覆盖物收集容器：layer-group 优先于 marker-clusterer
+* （与 Vue 适配层的「内层容器就近收编」一致）。无容器时 undefined。
+*/
+function resolveCollector(el) {
+	const source = el.closest("tdt-layer-group") ?? el.closest("tdt-marker-clusterer");
+	if (!source) return Promise.resolve(void 0);
+	return customElements.whenDefined(source.localName).then(async () => {
+		const host = source;
+		const instance = await host.whenInstance();
+		return host.collectorFor(instance);
+	});
+}
+/** 向上查找最近的覆盖物宿主（InfoWindow 嵌套在覆盖物元素内时由宿主打开） */
+function resolveHostOverlay(el) {
+	let current = el.parentElement;
+	while (current) {
+		if (typeof current.whenInstance === "function") {
+			const host = current;
+			return customElements.whenDefined(host.localName).then(() => host.whenInstance());
+		}
+		current = current.parentElement;
+	}
+	return Promise.resolve(void 0);
+}
+//#endregion
+//#region src/factory.ts
+/** defs 中立 props → lit reactive properties */
+function litProperties(props) {
+	const out = {};
+	for (const key in props) {
+		const def = props[key];
+		if (!def.attribute) {
+			out[key] = {
+				type: Object,
+				attribute: false
+			};
+			continue;
+		}
+		out[key] = {
+			type: def.type ?? Object,
+			attribute: def.attribute,
+			...def.converter ? { converter: (value) => value == null ? void 0 : def.converter(value) } : {},
+			...def.reflect ? { reflect: true } : {}
+		};
+	}
+	return out;
+}
+/** 从元素自身的 property 值收集 defs 形状的 props */
+function collectProps(el, props) {
+	const out = {};
+	for (const key in props) out[key] = el[key];
+	return out;
+}
+/** 构造期默认值落位：attribute 未提供时 defs 的 default 生效 */
+function applyDefaults(el, props) {
+	for (const key in props) {
+		const { default: fallback } = props[key];
+		if (fallback !== void 0) el[key] = typeof fallback === "function" ? fallback() : fallback;
+	}
+}
+/**
+* lit property 变更 diff → sync setter。lit 无响应式追踪（core 的
+* createPropsSync 面向响应式 getter，仅 vue 适配层使用），在 updated
+* 里手动驱动：变更的 key 即 diff 结果，旧值取 lit 记录的上一帧。
+*/
+function applySyncDiff(instance, sync, changed, props) {
+	for (const [key, prev] of changed) {
+		const apply = sync[key];
+		if (apply) apply(instance, props[key], prev);
+	}
+}
+/** 实例就绪 deferred：whenInstance 惰性建 promise，落定时放行（三族元素工厂共用） */
+function deferredInstance() {
+	let resolve;
+	const promise = new Promise((res) => resolve = res);
+	return {
+		when: () => promise,
+		resolve: (value) => resolve(value)
+	};
+}
+/**
+* 覆盖物元素工厂。生命周期与 vue 的 defineOverlayComponent 同构：
+* createWhenReady 守卫构造（SDK 扩展类异步加载）→ 解析收集容器 →
+* mountOverlay 编排挂载/同步/事件 → 卸载清理。
+*/
+function makeOverlayElement(def, options) {
+	class OverlayElement extends LitElement {
+		static {
+			this.properties = litProperties(def.props);
+		}
+		constructor() {
+			super();
+			this.deferred = deferredInstance();
+			applyDefaults(this, def.props);
+		}
+		/** SDK 实例就绪 promise（容器收编子级、InfoWindow 宿主等待） */
+		whenInstance() {
+			return this.deferred.when();
+		}
+		/** 当前 SDK 实例；未挂载时 undefined */
+		get instance() {
+			return this.handle?.instance;
+		}
+		collectorFor(instance) {
+			if (!options?.collector) throw new Error(`<${def.tag}> 不是覆盖物收集容器`);
+			return options.collector(instance);
+		}
+		props() {
+			return collectProps(this, def.props);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			const container = findMap(this);
+			if (!container) return;
+			Promise.all([container.whenReady().then((map) => createWhenReady(() => def.create(this.props(), { map }))), resolveCollector(this)]).then(([created, collector]) => {
+				const map = container.map;
+				if (!map || this.handle || !this.isConnected) return;
+				this.handle = mountOverlay({
+					map,
+					collector
+				}, {
+					props: () => this.props(),
+					events: def.events,
+					dispatch: dispatchTdtEvent(this),
+					create: () => created,
+					attach: def.attach,
+					detach: def.detach
+				});
+				this.deferred.resolve(this.handle.instance);
+			});
+		}
+		updated(changed) {
+			if (!this.handle || !def.sync || changed.size === 0) return;
+			applySyncDiff(this.handle.instance, def.sync, changed, this.props());
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.handle?.destroy();
+			this.handle = void 0;
+		}
+		render() {
+			return html``;
+		}
+	}
+	return OverlayElement;
+}
+/**
+* 鼠标工具元素工厂。受控 active attribute（presence 语义 + reflect）驱动
+* mountTool 的开关；attribute 变化在 updated 统一应用——session 未就绪时
+* 由落定回调读取当前值，最后写入胜出。
+*/
+function makeToolElement(def) {
+	class ToolElement extends LitElement {
+		constructor(..._args) {
+			super(..._args);
+			this.active = false;
+			this.deferred = deferredInstance();
+		}
+		static {
+			this.properties = {
+				active: {
+					type: Boolean,
+					reflect: true
+				},
+				...litProperties(def.props)
+			};
+		}
+		/** SDK 工具实例就绪 promise */
+		whenInstance() {
+			return this.deferred.when();
+		}
+		props() {
+			return collectProps(this, def.props);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			const container = findMap(this);
+			if (!container) return;
+			container.whenReady().then((map) => createWhenReady(() => def.create(this.props(), map))).then((created) => {
+				if (this.session || !this.isConnected) return;
+				this.session = mountTool({
+					map: container.map,
+					create: () => created,
+					events: def.events,
+					dispatch: dispatchTdtEvent(this),
+					activate: def.activate,
+					deactivate: def.deactivate
+				});
+				this.deferred.resolve(this.session.tool);
+				this.session.setActive(this.active);
+			});
+		}
+		updated(changed) {
+			if (changed.has("active")) this.session?.setActive(this.active);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.session?.destroy();
+			this.session = void 0;
+		}
+		render() {
+			return html``;
+		}
+	}
+	return ToolElement;
+}
+/**
+* 控件元素工厂：attribute → SDK 控件构造并 addControl，卸载 removeControl。
+* 与 vue 的 defineControlComponent 同构：构造经 createWhenReady 守卫。
+*/
+function makeControlElement(def) {
+	class ControlElement extends LitElement {
+		static {
+			this.properties = litProperties(def.props);
+		}
+		constructor() {
+			super();
+			applyDefaults(this, def.props);
+		}
+		get instance() {
+			return this.control;
+		}
+		props() {
+			return collectProps(this, def.props);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			const container = findMap(this);
+			if (!container) return;
+			container.whenReady().then((map) => createWhenReady(() => def.create(this.props())).then((control) => {
+				if (this.control || !this.isConnected) return;
+				this.control = control;
+				map.addControl(control);
+			})).catch(() => {});
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			const map = findMap(this)?.map;
+			if (this.control && map) map.removeControl(this.control);
+			this.control = void 0;
+		}
+		render() {
+			return html``;
+		}
+	}
+	return ControlElement;
+}
+/**
+* 瓦片图层元素工厂：create → mountTileLayer 上屏与事件；props 变更在
+* updated 里 diff 应用 sync（defs 默认为 url/opacity/zIndex 同步表）。
+*/
+function makeLayerElement(def) {
+	class LayerElement extends LitElement {
+		static {
+			this.properties = litProperties(def.props);
+		}
+		constructor() {
+			super();
+			this.deferred = deferredInstance();
+			applyDefaults(this, def.props);
+		}
+		whenInstance() {
+			return this.deferred.when();
+		}
+		get instance() {
+			return this.layer;
+		}
+		props() {
+			return collectProps(this, def.props);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			const container = findMap(this);
+			if (!container) return;
+			container.whenReady().then((map) => createWhenReady(() => def.create(this.props())).then((layer) => {
+				if (this.layer || !this.isConnected) return;
+				this.layer = layer;
+				this.unmount = mountTileLayer({
+					map,
+					layer,
+					events: def.events,
+					dispatch: dispatchTdtEvent(this)
+				});
+				this.deferred.resolve(layer);
+			})).catch(() => {});
+		}
+		updated(changed) {
+			if (!this.layer || !def.sync || changed.size === 0) return;
+			applySyncDiff(this.layer, def.sync, changed, this.props());
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.unmount?.();
+			this.unmount = void 0;
+			this.layer = void 0;
+		}
+		render() {
+			return html``;
+		}
+	}
+	return LayerElement;
+}
+//#endregion
+//#region src/controls.ts
+/**
+* 控件元素：定义（props/构造）见 core defs，attribute 声明与 addControl/
+* removeControl 生命周期编排已在 factory 的 makeControlElement。
+*/
+const TdtControlZoomElement = makeControlElement(zoomDef);
+const TdtControlScaleElement = makeControlElement(scaleDef);
+const TdtControlCopyrightElement = makeControlElement(copyrightDef);
+const TdtControlOverviewMapElement = makeControlElement(overviewMapDef);
+const TdtControlMapTypeElement = makeControlElement(mapTypeDef);
+//#endregion
+//#region src/tdt-map.ts
+/**
+* 地图容器。light DOM 渲染（createRenderRoot 返回自身）：SDK 直接持有
+* 容器并挂载控件、覆盖物与窗体，shadow 边界会隔离 SDK 的样式与 DOM 操作。
+*
+* 子组件经 closest("tdt-map") 取容器、经 whenReady() 等待 SDK 就绪；
+* 地图事件以 `tdt-<官方事件名>` 的 CustomEvent 转发（detail 为 SDK 原生
+* 事件对象），避免与标准 DOM 事件同名混淆。
+*/
+/** "lng,lat" 字符串 → [lng, lat] 数组；attribute 不传时为 undefined（回退默认中心） */
+function lnglatConverter(value) {
+	return value ? parseLnglat(value) : void 0;
+}
+function locateConverter(value) {
+	if (value === null) return false;
+	if (value === "") return true;
+	return value;
+}
+var TdtMapElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tk = "";
+		this.locate = false;
+		this.zoom = 12;
+	}
+	/** 当前地图实例；SDK 就绪前为 undefined */
+	get map() {
+		return this.session?.map;
+	}
+	static {
+		this.properties = {
+			tk: { type: String },
+			center: { converter: lnglatConverter },
+			locate: { converter: locateConverter },
+			zoom: { type: Number },
+			minZoom: { type: Number },
+			maxZoom: { type: Number }
+		};
+	}
+	createRenderRoot() {
+		return this;
+	}
+	/** SDK 与地图实例就绪的 promise；子组件挂载前等待 */
+	whenReady() {
+		return this.ready ??= this.init();
+	}
+	async init() {
+		const session = await createMapSession(this, {
+			tk: this.tk,
+			center: this.center,
+			locate: this.locate,
+			zoom: this.zoom,
+			minZoom: this.minZoom,
+			maxZoom: this.maxZoom
+		});
+		this.session = session;
+		this.unbindEvents = bindEventNames(session.map, MAP_EVENT_NAMES, (name, event) => {
+			this.dispatchEvent(new CustomEvent(`tdt-${name}`, {
+				detail: event,
+				bubbles: true,
+				composed: true
+			}));
+		});
+		return session.map;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "block";
+		this.style.isolation = "isolate";
+		if (this.tk) this.whenReady();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.unbindEvents?.();
+		this.unbindEvents = void 0;
+		this.session?.destroy();
+		this.session = void 0;
+		this.ready = void 0;
+	}
+	updated(changed) {
+		const session = this.session;
+		if (!session) return;
+		if (changed.has("center") && this.center) session.setCenter(this.center);
+		if (changed.has("zoom")) session.map.setZoom(this.zoom);
+	}
+	render() {
+		return html``;
+	}
+};
+//#endregion
+//#region src/info-window.ts
+/**
+* 信息窗元素。内容为元素自身的子节点（light DOM），经 MutationObserver
+* 克隆进窗体容器：SDK 在 open 时会搬移内容容器，克隆可保持元素内原始
+* 子节点稳定，且避免 observer 被搬移触发误清窗口（vue 适配层同款方案）。
+* 独立使用时经 lnglat 属性由地图打开；嵌套在覆盖物元素内时由宿主打开。
+* attribute 随官方 InfoWindowOptions 字段（kebab-case）。
+*/
+/** "x,y" 属性 → T.Point */
+function pointConverter(value) {
+	if (!value) return;
+	const [x, y] = value.split(",").map(Number);
+	return new T.Point(x, y);
+}
+var TdtInfoWindowElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: true
+			},
+			lnglat: { converter: lnglatConverter },
+			minWidth: {
+				type: Number,
+				attribute: "min-width"
+			},
+			maxWidth: {
+				type: Number,
+				attribute: "max-width"
+			},
+			maxHeight: {
+				type: Number,
+				attribute: "max-height"
+			},
+			autoPan: {
+				type: Boolean,
+				attribute: "auto-pan"
+			},
+			closeButton: {
+				type: Boolean,
+				attribute: "close-button"
+			},
+			offset: { converter: pointConverter },
+			autoPanPadding: {
+				converter: pointConverter,
+				attribute: "auto-pan-padding"
+			},
+			closeOnClick: {
+				type: Boolean,
+				attribute: "close-on-click"
+			}
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		const container = findMap(this);
+		if (!container) return;
+		const dispatch = dispatchTdtEvent(this);
+		Promise.all([container.whenReady(), resolveHostOverlay(this)]).then(([map, host]) => {
+			this.map = map;
+			this.host = host;
+			return createWhenReady(() => createInfoWindow(compact({
+				minWidth: this.minWidth,
+				maxWidth: this.maxWidth,
+				maxHeight: this.maxHeight,
+				autoPan: this.autoPan,
+				closeButton: this.closeButton,
+				offset: this.offset,
+				autoPanPadding: this.autoPanPadding,
+				closeOnClick: this.closeOnClick
+			}), (name) => {
+				dispatch(name, void 0);
+				if (name === "close") this.open = false;
+			}));
+		}).then((created) => {
+			if (this.handle || !this.isConnected) return;
+			this.handle = created;
+			this.observer = new MutationObserver(() => this.syncContent());
+			this.observer.observe(this, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
+			this.syncContent();
+			this.syncOpen();
+		}).catch(() => {});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.observer?.disconnect();
+		this.observer = void 0;
+		this.handle?.destroy();
+		this.handle = void 0;
+	}
+	/** 把元素子节点克隆进窗体容器 */
+	syncContent() {
+		if (this.handle) this.handle.container.replaceChildren(...Array.from(this.childNodes, (node) => node.cloneNode(true)));
+	}
+	syncOpen() {
+		if (!this.handle || !this.map) return;
+		if (this.open) if (this.lnglat) this.handle.openOn(this.map, toLngLat(this.lnglat));
+		else if (this.host) this.handle.openOn(this.host);
+		else this.handle.openOn(this.map);
+		else if (this.handle.isOpen()) this.handle.close();
+	}
+	updated() {
+		this.syncOpen();
+	}
+};
+//#endregion
+//#region src/layers.ts
+/**
+* 瓦片图层元素：定义（props/构造/sync/事件表）见 core defs，元素只承载
+* attribute 声明与生命周期桥接。url 为必填 attribute；bounds 用
+* "swLng,swLat;neLng,neLat" 形态；格网图层的样式对象用 JSON。
+*/
+const TdtTileLayerElement = makeLayerElement(tileLayerDef);
+const TdtTileLayerWmsElement = makeLayerElement(tileLayerWmsDef);
+const TdtTileLayerTdtElement = makeLayerElement(tileLayerTdtDef);
+const TdtGridlineLayerElement = makeLayerElement(gridlineLayerDef);
+//#endregion
+//#region src/overlays.ts
+/**
+* 覆盖物元素：定义（props/构造/sync/事件表）见 core defs，元素只承载
+* attribute 声明与生命周期桥接。attribute 命名随官方 Options 字段
+* （kebab-case）；坐标 "lng,lat"、集合 "lng,lat;…"、对象 JSON。
+*/
+const TdtMarkerElement = makeOverlayElement(markerDef);
+const TdtPolylineElement = makeOverlayElement(polylineDef);
+const TdtPolygonElement = makeOverlayElement(polygonDef);
+const TdtRectangleElement = makeOverlayElement(rectangleDef);
+const TdtLabelElement = makeOverlayElement(labelDef);
+const TdtCircleElement = makeOverlayElement(circleDef);
+const TdtCloudMarkerElement = makeOverlayElement(cloudMarkerDef);
+/** 点聚合容器：子级 tdt-marker 经 DOM 就近收编加入聚合而非直接上屏 */
+const TdtMarkerClustererElement = makeOverlayElement(markerClustererDef, { collector: (cluster) => ({
+	addMarker: (marker) => cluster.addMarker(marker),
+	removeMarker: (marker) => cluster.removeMarker(marker)
+}) });
+/** 图层组容器：子级覆盖物加入容器，容器卸载时随 clearLayers 清空 */
+const TdtLayerGroupElement = makeOverlayElement(layerGroupDef, { collector: (group) => ({
+	addMarker: (marker) => group.addLayer(marker),
+	removeMarker: (marker) => group.removeLayer(marker)
+}) });
+//#endregion
+//#region src/plot-entities.ts
+/**
+* 标绘覆盖物元素：定义（props/构造/sync）见 core defs，vue/wc 共享。
+* attribute path 形如 "lng,lat;lng,lat"；样式 props 仅构造时生效。
+*/
+const TdtArcElement = makeOverlayElement(arcDef);
+const TdtBezierCurve2Element = makeOverlayElement(bezierCurve2Def);
+const TdtBezierCurve3Element = makeOverlayElement(bezierCurve3Def);
+const TdtBezierCurveArrowElement = makeOverlayElement(bezierCurveArrowDef);
+const TdtBezierCurveNElement = makeOverlayElement(bezierCurveNDef);
+const TdtCardinalCurveElement = makeOverlayElement(cardinalCurveDef);
+const TdtCardinalCurveArrowElement = makeOverlayElement(cardinalCurveArrowDef);
+const TdtParallelSearchElement = makeOverlayElement(parallelSearchDef);
+const TdtPolylineArrowElement = makeOverlayElement(polylineArrowDef);
+const TdtSectorSearchElement = makeOverlayElement(sectorSearchDef);
+const TdtCloseCurveElement = makeOverlayElement(closeCurveDef);
+const TdtCurveFlagElement = makeOverlayElement(curveFlagDef);
+const TdtDiagonalArrowElement = makeOverlayElement(diagonalArrowDef);
+const TdtDoubleArrowElement = makeOverlayElement(doubleArrowDef);
+const TdtDoveTailDiagonalArrowElement = makeOverlayElement(doveTailDiagonalArrowDef);
+const TdtDoveTailStraightArrowElement = makeOverlayElement(doveTailStraightArrowDef);
+const TdtGatheringPlaceElement = makeOverlayElement(gatheringPlaceDef);
+const TdtRectFlagElement = makeOverlayElement(rectFlagDef);
+const TdtRoundRectElement = makeOverlayElement(roundRectDef);
+const TdtSectorElement = makeOverlayElement(sectorDef);
+const TdtStraightArrowElement = makeOverlayElement(straightArrowDef);
+const TdtTriangleFlagElement = makeOverlayElement(triangleFlagDef);
+//#endregion
+//#region src/plot-tools.ts
+/**
+* 标绘工具元素族：定义见 core defs，vue/wc 共享。active attribute
+* （presence 语义）受控开关，事件以 `tdt-<官方事件名>` 转发（如 tdt-dbclick）。
+*/
+const TdtArcToolElement = makeToolElement(arcToolDef);
+const TdtBezierCurve2ToolElement = makeToolElement(bezierCurve2ToolDef);
+const TdtBezierCurve3ToolElement = makeToolElement(bezierCurve3ToolDef);
+const TdtBezierCurveArrowToolElement = makeToolElement(bezierCurveArrowToolDef);
+const TdtBezierCurveNToolElement = makeToolElement(bezierCurveNToolDef);
+const TdtCardinalCurveArrowToolElement = makeToolElement(cardinalCurveArrowToolDef);
+const TdtCardinalCurveToolElement = makeToolElement(cardinalCurveToolDef);
+const TdtCloseCurveToolElement = makeToolElement(closeCurveToolDef);
+const TdtCurveFlagToolElement = makeToolElement(curveFlagToolDef);
+const TdtDiagonalArrowToolElement = makeToolElement(diagonalArrowToolDef);
+const TdtDoubleArrowToolElement = makeToolElement(doubleArrowToolDef);
+const TdtDoveTailDiagonalArrowToolElement = makeToolElement(doveTailDiagonalArrowToolDef);
+const TdtDoveTailStraightArrowToolElement = makeToolElement(doveTailStraightArrowToolDef);
+const TdtGatheringPlaceToolElement = makeToolElement(gatheringPlaceToolDef);
+const TdtHandDrawingToolElement = makeToolElement(handDrawingToolDef);
+const TdtParallelSearchToolElement = makeToolElement(parallelSearchToolDef);
+const TdtPolylineArrowToolElement = makeToolElement(polylineArrowToolDef);
+const TdtRectFlagToolElement = makeToolElement(rectFlagToolDef);
+const TdtRoundRectToolElement = makeToolElement(roundRectToolDef);
+const TdtSectorSearchToolElement = makeToolElement(sectorSearchToolDef);
+const TdtSectorToolElement = makeToolElement(sectorToolDef);
+const TdtStraightArrowToolElement = makeToolElement(straightArrowToolDef);
+const TdtTriangleFlagToolElement = makeToolElement(triangleFlagToolDef);
+//#endregion
+//#region src/tools.ts
+/**
+* 鼠标工具元素：定义见 core defs；active attribute（presence 语义）受控
+* 开关。事件以 `tdt-<官方事件名>` 转发（如 tdt-draw）。
+*/
+const TdtPolylineToolElement = makeToolElement(polylineToolDef);
+const TdtPolygonToolElement = makeToolElement(polygonToolDef);
+const TdtCircleToolElement = makeToolElement(circleToolDef);
+const TdtRectangleToolElement = makeToolElement(rectangleToolDef);
+const TdtMarkToolElement = makeToolElement(markToolDef);
+const TdtPaintBrushToolElement = makeToolElement(paintBrushToolDef);
+/**
+* 坐标拾取元素（官方 CoordinatePickup）：非 Mousetool 体系，以
+* addEvent/removeEvent 开关；官方 Options.callback 转写为 tdt-pick 事件
+* （SDK 点击地图即调用 callback，未设置时点击会抛错，故构造必传）。
+*/
+var TdtCoordinatePickupElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = false;
+		this.callback = (lnglat) => {
+			dispatchTdtEvent(this)("pick", lnglat);
+		};
+	}
+	static {
+		this.properties = { active: {
+			type: Boolean,
+			reflect: true
+		} };
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const container = findMap(this);
+		if (!container) return;
+		container.whenReady().then((map) => createWhenReady(() => new T.CoordinatePickup(map, { callback: this.callback }))).then((created) => {
+			if (this.pickup || !this.isConnected) return;
+			this.pickup = created;
+			if (this.active) created.addEvent();
+		});
+	}
+	updated(changed) {
+		if (!changed.has("active") || !this.pickup) return;
+		if (this.active) this.pickup.addEvent();
+		else this.pickup.removeEvent();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.pickup?.removeEvent();
+		this.pickup = void 0;
+	}
+	render() {
+		return html``;
+	}
+};
+//#endregion
+//#region src/index.ts
+/** tag → 元素类注册表（registerComponents 与副作用注册共用） */
+const ELEMENTS = [
+	["tdt-map", TdtMapElement],
+	["tdt-marker", TdtMarkerElement],
+	["tdt-polyline", TdtPolylineElement],
+	["tdt-polygon", TdtPolygonElement],
+	["tdt-rectangle", TdtRectangleElement],
+	["tdt-label", TdtLabelElement],
+	["tdt-circle", TdtCircleElement],
+	["tdt-cloud-marker", TdtCloudMarkerElement],
+	["tdt-marker-clusterer", TdtMarkerClustererElement],
+	["tdt-layer-group", TdtLayerGroupElement],
+	["tdt-control-zoom", TdtControlZoomElement],
+	["tdt-control-scale", TdtControlScaleElement],
+	["tdt-control-copyright", TdtControlCopyrightElement],
+	["tdt-control-overview-map", TdtControlOverviewMapElement],
+	["tdt-control-map-type", TdtControlMapTypeElement],
+	["tdt-info-window", TdtInfoWindowElement],
+	["tdt-tile-layer", TdtTileLayerElement],
+	["tdt-tile-layer-wms", TdtTileLayerWmsElement],
+	["tdt-tile-layer-tdt", TdtTileLayerTdtElement],
+	["tdt-gridline-layer", TdtGridlineLayerElement],
+	["tdt-arc", TdtArcElement],
+	["tdt-bezier-curve2", TdtBezierCurve2Element],
+	["tdt-bezier-curve3", TdtBezierCurve3Element],
+	["tdt-bezier-curve-arrow", TdtBezierCurveArrowElement],
+	["tdt-bezier-curve-n", TdtBezierCurveNElement],
+	["tdt-cardinal-curve", TdtCardinalCurveElement],
+	["tdt-cardinal-curve-arrow", TdtCardinalCurveArrowElement],
+	["tdt-parallel-search", TdtParallelSearchElement],
+	["tdt-polyline-arrow", TdtPolylineArrowElement],
+	["tdt-sector-search", TdtSectorSearchElement],
+	["tdt-close-curve", TdtCloseCurveElement],
+	["tdt-curve-flag", TdtCurveFlagElement],
+	["tdt-diagonal-arrow", TdtDiagonalArrowElement],
+	["tdt-double-arrow", TdtDoubleArrowElement],
+	["tdt-dove-tail-diagonal-arrow", TdtDoveTailDiagonalArrowElement],
+	["tdt-dove-tail-straight-arrow", TdtDoveTailStraightArrowElement],
+	["tdt-gathering-place", TdtGatheringPlaceElement],
+	["tdt-rect-flag", TdtRectFlagElement],
+	["tdt-round-rect", TdtRoundRectElement],
+	["tdt-sector", TdtSectorElement],
+	["tdt-straight-arrow", TdtStraightArrowElement],
+	["tdt-triangle-flag", TdtTriangleFlagElement],
+	["tdt-polyline-tool", TdtPolylineToolElement],
+	["tdt-polygon-tool", TdtPolygonToolElement],
+	["tdt-circle-tool", TdtCircleToolElement],
+	["tdt-rectangle-tool", TdtRectangleToolElement],
+	["tdt-mark-tool", TdtMarkToolElement],
+	["tdt-paint-brush-tool", TdtPaintBrushToolElement],
+	["tdt-coordinate-pickup", TdtCoordinatePickupElement],
+	["tdt-arc-tool", TdtArcToolElement],
+	["tdt-bezier-curve2-tool", TdtBezierCurve2ToolElement],
+	["tdt-bezier-curve3-tool", TdtBezierCurve3ToolElement],
+	["tdt-bezier-curve-arrow-tool", TdtBezierCurveArrowToolElement],
+	["tdt-bezier-curve-n-tool", TdtBezierCurveNToolElement],
+	["tdt-cardinal-curve-tool", TdtCardinalCurveToolElement],
+	["tdt-cardinal-curve-arrow-tool", TdtCardinalCurveArrowToolElement],
+	["tdt-close-curve-tool", TdtCloseCurveToolElement],
+	["tdt-curve-flag-tool", TdtCurveFlagToolElement],
+	["tdt-diagonal-arrow-tool", TdtDiagonalArrowToolElement],
+	["tdt-double-arrow-tool", TdtDoubleArrowToolElement],
+	["tdt-dove-tail-diagonal-arrow-tool", TdtDoveTailDiagonalArrowToolElement],
+	["tdt-dove-tail-straight-arrow-tool", TdtDoveTailStraightArrowToolElement],
+	["tdt-gathering-place-tool", TdtGatheringPlaceToolElement],
+	["tdt-hand-drawing-tool", TdtHandDrawingToolElement],
+	["tdt-parallel-search-tool", TdtParallelSearchToolElement],
+	["tdt-polyline-arrow-tool", TdtPolylineArrowToolElement],
+	["tdt-rect-flag-tool", TdtRectFlagToolElement],
+	["tdt-round-rect-tool", TdtRoundRectToolElement],
+	["tdt-sector-search-tool", TdtSectorSearchToolElement],
+	["tdt-sector-tool", TdtSectorToolElement],
+	["tdt-straight-arrow-tool", TdtStraightArrowToolElement],
+	["tdt-triangle-flag-tool", TdtTriangleFlagToolElement]
+];
+/**
+* 注册全部自定义元素；已注册的 tag 自动跳过（重复 import 安全）。
+* SSR/Node 环境无 customElements，静默跳过（客户端水合后再调用）。
+*/
+function registerComponents() {
+	if (typeof customElements === "undefined") return;
+	for (const [tag, ctor] of ELEMENTS) if (!customElements.get(tag)) customElements.define(tag, ctor);
+}
+registerComponents();
+//#endregion
+export { ELEMENTS, TdtArcElement, TdtArcToolElement, TdtBezierCurve2Element, TdtBezierCurve2ToolElement, TdtBezierCurve3Element, TdtBezierCurve3ToolElement, TdtBezierCurveArrowElement, TdtBezierCurveArrowToolElement, TdtBezierCurveNElement, TdtBezierCurveNToolElement, TdtCardinalCurveArrowElement, TdtCardinalCurveArrowToolElement, TdtCardinalCurveElement, TdtCardinalCurveToolElement, TdtCircleElement, TdtCircleToolElement, TdtCloseCurveElement, TdtCloseCurveToolElement, TdtCloudMarkerElement, TdtControlCopyrightElement, TdtControlMapTypeElement, TdtControlOverviewMapElement, TdtControlScaleElement, TdtControlZoomElement, TdtCoordinatePickupElement, TdtCurveFlagElement, TdtCurveFlagToolElement, TdtDiagonalArrowElement, TdtDiagonalArrowToolElement, TdtDoubleArrowElement, TdtDoubleArrowToolElement, TdtDoveTailDiagonalArrowElement, TdtDoveTailDiagonalArrowToolElement, TdtDoveTailStraightArrowElement, TdtDoveTailStraightArrowToolElement, TdtGatheringPlaceElement, TdtGatheringPlaceToolElement, TdtGridlineLayerElement, TdtHandDrawingToolElement, TdtInfoWindowElement, TdtLabelElement, TdtLayerGroupElement, TdtMapElement, TdtMarkToolElement, TdtMarkerClustererElement, TdtMarkerElement, TdtPaintBrushToolElement, TdtParallelSearchElement, TdtParallelSearchToolElement, TdtPolygonElement, TdtPolygonToolElement, TdtPolylineArrowElement, TdtPolylineArrowToolElement, TdtPolylineElement, TdtPolylineToolElement, TdtRectFlagElement, TdtRectFlagToolElement, TdtRectangleElement, TdtRectangleToolElement, TdtRoundRectElement, TdtRoundRectToolElement, TdtSectorElement, TdtSectorSearchElement, TdtSectorSearchToolElement, TdtSectorToolElement, TdtStraightArrowElement, TdtStraightArrowToolElement, TdtTileLayerElement, TdtTileLayerTdtElement, TdtTileLayerWmsElement, TdtTriangleFlagElement, TdtTriangleFlagToolElement, lnglatConverter, registerComponents };

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@tianditu/web-components",
+  "version": "0.1.0",
+  "description": "Web Components for the tianditu map — Lit-based custom elements for any framework or plain HTML, sharing one core definition with the Vue adapter",
+  "keywords": [
+    "control",
+    "custom-elements",
+    "gis",
+    "infowindow",
+    "lbs",
+    "lit",
+    "map",
+    "marker",
+    "overlay",
+    "plot",
+    "polygon",
+    "polyline",
+    "tianditu",
+    "tile-layer",
+    "typescript",
+    "web-components"
+  ],
+  "homepage": "https://github.com/DemoMacro/tianditu#readme",
+  "bugs": {
+    "url": "https://github.com/DemoMacro/tianditu/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Demo Macro",
+    "email": "abc@imst.xyz",
+    "url": "https://www.demomacro.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DemoMacro/tianditu.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "dependencies": {
+    "lit": "3.1.0",
+    "@tianditu/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "demo": "vp dev"
+  }
+}