af-mobile-client-vue3 1.0.98 → 1.1.2

package/mock/modules/demo.mock.ts

@@ -0,0 +1,20 @@
+// https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+import { defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock([
+  {
+    url: '/api/demo/post',
+    method: 'POST',
+    body: (params) => {
+      return {
+        code: 200,
+        msg: '操作成功',
+        data: {
+          ...params,
+          id: Math.floor(Math.random() * 1000),
+          timestamp: new Date().toISOString(),
+        },
+      }
+    },
+  },
+])

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.0.98",
+  "version": "1.1.2",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

package/src/components/data/XOlMap/README.md

@@ -0,0 +1,220 @@
+# XOlMap 地图组件使用说明
+
+## 组件简介
+
+XOlMap 是一个基于 OpenLayers 的地图组件，支持多种底图切换、WMS 图层加载、点位渲染等功能。组件使用 Vue 3 + TypeScript 开发，采用 Composition API 和 `<script setup>` 语法。
+
+## 功能特性
+
+- 支持多种底图切换（高德地图、高德卫星图、天地图、天地图卫星图）
+- 支持 WMS 图层加载和控制
+- 支持点位渲染（普通点位、分类点位、海量点）
+- 支持地图基本操作（缩放、平移、中心点设置等）
+- 支持移动端适配
+
+## 安装依赖
+
+```bash
+npm install ol vant
+```
+
+## 基本用法
+
+```vue
+<template>
+  <XOlMap ref="mapRef" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import XOlMap from './index.vue'
+
+const mapRef = ref()
+
+onMounted(() => {
+  // 初始化地图
+  mapRef.value.init({
+    center: [116.404, 39.915], // 北京坐标
+    zoom: 12,
+    maxZoom: 18,
+    minZoom: 4,
+    tianDiTuKey: 'your-tianditu-key', // 天地图密钥
+  })
+})
+</script>
+```
+
+## 组件属性
+
+### 初始化参数 (InitParams)
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| center | [number, number] | [116.404, 39.915] | 地图中心点坐标 [经度, 纬度] |
+| zoom | number | 10 | 地图缩放级别 |
+| maxZoom | number | 18 | 最大缩放级别 |
+| minZoom | number | 4 | 最小缩放级别 |
+| tianDiTuKey | string | '' | 天地图密钥 |
+
+## 组件方法
+
+### 地图控制
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| init | InitParams | void | 初始化地图 |
+| getMap | - | Map \| null | 获取地图实例 |
+| setCenter | center: [number, number], animate?: boolean | void | 设置地图中心点 |
+| setZoom | zoom: number, animate?: boolean | void | 设置地图缩放级别 |
+| getZoom | - | number | 获取当前缩放级别 |
+| setCenterAndZoom | center: [number, number], zoom: number, animate?: boolean | void | 设置地图中心点和缩放级别 |
+
+### 图层控制
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| addWMSLayers | options: WMSOptions | void | 添加 WMS 图层 |
+| setWMSLayerVisible | layerName: string, visible: boolean | void | 控制 WMS 图层显示/隐藏 |
+| handleToggleWMSLayer | layer: WMSLayerConfig | void | 切换 WMS 图层显示状态 |
+| addPointLayer | config: PointLayerConfig, points: PointData[] | number | 添加点位图层 |
+| setPointLayerVisible | layerId: number, visible: boolean | void | 控制点位图层显示/隐藏 |
+
+### 点位渲染
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| addVectorPoints | config: PointLayerConfig | VectorLayer<VectorSource> \| null | 渲染普通点位 |
+| addWebGLPoints | options: WebGLPointOptions | void | 渲染海量点 |
+
+## 类型定义
+
+### PointData 点位数据
+
+```typescript
+interface PointData {
+  longitude: number    // 经度
+  latitude: number     // 纬度
+  title?: string       // 点标题
+  extData?: Record<string, any> // 自定义数据
+}
+```
+
+### PointLayerConfig 点位图层配置
+
+```typescript
+interface PointLayerConfig {
+  id: number          // 图层ID
+  value: string       // 图层名称
+  show: boolean       // 是否显示
+  icon: string        // 图标URL
+  iconAnchor?: [number, number] // 图标锚点
+  onClick?: (point: PointData, event: any) => void // 点击回调函数
+  data?: PointData[]  // 点位数据
+}
+```
+
+### WebGLPointOptions WebGL渲染配置
+
+```typescript
+interface WebGLPointOptions extends PointLayerConfig {
+  iconSize?: [number, number]  // 图标大小
+  enableCluster?: boolean      // 是否开启聚合
+  clusterDistance?: number     // 聚合距离
+  performance?: {              // 性能配置
+    enableChunk?: boolean      // 是否开启分块加载
+    chunkSize?: number         // 每块数据量
+    enableThrottle?: boolean   // 是否开启节流
+    throttleWait?: number      // 节流时间间隔
+  }
+}
+```
+
+## 示例代码
+
+### 添加普通点位
+
+```typescript
+mapRef.value.addVectorPoints({
+  icon: 'path/to/icon.png',
+  iconAnchor: [0.5, 1],
+  data: [
+    {
+      longitude: 116.404,
+      latitude: 39.915,
+      title: '测试点位',
+      extData: { type: 'test' }
+    }
+  ],
+  onClick: (point) => {
+    console.log('点击了点位:', point)
+  }
+})
+```
+
+### 添加分类点位
+
+```typescript
+mapRef.value.addPointLayer(
+  {
+    id: 1,
+    value: '学校',
+    show: true,
+    icon: 'path/to/icon.png',
+    iconAnchor: [0.5, 1],
+    onClick: (point) => {
+      console.log('点击了学校:', point)
+    }
+  },
+  [
+    {
+      longitude: 116.404,
+      latitude: 39.915,
+      title: '北京大学',
+      extData: { type: 'school' }
+    }
+  ]
+)
+```
+
+### 添加海量点
+
+```typescript
+mapRef.value.addWebGLPoints({
+  icon: 'path/to/icon.png',
+  iconSize: [6, 6],
+  data: Array.from({ length: 10000 }, (_, i) => ({
+    longitude: 116.404 + Math.random() * 0.1,
+    latitude: 39.915 + Math.random() * 0.1,
+    title: `点位${i + 1}`,
+    extData: { type: 'mass' }
+  })),
+  performance: {
+    enableChunk: true,
+    chunkSize: 1000
+  }
+})
+```
+
+## 注意事项
+
+1. 使用天地图时需要提供有效的天地图密钥
+2. 海量点渲染建议使用 WebGL 方式，性能更好
+3. 点位图层的 zIndex 会根据是否有 ID 自动设置
+4. 移动端适配已内置，无需额外配置
+
+## 常见问题
+
+1. 地图不显示
+   - 检查容器高度是否设置
+   - 检查网络连接是否正常
+   - 检查天地图密钥是否有效
+
+2. 点位不显示
+   - 检查点位数据格式是否正确
+   - 检查图标 URL 是否可访问
+   - 检查图层是否设置为显示状态
+
+3. 性能问题
+   - 大量点位建议使用 WebGL 渲染
+   - 开启分块加载和节流功能
+   - 合理设置聚合参数 

