ym-giswidget-2d 1.0.79 → 1.0.80

package/API.md

@@ -0,0 +1,399 @@
+# ym-giswidget-2d API 文档
+
+> 基于 Vue 3 + Element Plus + [ym-gis-2d](https://www.npmjs.com/package/ym-gis-2d) 的 WebGIS UI 组件库。  
+> 当前版本：`1.0.79`
+
+完整在线文档（含交互示例）见 monorepo 内 `giswidget-2d-docs`，或本地运行 `pnpm --filter giswidget-2d-docs dev`。
+
+---
+
+## 目录
+
+- [安装](#安装)
+- [快速开始](#快速开始)
+- [全局配置 Config](#全局配置-config)
+- [工具条 ITool](#工具条-itool)
+- [组件一览](#组件一览)
+- [HorizontallyTopToolbar 工具条](#horizontallytoptoolbar-工具条)
+- [MapView 地图容器](#mapview-地图容器)
+- [图层组件](#图层组件)
+- [地图控件](#地图控件)
+- [查询与定位](#查询与定位)
+- [编辑工具](#编辑工具)
+- [量测工具](#量测工具)
+- [分析展示](#分析展示)
+- [导入导出](#导入导出)
+- [完整示例](#完整示例)
+
+---
+
+## 安装
+
+```bash
+npm install ym-giswidget-2d ym-gis-2d element-plus
+```
+
+```typescript
+import 'ol/ol.css';
+import 'ym-gis-2d/assets/main.css';
+import 'element-plus/dist/index.css';
+
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import YmGisWidget2d from 'ym-giswidget-2d';
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.use(YmGisWidget2d);
+```
+
+按需引入：
+
+```typescript
+import { MapView, Draw, Select, TocCard } from 'ym-giswidget-2d';
+```
+
+---
+
+## 快速开始
+
+```vue
+<template>
+  <MapView style="height: 500px" @init="map = $event" />
+  <Draw v-if="map" :map="map" geometry-type="polygon" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MapView, Draw } from 'ym-giswidget-2d';
+
+const map = ref();
+</script>
+```
+
+**约定**：除 `MapView` / `MultiScreen` 外，所有组件均需传入 `map: OLMap`，建议 `v-if="map"` 等待初始化。
+
+---
+
+## 全局配置 Config
+
+```typescript
+import Config from 'ym-giswidget-2d/config/Config';
+
+Config.tdtToken = 'YOUR_TIANDITU_TOKEN';
+Config.amapKey = 'YOUR_AMAP_KEY';
+Config.baiduAk = 'YOUR_BAIDU_AK';
+Config.ServiceUrl = 'http://api-server';
+Config.GisServiceUrl = 'http://gis-server';
+```
+
+| 属性 | 说明 |
+|------|------|
+| ServiceUrl | 后端业务服务 |
+| GisServiceUrl | GIS 分析服务（SHP 导入导出） |
+| tdtToken | 天地图 Token |
+| amapKey | 高德 POI Key |
+| baiduAk | 百度 POI AK |
+
+---
+
+## 工具条 ITool
+
+```typescript
+interface ITool {
+  id: string;
+  title: string;
+  toolTip?: string;
+  classPath?: string;   // 相对 components/ 的路径，如 '../draw/index.ts'
+  icon: string;         // 激活态图标加 _active 后缀
+  isOnce: boolean;      // true：一次性执行
+  isRepels: boolean;    // true：互斥，不可同时激活
+  children?: ITool[];
+  alwaysLoad?: boolean; // true：始终挂载，v-show 控制
+  data?: any;           // 传给子组件
+  showSplit?: boolean;
+}
+```
+
+---
+
+## 组件一览
+
+| 组件 | 导入 | 说明 |
+|------|------|------|
+| MapView | `ym-giswidget-2d` | 地图容器 |
+| HorizontallyTopToolbar | `ym-giswidget-2d` | 顶部工具条 |
+| TocCard | `ym-giswidget-2d` | 图层目录卡片 |
+| LayerSwitcher | `ym-giswidget-2d` | 底图切换 |
+| Legend | `ym-giswidget-2d` | 图例 |
+| MousePositon | `ym-giswidget-2d` | 鼠标坐标 |
+| ScaleLine | `ym-giswidget-2d` | 比例尺 |
+| Draw | `ym-giswidget-2d` | 绘制 |
+| Select | `ym-giswidget-2d` | 选择 |
+| Identify | `ym-giswidget-2d` | I 查询 |
+| Modify | `ym-giswidget-2d` | 节点编辑 |
+| Snap | `ym-giswidget-2d` | 吸附 |
+| Split | `ym-giswidget-2d` | 分割 |
+| Difference | `ym-giswidget-2d` | 挖除 |
+| Repair | `ym-giswidget-2d` | 修补 |
+| Clear | `ym-giswidget-2d` | 清除要素 |
+| AreaMeasurement | `ym-giswidget-2d` | 面积量测 |
+| DistanceMeasurement | `ym-giswidget-2d` | 距离量测 |
+| Location | `ym-giswidget-2d` | 坐标定位 |
+| AddressSearch | `ym-giswidget-2d` | 地名搜索 |
+| Heatmap | `ym-giswidget-2d` | 热力图 |
+| SwipeLayer | `ym-giswidget-2d` | 卷帘对比 |
+| MultiScreen | `ym-giswidget-2d` | 多屏地图 |
+| Import | `ym-giswidget-2d` | 导入 |
+| Export | `ym-giswidget-2d` | 导出 |
+
+---
+
+## HorizontallyTopToolbar 工具条
+
+```vue
+<HorizontallyTopToolbar
+  :map="map"
+  :tools="tools"
+  :field-name="fieldName"
+  :field-values="fieldValues"
+  @loaded="onLoaded"
+/>
+```
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| map | OLMap | 必填 |
+| tools | ITool[] | 工具配置 |
+| fieldName | string | 传给子工具的过滤字段 |
+| fieldValues | any[] | 传给子工具的过滤值 |
+
+| 事件 | 说明 |
+|------|------|
+| loaded | alwaysLoad 子组件加载完成 |
+
+子组件需 emit `activeInteraction({ success, message? })` 反馈激活结果。
+
+---
+
+## MapView 地图容器
+
+| 属性 | 类型 | 默认 |
+|------|------|------|
+| projection | number | 4490 |
+| center | number[] | — |
+| extent | number[] | — |
+| zoom | number | 10 |
+| minZoom / maxZoom | number | 0 / 28 |
+
+| 事件 | 参数 |
+|------|------|
+| init | `(map: OLMap)` |
+
+| Expose | 说明 |
+|--------|------|
+| map | OLMap 实例 |
+| addWKT / addWKTs / clearTempFeatures | 同 OLMap |
+
+---
+
+## 图层组件
+
+### TocCard
+
+| 属性 | 说明 |
+|------|------|
+| map, data | 必填 |
+| editLayerTag | 可编辑层 tag |
+| showOpacity / showFilter | 透明度 / 搜索 |
+| #title | 标题插槽 |
+
+### LayerSwitcher
+
+| 属性 | 说明 |
+|------|------|
+| map, layers | 底图列表，支持 isRepels、thumbnail、checked |
+
+### Legend
+
+| 属性 | 说明 |
+|------|------|
+| map, data, title | 图例面板 |
+
+---
+
+## 地图控件
+
+### MousePositon
+
+| 属性 | 默认 | 说明 |
+|------|------|------|
+| showSpheroid | false | 经纬度显示 |
+| position | bottom-left | 四角位置 |
+| fractionDigits | 2 | 小数位 |
+
+### ScaleLine
+
+| 属性 | 说明 |
+|------|------|
+| bar / text | 线型 / 文字比例尺 |
+| units | metric / imperial |
+
+---
+
+## 查询与定位
+
+### Identify
+
+框选查询 + 属性 Popup。插槽 `#footer="{ feature, layerName }"`。
+
+### Select
+
+| 属性 | 说明 |
+|------|------|
+| selectType | rectangle / polygon / point / pointermove |
+| selectLayers | 可查询图层 |
+| @selected | 选中要素列表 |
+
+### AddressSearch
+
+| 属性 | 说明 |
+|------|------|
+| source | tdt / amap / baidu |
+| zoom | 定位级别，默认 16 |
+
+### Location
+
+坐标定位面板，支持度分秒 / 经纬度 / 平面坐标。
+
+---
+
+## 编辑工具
+
+| 组件 | 关键说明 |
+|------|----------|
+| Draw | geometryType、@drawEnd；需 currentEditLayer |
+| Modify | 编辑选中要素节点 |
+| Snap | options 吸附配置 |
+| Split | 面/线分割 |
+| Difference | 面挖除 |
+| Repair | 面修补（v1.0.78+） |
+| Clear | 挂载即清除临时要素，isOnce 工具 |
+
+编辑类工具可通过 `fieldName` + `fieldValues` 过滤 `getEditFeatures`。
+
+---
+
+## 量测工具
+
+### AreaMeasurement / DistanceMeasurement
+
+| 属性 | 说明 |
+|------|------|
+| unit | 测量单位 |
+| precision | 小数位，默认 2 |
+| spheroid | 椭球计算 |
+| showLabel | 显示标注 |
+
+---
+
+## 分析展示
+
+### Heatmap
+
+```typescript
+data: { title: string; points: { x, y, weight }[] }[]
+```
+
+### SwipeLayer
+
+| 属性 | 说明 |
+|------|------|
+| dockedVisible | Left / Right / Top / Bottom |
+
+### MultiScreen
+
+| 属性 | 说明 |
+|------|------|
+| layers, screenNum | 图层与分屏数 |
+| @loaded | 分屏地图就绪 |
+| expose screenMaps | 各屏 OLMap |
+
+---
+
+## 导入导出
+
+### Import
+
+挂载时打开文件选择，支持 kml/kmz/zip(shp)。
+
+### Export
+
+导出选中要素为 shp/kml/kmz，需先 Select 选中。
+
+---
+
+## 完整示例
+
+```vue
+<template>
+  <div style="position: relative; height: 100vh">
+    <div id="map" style="width:100%;height:100%"></div>
+    <HorizontallyTopToolbar v-if="map" :map="map" :tools="tools" />
+    <MousePositon v-if="map" :map="map" />
+    <ScaleLine v-if="map" :map="map" />
+    <LayerSwitcher v-if="map" :map="map" :layers="baseLayers" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import OLMap from 'ym-gis-2d/mapView/Map';
+import {
+  HorizontallyTopToolbar,
+  MousePositon,
+  ScaleLine,
+  LayerSwitcher,
+} from 'ym-giswidget-2d';
+import type { IMapService } from 'ym-gis-2d/entity';
+import type ITool from 'ym-giswidget-2d/entity/iToool';
+
+const map = ref<OLMap>();
+const baseLayers: IMapService[] = [/* ... */];
+
+const tools: ITool[] = [{
+  id: 'draw-tool',
+  title: '工具',
+  icon: './img/tool/draw-tool.png',
+  isOnce: false,
+  isRepels: false,
+  children: [
+    { id: 'drawTool', title: '勾绘', classPath: '../draw/index.ts', icon: './img/add.png', isOnce: false, isRepels: true },
+    { id: 'selectTool', title: '选择', classPath: '../select/index.ts', icon: './img/select.png', isOnce: false, isRepels: true },
+  ],
+}];
+
+onMounted(() => {
+  map.value = new OLMap('map', { projection: 4490, zoom: 10 });
+  baseLayers.forEach(l => map.value!.addMapLayer(l));
+});
+</script>
+```
+
+---
+
+## 注意事项
+
+1. 依赖 `ym-gis-2d`，图层配置见 [ym-gis-2d API](./node_modules/ym-gis-2d/API.md) 或 npm 文档。
+2. 编辑工具需设置 `map.currentEditLayer`（含 `geometryType`）。
+3. `MousePositon` 为历史拼写，导入时使用该名称。
+4. SHP 导入导出需配置 `Config.GisServiceUrl`。
+5. 与 Element Plus 配合使用时需全局注册 Element Plus。
+
+## 相关包
+
+| 包 | 说明 |
+|----|------|
+| ym-gis-2d | GIS 核心（地图、图层、几何） |
+| element-plus | UI 基础组件 |
+| ol | OpenLayers |

package/README.md

@@ -1,33 +1,51 @@
-# olComponents
+# ym-giswidget-2d
 
-This template should help get you started developing with Vue 3 in Vite.
+基于 Vue 3 + Element Plus + [ym-gis-2d](https://www.npmjs.com/package/ym-gis-2d) 的 WebGIS UI 组件库。
 
-## Recommended IDE Setup
+## 安装
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+```bash
+npm install ym-giswidget-2d ym-gis-2d element-plus
+```
 
-## Type Support for `.vue` Imports in TS
+## 快速开始
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+```vue
+<template>
+  <MapView style="height: 500px" @init="onInit" />
+  <Draw v-if="map" :map="map" geometry-type="polygon" />
+</template>
 
-## Customize configuration
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MapView, Draw } from 'ym-giswidget-2d';
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+const map = ref();
+function onInit(m) { map.value = m; }
+</script>
+```
 
-## Project Setup
+## 文档
 
-```sh
-pnpm install
-```
+| 文档 | 说明 |
+|------|------|
+| [API.md](./API.md) | 完整 API 参考（npm 离线文档） |
+| [giswidget-2d-docs/zh-CN/component](../../giswidget-2d-docs/zh-CN/component/) | 在线文档源文件（含交互 Demo） |
 
-### Compile and Hot-Reload for Development
+本地预览文档站点：
 
-```sh
-pnpm dev
+```bash
+pnpm --filter giswidget-2d-docs dev
 ```
 
-### Type-Check, Compile and Minify for Production
+## 主要组件
 
-```sh
-pnpm build
-```
+MapView · HorizontallyTopToolbar · TocCard · LayerSwitcher · Legend · Draw · Select · Identify · Modify · 量测 · 导入导出 · 卷帘 · 多屏 · 热力图
+
+## 依赖
+
+`vue` 3 · `element-plus` · `ym-gis-2d` · `ol`
+
+## License
+
+ISC

package/components/address-search/AddressSearch.vue.d.ts

@@ -1,10 +1,13 @@
+import { PoiDataSource } from '../../http/poi';
 import { default as OLMap } from 'ym-gis-2d/mapView/Map';
 type __VLS_Props = {
     map: OLMap;
     zoom?: number;
     locationImg?: string;
+    source?: PoiDataSource;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    source: PoiDataSource;
     zoom: number;
     locationImg: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/components/address-search/AddressSearch.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./AddressSearch.vue2.js";
 /* empty css                   */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const _AddressSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-85cbdb6a"]]);
+const _AddressSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84185d52"]]);
 export {
   _AddressSearch as default
 };

package/components/address-search/AddressSearch.vue2.js

@@ -7,7 +7,7 @@ import "element-plus/es/components/button/style/css";
 import "element-plus/es/components/icon/style/css";
 import { defineComponent, ref, reactive, computed, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createVNode, toDisplayString, withCtx, withKeys, withModifiers, unref, Transition, withDirectives, TransitionGroup, Fragment, renderList, normalizeClass, vShow, nextTick } from "vue";
 import { Search, Switch } from "@element-plus/icons-vue";
-import { getTDTPOIData } from "../../http/poi.js";
+import { getPOIData } from "../../http/poi.js";
 import { ElMessage } from "element-plus";
 import { gcj02towgs84 } from "ym-gis-2d/utils/gcj02Util";
 import FeatureManager from "ym-gis-2d/feature/FeatureManager";
@@ -25,7 +25,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     map: {},
     zoom: { default: 16 },
-    locationImg: { default: dw }
+    locationImg: { default: dw },
+    source: { default: "tdt" }
   },
   setup(__props) {
     const props = __props;
@@ -70,36 +71,71 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const result = ref([]);
     const currentName = ref("");
     const option = computed(() => options[activeIndex.value]);
+    function normalizeTdtResult(resultData) {
+      const resultType = resultData.resultType - 0;
+      if (resultType === 1) {
+        return resultData.pois || [];
+      }
+      if (resultType === 2 && resultData.statistics && resultData.statistics.priorityCitys) {
+        return resultData.statistics.priorityCitys.map((element) => ({
+          name: element.adminName,
+          lonlat: element.lonlat,
+          address: element.adminName
+        }));
+      }
+      if (resultType === 3) {
+        return resultData.area ? [resultData.area] : [];
+      }
+      if (resultType === 4) {
+        return resultData.suggests || [];
+      }
+      if (resultType === 5) {
+        return resultData.lineData || [];
+      }
+      return [];
+    }
+    function normalizeAmapResult(resultData) {
+      const pois = (resultData == null ? void 0 : resultData.pois) || [];
+      return pois.map((item) => ({
+        name: item.name,
+        lonlat: item.location,
+        address: item.address || item.pname || ""
+      }));
+    }
+    function normalizeBaiduResult(resultData) {
+      const results = (resultData == null ? void 0 : resultData.result) || [];
+      return results.filter((item) => {
+        var _a, _b;
+        return ((_a = item == null ? void 0 : item.location) == null ? void 0 : _a.lng) !== void 0 && ((_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat) !== void 0;
+      }).map((item) => ({
+        name: item.name,
+        lonlat: `${item.location.lng},${item.location.lat}`,
+        address: item.city ? `${item.city}${item.district ? ` ${item.district}` : ""}` : item.district || ""
+      }));
+    }
+    function normalizeSearchResult(source, resultData) {
+      switch (source) {
+        case "amap":
+          return normalizeAmapResult(resultData);
+        case "baidu":
+          return normalizeBaiduResult(resultData);
+        case "tdt":
+        default:
+          return normalizeTdtResult(resultData);
+      }
+    }
     function locationSearch() {
       result.value = [];
       SearchForm.value.validate((validate) => {
         if (validate) {
           status.loading = true;
-          getTDTPOIData(form.value).then((res) => {
+          getPOIData(form.value, { source: props.source }).then((res) => {
             if (!res.data) {
               return;
             }
-            const resultData = res.data;
-            const resultType = resultData.resultType - 0;
-            if (resultType === 1) {
-              result.value = resultData.pois;
-            } else if (resultType === 2 && resultData.statistics && resultData.statistics.priorityCitys) {
-              let priorityCitys = [];
-              for (let index = 0; index < resultData.statistics.priorityCitys.length; index++) {
-                const element = resultData.statistics.priorityCitys[index];
-                priorityCitys.push({
-                  name: element.adminName,
-                  lonlat: element.lonlat
-                });
-              }
-              result.value = priorityCitys;
-            } else if (resultType === 3) {
-              result.value = [resultData.area];
-            } else if (resultType === 4) {
-              result.value = resultData.suggests;
-            } else if (resultType === 5) {
-              result.value = resultData.lineData;
-            }
+            result.value = normalizeSearchResult(props.source, res.data);
+          }).catch((err) => {
+            ElMessage.error((err == null ? void 0 : err.message) || "检索失败");
           }).finally(() => {
             status.loading = false;
           });
@@ -135,12 +171,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (item.lonlat) {
         const delimiter = item.lonlat.includes(",") ? "," : "，";
         const [longitude, latitude] = item.lonlat.split(delimiter);
+        const shouldTransform = props.source === "amap";
         showResPOI({
           location: {
             lng: longitude,
             lat: latitude
           }
-        }, false);
+        }, shouldTransform);
       } else {
         ElMessage.warning("未查找到坐标");
       }