af-mobile-client-vue3 1.0.98 → 1.1.2

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

@@ -12,12 +12,14 @@ import { defaults as defaultControls, ScaleLine } from 'ol/control'
 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
 import { defaults as defaultInteractions } from 'ol/interaction'
-import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
+import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
 import { fromLonLat } from 'ol/proj'
-import { Vector as VectorSource, XYZ } from 'ol/source'
-import { Circle as CircleStyle, Fill, Icon, Stroke, Style } from 'ol/style'
+import { ImageWMS, Vector as VectorSource, XYZ } from 'ol/source'
+import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
+import { Button } from 'vant'
 import { onUnmounted, ref } from 'vue'
-import 'vant/lib/index.css' // 添加 Vant 样式
+import { wgs84ToGcj02Projection } from './utils/wgs84ToGcj02'
+import 'vant/lib/index.css'
 
 /** 初始化参数接口 */
 interface InitParams {
@@ -46,21 +48,27 @@ interface PointData {
 }
 
 /** 点位图层配置接口 */
-interface PointLayerOptions {
-  /** 图标URL地址 */
+interface PointLayerConfig {
+  /** 图层ID */
+  id: number
+  /** 图层名称 */
+  value: string
+  /** 是否显示 */
+  show: boolean
+  /** 图标URL */
   icon: string
-  /** 图标大小 [宽, 高] */
-  iconSize?: [number, number]
-  /** 图标锚点位置 [x, y]，范围 0-1 */
+  /** 图标锚点 */
   iconAnchor?: [number, number]
-  /** 点位数据数组 */
-  data: PointData[]
-  /** 点击事件回调 */
+  /** 点击回调函数 */
   onClick?: (point: PointData, event: any) => void
+  /** 点位数据 */
+  data?: PointData[]
 }
 
 /** WebGL渲染配置接口 */
-interface WebGLPointOptions extends PointLayerOptions {
+interface WebGLPointOptions extends PointLayerConfig {
+  /** 图标大小 */
+  iconSize?: [number, number]
   /** 是否开启聚合 */
   enableCluster?: boolean
   /** 聚合距离，单位像素 */
@@ -87,12 +95,48 @@ interface WebGLPointOptions extends PointLayerOptions {
   }
 }
 
+/** WMS 图层配置接口 */
+interface WMSLayerConfig {
+  /** 图层名称 */
+  layerName: string
+  /** 图层显示名称 */
+  value: string
+  /** 是否显示 */
+  show: boolean
+  /** 手机端是否显示 */
+  phoneShow: boolean
+  /** 图层 ID */
+  id: number
+}
+
+/** WMS 服务配置接口 */
+interface WMSConfig {
+  /** 工作空间 */
+  workspace: string
+  /** 坐标系 */
+  srs: string
+  /** 图片格式 */
+  format: string
+  /** WMS 版本 */
+  version: string
+  /** WMS 服务地址 */
+  url: string
+}
+
+/** WMS 完整配置接口 */
+interface WMSOptions {
+  /** WMS 图层列表 */
+  layers: WMSLayerConfig[]
+  /** WMS 服务配置 */
+  wms: WMSConfig
+}
+
 /** 地图容器引用 */
 const mapRef = ref<HTMLDivElement>()
 /** 地图实例 */
 let map: Map | null = null
 /** 当前底图类型 */
-const currentMapType = ref<string>('tianditu')
+const currentMapType = ref<string>('gaode')
 
 /** 图层选项配置 */
 const layerOptions = [
@@ -105,6 +149,16 @@ const layerOptions = [
 /** 存储所有底图图层 */
 const baseMaps: Record<string, TileLayer<XYZ>> = {}
 
+/** 存储 WMS 图层 */
+const wmsLayers: Record<string, ImageLayer<ImageWMS>> = {}
+
+/** WMS 图层状态 */
+const wmsLayerStatus = ref<WMSLayerConfig[]>([])
+
+/** 存储点位图层 */
+const vectorLayers: Record<number, VectorLayer<VectorSource>> = {}
+const pointLayerStatus = ref<PointLayerConfig[]>([])
+
 /**
  * 切换地图图层
  * @param type - 图层类型
@@ -175,7 +229,7 @@ function initializeLayers(tianDiTuKey = ''): void {
       url: 'http://t0.tianditu.gov.cn/vec_w/wmts?'
         + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&'
         + `FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tianDiTuKey}`,
-      projection: 'EPSG:3857',
+      projection: wgs84ToGcj02Projection,
     }),
     visible: false,
   })
@@ -186,7 +240,7 @@ function initializeLayers(tianDiTuKey = ''): void {
       url: 'http://t0.tianditu.gov.cn/cva_w/wmts?'
         + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&'
         + `FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tianDiTuKey}`,
-      projection: 'EPSG:3857',
+      projection: wgs84ToGcj02Projection,
     }),
     visible: false,
   })
@@ -197,7 +251,7 @@ function initializeLayers(tianDiTuKey = ''): void {
       url: 'http://t0.tianditu.gov.cn/img_w/wmts?'
         + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&'
         + `FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tianDiTuKey}`,
-      projection: 'EPSG:3857',
+      projection: wgs84ToGcj02Projection,
     }),
     visible: false,
   })
@@ -208,7 +262,7 @@ function initializeLayers(tianDiTuKey = ''): void {
       url: 'http://t0.tianditu.gov.cn/cia_w/wmts?'
         + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&'
         + `FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tianDiTuKey}`,
-      projection: 'EPSG:3857',
+      projection: wgs84ToGcj02Projection,
     }),
     visible: false,
   })
@@ -371,62 +425,76 @@ function setCenterAndZoom(center: [number, number], zoom: number, animate = true
 }
 
 /**
- * 渲染点位
- * @param options - 点位图层配置
- * @returns 返回图层实例
+ * 创建点位要素
+ * @param point - 点位数据
+ * @param icon - 图标URL
+ * @param iconAnchor - 图标锚点
+ * @returns 返回要素实例
  */
-function addVectorPoints(options: PointLayerOptions): VectorLayer<VectorSource> | null {
-  if (!map)
-    return null
+function createPointFeature(point: PointData, icon: string, iconAnchor: [number, number] = [0.5, 1]): Feature {
+  const feature = new Feature({
+    geometry: new Point(fromLonLat([point.longitude, point.latitude])),
+    properties: point,
+  })
 
-  const {
-    icon,
-    iconAnchor = [0.5, 1],
-    data,
-    onClick,
-  } = options
+  const style = new Style({
+    image: new Icon({
+      src: icon,
+      scale: 0.5,
+      anchor: iconAnchor,
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'fraction',
+      crossOrigin: 'anonymous',
+    }),
+    text: new Text({
+      text: point.title || '',
+      offsetY: -35,
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  feature.setStyle(style)
+  return feature
+}
 
+/**
+ * 创建点位图层
+ * @param config - 图层配置
+ * @param points - 点位数据
+ * @returns 返回图层实例
+ */
+function createPointLayer(config: PointLayerConfig, points: PointData[]): VectorLayer<VectorSource> {
   const vectorSource = new VectorSource()
   const vectorLayer = new VectorLayer({
     source: vectorSource,
-    zIndex: 1,
+    visible: config.show,
+    zIndex: config.id === undefined ? 1 : 3, // 根据是否有ID决定层级
   })
 
-  data.forEach((point) => {
-    const feature = new Feature({
-      geometry: new Point(fromLonLat([point.longitude, point.latitude])),
-      properties: {
-        ...point,
-      },
-    })
-
-    const style = new Style({
-      image: new Icon({
-        src: icon,
-        scale: 0.5,
-        anchor: iconAnchor,
-        anchorXUnits: 'fraction',
-        anchorYUnits: 'fraction',
-        crossOrigin: 'anonymous',
-      }),
-    })
-
-    feature.setStyle(style)
+  // 添加点位要素
+  points.forEach((point) => {
+    const feature = createPointFeature(point, config.icon, config.iconAnchor)
     vectorSource.addFeature(feature)
   })
 
-  map.addLayer(vectorLayer)
-
-  if (onClick) {
-    map.on('click', (event) => {
-      map.forEachFeatureAtPixel(event.pixel, (feature) => {
-        if (feature) {
-          const properties = feature.getProperties()
-          onClick(properties as PointData, event)
-          return true
-        }
-        return false
+  // 添加点击事件处理
+  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, ...pointData } = properties
+        config.onClick(pointData as PointData, event)
+      }
     })
   }
 
@@ -434,82 +502,140 @@ function addVectorPoints(options: PointLayerOptions): VectorLayer<VectorSource>
 }
 
 /**
- * 渲染海量点（适用于10万+数据量）
- * @param options - WebGL渲染配置
+ * 渲染点位
+ * @param config - 点位图层配置
  * @returns 返回图层实例
  */
-function addWebGLPoints(options: WebGLPointOptions): VectorLayer<VectorSource> | null {
-  if (!map)
+function addVectorPoints(config: PointLayerConfig): VectorLayer<VectorSource> | null {
+  if (!map || !config.data)
     return null
 
-  const {
-    iconSize = [16, 16],
-    data,
-    performance = {
-      enableChunk: true,
-      chunkSize: 5000,
-      enableThrottle: true,
-      throttleWait: 100,
-    },
-  } = options
-
-  // 创建矢量图层，使用 Canvas 渲染器优化性能
-  const vectorSource = new VectorSource()
-  const vectorLayer = new VectorLayer({
-    source: vectorSource,
-    style: new Style({
-      image: new CircleStyle({
-        radius: iconSize[0] / 2,
-        fill: new Fill({
-          color: 'rgba(0, 150, 255, 0.8)',
-        }),
-        stroke: new Stroke({
-          color: '#fff',
-          width: 1,
-        }),
-      }),
-    }),
-    updateWhileAnimating: false, // 动画时不更新以提高性能
-    updateWhileInteracting: false, // 交互时不更新以提高性能
-    zIndex: 1,
+  const vectorLayer = createPointLayer(config, config.data)
+  map.addLayer(vectorLayer)
+  return vectorLayer
+}
+
+/**
+ * 添加 WMS 图层
+ * @param options - WMS 配置
+ */
+function addWMSLayers(options: WMSOptions): void {
+  if (!map)
+    return
+
+  const { layers, wms } = options
+
+  // 更新图层状态
+  wmsLayerStatus.value = layers.map(layer => ({
+    ...layer,
+    show: layer.show,
+  }))
+
+  // 移除已存在的 WMS 图层
+  Object.values(wmsLayers).forEach((layer) => {
+    map?.removeLayer(layer)
   })
 
-  // 分块加载数据
-  if (performance.enableChunk) {
-    const chunkSize = performance.chunkSize || 5000
-    for (let i = 0; i < data.length; i += chunkSize) {
-      const chunk = data.slice(i, i + chunkSize)
-      setTimeout(() => {
-        const features = chunk.map(point =>
-          new Feature({
-            geometry: new Point(fromLonLat([point.longitude, point.latitude])),
-            properties: {
-              title: point.title,
-              ...point.extData,
-            },
-          }),
-        )
-        vectorSource.addFeatures(features)
-      }, 0)
-    }
+  // 清空图层记录
+  Object.keys(wmsLayers).forEach((key) => {
+    delete wmsLayers[key]
+  })
+
+  // 添加新的 WMS 图层
+  layers.forEach((layerConfig) => {
+    const wmsSource = new ImageWMS({
+      url: wms.url,
+      params: {
+        LAYERS: layerConfig.layerName,
+        FORMAT: wms.format,
+        VERSION: wms.version,
+        SRS: wms.srs,
+      },
+      ratio: 1,
+      serverType: 'geoserver',
+    })
+
+    const wmsLayer = new ImageLayer({
+      source: wmsSource,
+      visible: layerConfig.show,
+      zIndex: 2,
+    })
+
+    wmsLayers[layerConfig.layerName] = wmsLayer
+    map.addLayer(wmsLayer)
+  })
+}
+
+/**
+ * 控制 WMS 图层显示/隐藏
+ * @param layerName - 图层名称
+ * @param visible - 是否显示
+ */
+function setWMSLayerVisible(layerName: string, visible: boolean): void {
+  const layer = wmsLayers[layerName]
+  if (layer) {
+    layer.setVisible(visible)
+  }
+}
+
+/**
+ * 切换 WMS 图层显示状态
+ * @param layer - 图层配置
+ */
+function handleToggleWMSLayer(layer: WMSLayerConfig): void {
+  layer.show = !layer.show
+  setWMSLayerVisible(layer.layerName, layer.show)
+}
+
+/**
+ * 添加点位图层
+ * @param config - 图层配置
+ * @param points - 点位数据
+ * @returns 返回图层ID
+ */
+function addPointLayer(config: PointLayerConfig, points: PointData[]): number {
+  if (!map)
+    return -1
+
+  const vectorLayer = createPointLayer(config, points)
+  map.addLayer(vectorLayer)
+  vectorLayers[config.id] = vectorLayer
+
+  // 更新图层状态
+  const existingIndex = pointLayerStatus.value.findIndex(layer => layer.id === config.id)
+  if (existingIndex === -1) {
+    pointLayerStatus.value.push(config)
   }
   else {
-    const features = data.map(point =>
-      new Feature({
-        geometry: new Point(fromLonLat([point.longitude, point.latitude])),
-        properties: {
-          title: point.title,
-          ...point.extData,
-        },
-      }),
-    )
-    vectorSource.addFeatures(features)
+    pointLayerStatus.value[existingIndex] = config
   }
 
-  // 添加到地图
-  map.addLayer(vectorLayer)
+  return config.id
+}
 
-  return vectorLayer
+/**
+ * 控制点位图层显示/隐藏
+ * @param layerId - 图层ID
+ * @param visible - 是否显示
+ */
+function setPointLayerVisible(layerId: number, visible: boolean): void {
+  const layer = vectorLayers[layerId]
+  if (layer) {
+    layer.setVisible(visible)
+    // 更新图层状态
+    const layerIndex = pointLayerStatus.value.findIndex(layer => layer.id === layerId)
+    if (layerIndex !== -1) {
+      pointLayerStatus.value[layerIndex].show = visible
+    }
+  }
+}
+
+/**
+ * 切换点位图层显示状态
+ */
+function handleTogglePointLayer(layer: PointLayerConfig): void {
+  layer.show = !layer.show
+  setPointLayerVisible(layer.id, layer.show)
 }
 
 // 暴露方法给父组件
@@ -521,7 +647,11 @@ defineExpose({
   getZoom,
   setCenterAndZoom,
   addVectorPoints,
-  addWebGLPoints,
+  addWMSLayers,
+  setWMSLayerVisible,
+  handleToggleWMSLayer,
+  addPointLayer,
+  setPointLayerVisible,
 })
 
 // 组件卸载时清理地图实例
@@ -537,13 +667,55 @@ onUnmounted(() => {
   <div class="map-wrapper">
     <div ref="mapRef" class="ol-map" />
 
-    <!-- 图层切换下拉框 -->
-    <div class="layer-selector">
-      <select v-model="currentMapType" @change="handleMapChange(currentMapType)">
-        <option v-for="layer in layerOptions" :key="layer.value" :value="layer.value">
-          {{ layer.text }}
-        </option>
-      </select>
+    <!-- 图层控制面板 -->
+    <div class="map-controls">
+      <!-- 底图切换 -->
+      <div class="control-panel base-layer-control">
+        <div class="control-title">
+          底图切换
+        </div>
+        <select v-model="currentMapType" @change="handleMapChange(currentMapType)">
+          <option v-for="layer in layerOptions" :key="layer.value" :value="layer.value">
+            {{ layer.text }}
+          </option>
+        </select>
+      </div>
+
+      <!-- WMS 图层控制 -->
+      <div v-if="wmsLayerStatus.length > 0" class="control-panel wms-layer-control">
+        <div class="control-title">
+          图层控制
+        </div>
+        <div class="control-buttons">
+          <Button
+            v-for="layer in wmsLayerStatus"
+            :key="layer.id"
+            :type="layer.show ? 'primary' : 'default'"
+            size="small"
+            @click="handleToggleWMSLayer(layer)"
+          >
+            {{ layer.value }}
+          </Button>
+        </div>
+      </div>
+
+      <!-- 点位图层控制 -->
+      <div v-if="pointLayerStatus.length > 0" class="control-panel point-layer-control">
+        <div class="control-title">
+          点位图层
+        </div>
+        <div class="control-buttons">
+          <Button
+            v-for="layer in pointLayerStatus"
+            :key="layer.id"
+            :type="layer.show ? 'primary' : 'default'"
+            size="small"
+            @click="handleTogglePointLayer(layer)"
+          >
+            {{ layer.value }}
+          </Button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -566,20 +738,39 @@ onUnmounted(() => {
   }
 }
 
-.layer-selector {
+.map-controls {
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.control-panel {
   background: white;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 2px;
+  padding: 10px;
+  min-width: 140px;
 
+  .control-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 8px;
+    padding-left: 4px;
+    border-left: 3px solid #1989fa;
+  }
+}
+
+.base-layer-control {
   select {
+    width: 100%;
     padding: 6px 24px 6px 12px;
     font-size: 14px;
-    border: none;
+    border: 1px solid #dcdee0;
     border-radius: 4px;
     background-color: white;
     cursor: pointer;
@@ -593,7 +784,7 @@ onUnmounted(() => {
     background-size: 12px;
 
     &:hover {
-      background-color: #f5f5f5;
+      border-color: #1989fa;
     }
 
     option {
@@ -602,6 +793,54 @@ onUnmounted(() => {
   }
 }
 
+.wms-layer-control {
+  .control-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    :deep(.van-button) {
+      width: 100%;
+      justify-content: flex-start;
+      padding-left: 12px;
+      border-radius: 4px;
+
+      &--default {
+        border: 1px solid #dcdee0;
+
+        &:hover {
+          border-color: #1989fa;
+          color: #1989fa;
+        }
+      }
+    }
+  }
+}
+
+.point-layer-control {
+  .control-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    :deep(.van-button) {
+      width: 100%;
+      justify-content: flex-start;
+      padding-left: 12px;
+      border-radius: 4px;
+
+      &--default {
+        border: 1px solid #dcdee0;
+
+        &:hover {
+          border-color: #1989fa;
+          color: #1989fa;
+        }
+      }
+    }
+  }
+}
+
 // 比例尺样式
 :deep(.ol-scale-line) {
   position: absolute;
@@ -625,10 +864,23 @@ onUnmounted(() => {
 
 // 移动端适配
 @media screen and (max-width: 768px) {
-  .layer-selector {
+  .map-controls {
     right: 8px;
     top: 8px;
+    gap: 8px;
+  }
+
+  .control-panel {
+    padding: 8px;
+    min-width: 120px;
+
+    .control-title {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+  }
 
+  .base-layer-control {
     select {
       padding: 4px 20px 4px 8px;
       font-size: 12px;
@@ -636,6 +888,28 @@ onUnmounted(() => {
     }
   }
 
+  .wms-layer-control {
+    .control-buttons {
+      gap: 6px;
+
+      :deep(.van-button) {
+        font-size: 12px;
+        padding: 0 8px;
+      }
+    }
+  }
+
+  .point-layer-control {
+    .control-buttons {
+      gap: 6px;
+
+      :deep(.van-button) {
+        font-size: 12px;
+        padding: 0 8px;
+      }
+    }
+  }
+
   :deep(.ol-scale-line) {
     transform: scale(0.8);
     transform-origin: left bottom;