af-mobile-client-vue3 1.3.88 → 1.3.90

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.3.88",
+  "version": "1.3.90",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/core/ImageUploader/index.vue

@@ -5,6 +5,7 @@ import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { formatNow } from '@af-mobile-client-vue3/utils/timeUtil'
 import {
   ActionSheet,
+  showToast,
   Icon as VanIcon,
   Uploader as vanUploader,
 } from 'vant'
@@ -171,8 +172,11 @@ function triggerCamera() {
         handlePhotoUpload(result.data)
       }
       else {
-        // 浏览器模式：调起相机输入
-        openBrowserCameraPicker()
+        if (props.isAsyncUpload)
+          showToast('此处不允许浏览器上传，请在移动端操作')
+        else
+          // 浏览器模式：打开文件选择
+          openBrowserFilePicker()
       }
     },
   })
@@ -392,8 +396,11 @@ function handleActionSelect(option: any) {
           })
         }
         else {
-          // 浏览器模式：打开文件选择
-          openBrowserFilePicker()
+          if (props.isAsyncUpload)
+            showToast('此处不允许浏览器上传，请在移动端操作')
+          else
+            // 浏览器模式：打开文件选择
+            openBrowserFilePicker()
         }
       },
     })

package/src/components/data/XCellList/index.vue

@@ -1308,7 +1308,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
           min-width: 76px;
           height: 40px;
           border-radius: 10px;