package/src/components/data/XOlMap/demo.vue

@@ -1,12 +1,68 @@
 <script setup lang="ts">
+import { showNotify } from 'vant'
 import { onMounted, ref } from 'vue'
 import XOlMap from './index.vue'
 import 'vant/lib/index.css'
 
 const mapRef = ref()
 
+// WMS 配置
+const wmsConfig = {
+  layers: [
+    {
+      phoneShow: false,
+      show: false,
+      id: 1,
+      layerName: 'gis:lp',
+      value: '低压管线',
+    },
+    {
+      phoneShow: true,
+      show: true,
+      id: 2,
+      layerName: 'gis:mp',
+      value: '中压管线',
+    },
+    {
+      phoneShow: false,
+      show: false,
+      id: 3,
+      layerName: 'gis:surface_valve',
+      value: '地面阀门',
+    },
+    {
+      phoneShow: false,
+      show: false,
+      id: 4,
+      layerName: 'gis:valve_chamber',
+      value: '阀门井',
+    },
+    {
+      phoneShow: false,
+      show: false,
+      id: 6,
+      layerName: 'gis:hp',
+      value: '高压管线',
+    },
+    {
+      phoneShow: false,
+      show: false,
+      id: 5,
+      layerName: 'gis:pressure_regulating_box',
+      value: '调压箱',
+    },
+  ],
+  wms: {
+    workspace: 'gis',
+    srs: 'EPSG:3857',
+    format: 'image/png',
+    version: '1.1.0',
+    url: '/linepatrol/geoserver/gis/wms',
+  },
+}
+
+// 初始化地图
 onMounted(() => {
-  // 初始化地图
   mapRef.value.init({
     center: [108.948024, 34.263161], // 西安坐标
     zoom: 12,
@@ -14,80 +70,134 @@ onMounted(() => {
     minZoom: 4,
     tianDiTuKey: 'c16876b28898637c0a1a68b3fa410504',
   })
+  mapRef.value.addWMSLayers(wmsConfig)
 })
 
 // 地图控制函数
-function handleSetCenter(): void {
-  // 切换到北京
-  mapRef.value.setCenter([116.404, 39.915])
-}
+const handleSetCenter = () => mapRef.value.setCenter([116.404, 39.915]) // 切换到北京
+const handleSetZoom = () => mapRef.value.setZoom(14) // 设置缩放级别为14
+const handleGetZoom = () => showNotify({ type: 'primary', message: `当前缩放级别：${mapRef.value.getZoom()}` })
+const handleSetCenterAndZoom = () => mapRef.value.setCenterAndZoom([120.153576, 30.287459], 15) // 切换到杭州
 
-function handleSetZoom(): void {
-  // 设置缩放级别为14
-  mapRef.value.setZoom(14)
-}
+// 点位数据
+const poiPoints = [
+  {
+    longitude: 108.988024,
+    latitude: 34.283161,
+    title: '大雁塔',
+    extData: { type: 'poi' },
+  },
+  {
+    longitude: 108.948024,
+    latitude: 34.263161,
+    title: '钟楼',
+    extData: { type: 'poi' },
+  },
+  {
+    longitude: 108.968024,
+    latitude: 34.273161,
+    title: '小寨',
+    extData: { type: 'poi' },
+  },
+]
 
-function handleGetZoom(): void {
-  // 获取当前缩放级别
-  const zoom = mapRef.value.getZoom()
-  // eslint-disable-next-line no-alert
-  alert(`当前缩放级别：${zoom}`)
-}
+const schoolPoints = [
+  {
+    longitude: 108.968024,
+    latitude: 34.273161,
+    title: '西安电子科技大学',
+    extData: {
+      type: 'school',
+      level: '985',
+      studentCount: 25000,
+      departments: ['通信学院', '计算机学院', '电子工程学院'],
+    },
+  },
+]
+
+const hospitalPoints = [
+  {
+    longitude: 108.948024,
+    latitude: 34.263161,
+    title: '西安市第一医院',
+    extData: {
+      type: 'hospital',
+      level: '三甲',
+      departments: ['急诊科', '内科', '外科'],
+      contact: '029-12345678',
+      address: '西安市雁塔区',
+    },
+  },
+  {
+    longitude: 108.978024,
+    latitude: 34.278161,
+    title: '西安市中心医院',
+    extData: {
+      type: 'hospital',
+      level: '三甲',
+      departments: ['急诊科', '内科', '外科'],
+      contact: '029-87654321',
+      address: '西安市新城区',
+    },
+  },
+]
 
-function handleSetCenterAndZoom(): void {
-  // 切换到杭州并设置缩放级别
-  mapRef.value.setCenterAndZoom([120.153576, 30.287459], 15)
+// 点位处理函数
+function handlePointClick(point: any) {
+  showNotify({
+    type: 'primary',
+    message: `点击了: ${point.title}\n类型: ${point.extData.type}`,
+  })
 }
 
-// 添加点位示例,创建两种类型
-function handleAddPoints(): void {
+// 添加点位示例
+function handleAddPoints() {
   mapRef.value.addVectorPoints({
     icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
     iconAnchor: [0.5, 1],
-    data: [
-      {
-        longitude: 108.988024,
-        latitude: 34.283161,
-        title: '示例点2',
-        extData: { type: 'poi' },
-      },
-    ],
-    onClick: (point) => {
-      // eslint-disable-next-line no-alert
-      alert(`点击了: ${point.title}`)
-    },
+    data: poiPoints,
+    onClick: handlePointClick,
   })
-  mapRef.value.addVectorPoints({
-    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
-    iconAnchor: [0.5, 1],
-    data: [
-      {
-        longitude: 108.948024,
-        latitude: 34.263161,
-        title: '西安市',
-        extData: { type: 'city' },
-      },
-    ],
-    onClick: (point) => {
-      // eslint-disable-next-line no-alert
-      alert(`点击了: ${point.title}`)
+}
+
+// 添加分类点位示例
+function handleAddPointLayer() {
+  // 添加学校点位图层
+  mapRef.value.addPointLayer(
+    {
+      id: 1,
+      value: '学校',
+      show: true,
+      icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+      iconAnchor: [0.5, 1],
+      onClick: handlePointClick,
     },
-  })
+    schoolPoints,
+  )
+
+  // 添加医院点位图层
+  mapRef.value.addPointLayer(
+    {
+      id: 2,
+      value: '医院',
+      show: true,
+      icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+      iconAnchor: [0.5, 1],
+      onClick: handlePointClick,
+    },
+    hospitalPoints,
+  )
 }
 
 // 添加海量点示例
-function handleAddMassPoints(): void {
+function handleAddMassPoints() {
   // 生成10000个随机点
-  const data = Array.from({ length: 10000 }, (_, index) => {
-    // 在西安市区范围内随机生成点
-    const offset = 0.1 // 控制点的分布范围
-    return {
-      longitude: 108.948024 + (Math.random() - 0.5) * offset,
-      latitude: 34.263161 + (Math.random() - 0.5) * offset,
-      title: `点位${index + 1}`,
-      extData: { type: 'mass' },
-    }
-  })
+  const data = Array.from({ length: 10000 }, (_, index) => ({
+    longitude: 108.948024 + (Math.random() - 0.5) * 0.1,
+    latitude: 34.263161 + (Math.random() - 0.5) * 0.1,
+    title: `点位${index + 1}`,
+    extData: { type: 'mass' },
+  }))
 
   mapRef.value.addWebGLPoints({
     icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
@@ -132,6 +242,9 @@ function handleAddMassPoints(): void {
         <van-button type="success" size="small" @click="handleAddPoints">
           添加普通点位
         </van-button>
+        <van-button type="success" size="small" @click="handleAddPointLayer">
+          添加分类点位
+        </van-button>
         <van-button type="warning" size="small" @click="handleAddMassPoints">
           添加海量点(1万)
         </van-button>
@@ -177,6 +290,14 @@ function handleAddMassPoints(): void {
       padding-left: 4px;
       border-left: 3px solid #1989fa;
     }
+
+    :deep(.van-button) {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   :deep(.van-button) {