-          padding: 0 14px;
+          padding: 0 10px;
           // font-size: var(--van-font-size-md);
           transition: all 0.2s ease;
           &:active {

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

@@ -12,6 +12,8 @@ import type {
   PhoneLocationStatus,
   PointData,
   PointLayerConfig,
+  PolygonData,
+  PolygonLayerConfig,
   TrackData,
   WebGLPointOptions,
   WMSLayerConfig,
@@ -25,6 +27,7 @@ import { defaults as defaultControls, ScaleLine } from 'ol/control'
 import Feature from 'ol/Feature'
 import LineString from 'ol/geom/LineString'
 import Point from 'ol/geom/Point'
+import Polygon from 'ol/geom/Polygon'
 import { defaults as defaultInteractions } from 'ol/interaction'
 import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
 import { fromLonLat, toLonLat } from 'ol/proj'
@@ -91,6 +94,10 @@ let locationLayer: VectorLayer<VectorSource> | null = null
 const trackLayers: Record<number, VectorLayer<VectorSource>> = {}
 const trackLayerStatus = ref<TrackData[]>([])
 
+/** 存储多边形图层 */
+const polygonLayers: Record<number, VectorLayer<VectorSource>> = {}
+const polygonLayerStatus = ref<PolygonLayerConfig[]>([])
+
 /**
  * 创建位置图标图层
  */
@@ -564,6 +571,46 @@ function createPointFeature(point: PointData, icon: string, iconAnchor: [number,
   return feature
 }
 
+/**
+ * 创建多边形要素
+ * @param polygon - 多边形数据
+ * @returns 返回要素实例
+ */
+function createPolygonFeature(polygon: PolygonData): Feature {
+  // 将经纬度坐标转换为地图坐标
+  const coordinates = polygon.coordinates.map(coord => fromLonLat(coord))
+
+  const feature = new Feature({
+    geometry: new Polygon([coordinates]),
+    properties: polygon,
+  })
+
+  // 设置多边形样式
+  const style = new Style({
+    fill: new Fill({
+      color: polygon.fillColor || 'rgba(255, 0, 0, 0.3)',
+    }),
+    stroke: new Stroke({
+      color: polygon.strokeColor || '#ff0000',
+      width: polygon.strokeWidth || 2,
+    }),
+    text: new Text({
+      text: polygon.name || '',
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  feature.setStyle(style)
+  return feature
+}
+
 /**
  * 创建点位图层
  * @param config - 图层配置
@@ -911,6 +958,102 @@ function navigationHandleLocation() {
   }
 }
 
+/**
+ * 创建多边形图层
+ * @param config - 图层配置
+ * @returns 返回图层实例
+ */
+function createPolygonLayer(config: PolygonLayerConfig): VectorLayer<VectorSource> {
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    visible: config.show,
+    zIndex: config.id === undefined ? 1 : 4, // 多边形图层层级稍高
+  })
+
+  // 添加多边形要素
+  const addFeatures = (data: PolygonData[]) => {
+    // 清除现有要素
+    vectorSource.clear()
+    // 添加新的多边形要素
+    data.forEach((polygon) => {
+      const feature = createPolygonFeature(polygon)
+      vectorSource.addFeature(feature)
+    })
+  }
+
+  // 添加点击事件处理
+  if (config.onClick) {
+    map?.on('click', (event) => {
+      const feature = map.forEachFeatureAtPixel(event.pixel, feature => feature, {
+        layerFilter: layer => layer === vectorLayer,
+      })
+      if (feature) {
+        const properties = feature.getProperties()
+        const { geometry, ...polygonData } = properties
+        config.onClick(polygonData as PolygonData, event)
+      }
+    })
+  }
+
+  // 监听图层可见性变化
+  vectorLayer.on('change:visible', async () => {
+    if (vectorLayer.getVisible() && config.dataProvider) {
+      try {
+        const data = await config.dataProvider()
+        addFeatures(data)
+      }
+      catch (error) {
+        console.error('获取多边形数据失败:', error)
+      }
+    }
+  })
+
+  // 初始加载数据
+  if (config.show && config.dataProvider) {
+    const result = config.dataProvider()
+    if (result instanceof Promise) {
+      result.then((data) => {
+        addFeatures(data)
+      }).catch((error) => {
+        console.error('获取初始多边形数据失败:', error)
+      })
+    }
+    else {
+      addFeatures(result)
+    }
+  }
+
+  return vectorLayer
+}
+
+/**
+ * 添加多边形图层
+ * @param config - 图层配置
+ * @returns 返回图层实例
+ */
+function addPolygonLayer(config: PolygonLayerConfig): VectorLayer<VectorSource> | null {
+  if (!map)
+    return null
+
+  const vectorLayer = createPolygonLayer(config)
+  map.addLayer(vectorLayer)
+  polygonLayers[config.id] = vectorLayer
+
+  // 更新图层状态
+  if (config.showInControl !== false) {
+    const existingIndex = polygonLayerStatus.value.findIndex(layer => layer.id === config.id)
+    if (existingIndex === -1) {
+      polygonLayerStatus.value.push(config)
+    }
+    else {
+      polygonLayerStatus.value[existingIndex] = config
+    }
+  }
+
+  return vectorLayer
+}
+
 /**
  * 添加轨迹图层
  * @param trackData - 轨迹数据
@@ -1044,6 +1187,31 @@ function handleToggleTrackLayer(track: TrackData): void {
   setTrackLayerVisible(track.id, track.show)
 }
 
+/**
+ * 控制多边形图层显示/隐藏
+ * @param layerId - 图层ID
+ * @param visible - 是否显示
+ */
+function setPolygonLayerVisible(layerId: number, visible: boolean): void {
+  const layer = polygonLayers[layerId]
+  if (layer) {
+    layer.setVisible(visible)
+    // 更新图层状态
+    const layerIndex = polygonLayerStatus.value.findIndex(layer => layer.id === layerId)
+    if (layerIndex !== -1) {
+      polygonLayerStatus.value[layerIndex].show = visible
+    }
+  }
+}
+
+/**
+ * 切换多边形图层显示状态
+ */
+function handleTogglePolygonLayer(layer: PolygonLayerConfig): void {
+  layer.show = !layer.show
+  setPolygonLayerVisible(layer.id, layer.show)
+}
+
 // 暴露方法给父组件
 defineExpose({
   updateLocationMarker,
@@ -1067,6 +1235,9 @@ defineExpose({
   addTrackLayer,
   setTrackLayerVisible,
   handleToggleTrackLayer,
+  addPolygonLayer,
+  setPolygonLayerVisible,
+  handleTogglePolygonLayer,
 })
 
 // 组件卸载时清理地图实例
@@ -1185,6 +1356,25 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+
+        <!-- 多边形图层 -->
+        <div v-if="polygonLayerStatus.length > 0" class="control-panel layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-map-marked" /> 多边形图层
+          </div>
+          <div class="layer-list">
+            <div
+              v-for="layer in polygonLayerStatus"
+              :key="layer.id"
+              class="layer-item"
+              :class="{ active: layer.show }"
+              @click="handleTogglePolygonLayer(layer)"
+            >
+              <i class="van-icon" :class="layer.show ? 'van-icon-eye' : 'van-icon-closed-eye'" />
+              <span>{{ layer.value }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

package/src/components/data/XOlMap/types.ts

@@ -147,3 +147,45 @@ export interface TrackData {
   color: string
   show?: boolean // 是否显示
 }
+
+/**
+ * 多边形数据接口
+ */
+export interface PolygonData {
+  /** 多边形ID */
+  id: number
+  /** 多边形名称 */
+  name: string
+  /** 多边形坐标点数组 [经度, 纬度][] */
+  coordinates: [number, number][]
+  /** 填充颜色 */
+  fillColor?: string
+  /** 边框颜色 */
+  strokeColor?: string
+  /** 边框宽度 */
+  strokeWidth?: number
+  /** 透明度 */
+  opacity?: number
+  /** 是否显示 */
+  show?: boolean
+  /** 自定义数据 */
+  extData?: Record<string, any>
+}
+
+/**
+ * 多边形图层配置接口
+ */
+export interface PolygonLayerConfig {
+  /** 图层ID */
+  id: number
+  /** 图层名称 */
+  value: string
+  /** 是否显示 */
+  show: boolean
+  /** 是否在控制面板显示 */
+  showInControl?: boolean
+  /** 点击事件处理函数 */
+  onClick?: (polygon: PolygonData, event: any) => void
+  /** 多边形数据提供者 */
+  dataProvider?: () => PolygonData[] | Promise<PolygonData[]>
+}