af-mobile-client-vue3 1.1.3 → 1.1.5

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

@@ -7,136 +7,50 @@
  * - 天地图（矢量）
  * - 天地图卫星图
  */
+import type {
+  InitParams,
+  PhoneLocationStatus,
+  PointData,
+  PointLayerConfig,
+  WebGLPointOptions,
+  WMSLayerConfig,
+  WMSOptions,
+} from './types'
+import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { Map, View } from 'ol'
 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 { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
-import { fromLonLat } from 'ol/proj'
+import { fromLonLat, toLonLat } from 'ol/proj'
 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 { getCurrentInstance, onUnmounted, ref } from 'vue'
 import { wgs84ToGcj02Projection } from './utils/wgs84ToGcj02'
 import 'vant/lib/index.css'
 
-/** 初始化参数接口 */
-interface InitParams {
-  /** 地图中心点坐标 [经度, 纬度] */
-  center?: [number, number]
-  /** 地图缩放级别 */
-  zoom?: number
-  /** 最大缩放级别 */
-  maxZoom?: number
-  /** 最小缩放级别 */
-  minZoom?: number
-  /** 天地图密钥 */
-  tianDiTuKey?: string
-}
-
-/** 点位数据接口 */
-interface PointData {
-  /** 经度 */
-  longitude: number
-  /** 纬度 */
-  latitude: number
-  /** 点标题 */
-  title?: string
-  /** 自定义数据 */
-  extData?: Record<string, any>
-}
-
-/** 点位图层配置接口 */
-interface PointLayerConfig {
-  /** 图层ID */
-  id: number
-  /** 图层名称 */
-  value: string
-  /** 是否显示 */
-  show: boolean
-  /** 图标URL */
-  icon: string
-  /** 图标锚点 */
-  iconAnchor?: [number, number]
-  /** 点击回调函数 */
-  onClick?: (point: PointData, event: any) => void
-  /** 点位数据 */
-  data?: PointData[]
-}
-
-/** WebGL渲染配置接口 */
-interface WebGLPointOptions extends PointLayerConfig {
-  /** 图标大小 */
-  iconSize?: [number, number]
-  /** 是否开启聚合 */
-  enableCluster?: boolean
-  /** 聚合距离，单位像素 */
-  clusterDistance?: number
-  /** 聚合样式配置 */
-  clusterStyle?: {
-    /** 填充颜色 */
-    fillColor?: string
-    /** 边框颜色 */
-    strokeColor?: string
-    /** 文字颜色 */
-    textColor?: string
-  }
-  /** 渲染性能配置 */
-  performance?: {
-    /** 是否开启分块加载 */
-    enableChunk?: boolean
-    /** 每块数据量 */
-    chunkSize?: number
-    /** 是否开启节流 */
-    enableThrottle?: boolean
-    /** 节流时间间隔(ms) */
-    throttleWait?: number
-  }
-}
-
-/** WMS 图层配置接口 */
-interface WMSLayerConfig {
-  /** 图层名称 */
-  layerName: string
-  /** 图层显示名称 */
-  value: string
-  /** 是否显示 */
-  show: boolean
-  /** 手机端是否显示 */
-  phoneShow: boolean
-  /** 图层 ID */
-  id: number
-}
+// 在 script setup 中添加
+const emit = defineEmits<{
+  (e: 'centerChange', center: [number, number]): void
+}>()
 
-/** WMS 服务配置接口 */
-interface WMSConfig {
-  /** 工作空间 */
-  workspace: string
-  /** 坐标系 */
-  srs: string
-  /** 图片格式 */
-  format: string
-  /** WMS 版本 */
-  version: string
-  /** WMS 服务地址 */
-  url: string
-}
+// 获取当前组件实例
+const instance = getCurrentInstance()
 
-/** WMS 完整配置接口 */
-interface WMSOptions {
-  /** WMS 图层列表 */
-  layers: WMSLayerConfig[]
-  /** WMS 服务配置 */
-  wms: WMSConfig
-}
+// 存储初始化参数
+const mapParams = ref<InitParams>({})
 
 /** 地图容器引用 */
 const mapRef = ref<HTMLDivElement>()
 /** 地图实例 */
 let map: Map | null = null
 /** 当前底图类型 */
-const currentMapType = ref<string>('gaode')
+const currentMapType = ref<string>('tianditu')
+/** 控制图层面板显示状态 */
+const showControls = ref<boolean>(false)
 
 /** 图层选项配置 */
 const layerOptions = [
@@ -159,6 +73,60 @@ const wmsLayerStatus = ref<WMSLayerConfig[]>([])
 const vectorLayers: Record<number, VectorLayer<VectorSource>> = {}
 const pointLayerStatus = ref<PointLayerConfig[]>([])
 
+/** 导航模式 是否正在跟随定位 */
+const isFollowingLocation = ref(false)
+/** 定位定时器 */
+let locationTimer: ReturnType<typeof setInterval> | null = null
+/** 位置图标图层 */
+let locationLayer: VectorLayer<VectorSource> | null = null
+
+/**
+ * 创建位置图标图层
+ */
+function createLocationLayer(): VectorLayer<VectorSource> {
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    zIndex: 10, // 确保位置图标在最上层
+  })
+  return layer
+}
+
+/**
+ * 更新位置图标
+ */
+function updateLocationMarker(center: [number, number]): void {
+  if (!map || !locationLayer)
+    return
+
+  const source = locationLayer.getSource()
+  if (!source)
+    return
+
+  // 清除现有图标
+  source.clear()
+
+  // 创建新的位置图标要素
+  const feature = new Feature({
+    geometry: new Point(fromLonLat(center)),
+  })
+
+  // 设置图标样式
+  const style = new Style({
+    image: new Icon({
+      src: locationIcon,
+      scale: 0.2,
+      anchor: [0.5, 0.5],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'fraction',
+      crossOrigin: 'anonymous',
+    }),
+  })
+
+  feature.setStyle(style)
+  source.addFeature(feature)
+}
+
 /**
  * 切换地图图层
  * @param type - 图层类型
@@ -187,6 +155,11 @@ function handleMapChange(type: string): void {
       baseMaps.gaode.setVisible(true)
   }
   currentMapType.value = type
+
+  // 强制更新地图视图，确保切换后的图层显示正确
+  if (map) {
+    map.updateSize()
+  }
 }
 
 /**
@@ -194,78 +167,139 @@ function handleMapChange(type: string): void {
  * @param tianDiTuKey - 天地图密钥
  */
 function initializeLayers(tianDiTuKey = ''): void {
-  // 高德地图
-  baseMaps.gaode = new TileLayer({
-    source: new XYZ({
-      url: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
-      crossOrigin: 'anonymous',
-      projection: 'EPSG:3857',
-    }),
-  })
+  try {
+    // 高德地图
+    baseMaps.gaode = new TileLayer({
+      source: new XYZ({
+        url: 'https://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+        crossOrigin: 'anonymous',
+        projection: 'EPSG:3857',
+      }),
+    })
 
-  // 高德卫星图
-  baseMaps.gaodeSatellite = new TileLayer({
-    source: new XYZ({
-      url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-      crossOrigin: 'anonymous',
-      projection: 'EPSG:3857',
-    }),
-    visible: false,
-  })
+    // 高德卫星图
+    baseMaps.gaodeSatellite = new TileLayer({
+      source: new XYZ({
+        url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+        crossOrigin: 'anonymous',
+        projection: 'EPSG:3857',
+      }),
+      visible: false,
+    })
 
-  // 高德标注图层
-  baseMaps.gaodelabelLayer = new TileLayer({
-    source: new XYZ({
-      url: 'http://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
-      crossOrigin: 'anonymous',
-      projection: 'EPSG:3857',
-    }),
-    visible: false,
-  })
+    // 高德标注图层
+    baseMaps.gaodelabelLayer = new TileLayer({
+      source: new XYZ({
+        url: 'https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
+        crossOrigin: 'anonymous',
+        projection: 'EPSG:3857',
+      }),
+      visible: false,
+    })
 
-  // 天地图矢量图层
-  baseMaps.tianditu = new TileLayer({
-    source: new XYZ({
-      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: wgs84ToGcj02Projection,
-    }),
-    visible: false,
-  })
+    // 天地图矢量图层
+    baseMaps.tianditu = new TileLayer({
+      source: new XYZ({
+        url: 'https://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: wgs84ToGcj02Projection,
+      }),
+      visible: false,
+    })
 
-  // 天地图标注图层
-  baseMaps.tianditulabel = new TileLayer({
-    source: new XYZ({
-      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: wgs84ToGcj02Projection,
-    }),
-    visible: false,
-  })
+    // 天地图标注图层
+    baseMaps.tianditulabel = new TileLayer({
+      source: new XYZ({
+        url: 'https://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: wgs84ToGcj02Projection,
+      }),
+      visible: false,
+    })
 
-  // 天地图卫星图层
-  baseMaps.tianditusatellite = new TileLayer({
-    source: new XYZ({
-      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: wgs84ToGcj02Projection,
-    }),
-    visible: false,
-  })
+    // 天地图卫星图层
+    baseMaps.tianditusatellite = new TileLayer({
+      source: new XYZ({
+        url: 'https://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: wgs84ToGcj02Projection,
+      }),
+      visible: false,
+    })
 
-  // 天地图卫星标注
-  baseMaps.tianditusatlabel = new TileLayer({
-    source: new XYZ({
-      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: wgs84ToGcj02Projection,
-    }),
-    visible: false,
-  })
+    // 天地图卫星标注
+    baseMaps.tianditusatlabel = new TileLayer({
+      source: new XYZ({
+        url: 'https://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: wgs84ToGcj02Projection,
+      }),
+      visible: false,
+    })
+  }
+  catch (error) {
+    console.error('初始化地图图层失败:', error)
+  }
+}
+
+/**
+ * 获取地址信息
+ * @param location - 经纬度坐标
+ */
+async function getAddressInfo(location: [number, number]): Promise<string> {
+  try {
+    const key = mapParams.value.amapKey
+
+    if (!key) {
+      return '获取地址失败: 未配置密钥'
+    }
+
+    // 高德逆地址编码请求说明 https://amap.apifox.cn/api-14551463
+    const response = await fetch(
+      `https://restapi.amap.com/v3/geocode/regeo?location=${location[0].toFixed(6)},${location[1].toFixed(6)}&key=${key}&output=JSON`,
+    )
+    const data = await response.json()
+
+    if (data.status === '1' && data.regeocode) {
+      return data.regeocode.formatted_address
+    }
+
+    // 处理错误情况
+    if (data.infocode === '10001') {
+      return '获取地址失败: key 无效'
+    }
+    if (data.infocode === '10002') {
+      return '获取地址失败: key 未配置平台'
+    }
+    return `获取地址失败: ${data.info || '未知错误'}`
+  }
+  catch (error) {
+    return '获取地址失败: 网络错误'
+  }
+}
+
+/**
+ * 处理地图移动结束事件
+ */
+async function handleMoveEnd() {
+  if (!map)
+    return
+
+  const view = map.getView()
+  const center = view.getCenter()
+  if (!center)
+    return
+
+  // 转换坐标为经纬度
+  const lonLat = toLonLat(center)
+  const formattedCenter: [number, number] = [Number(lonLat[0].toFixed(6)), Number(lonLat[1].toFixed(6))]
+
+  // 直接发送事件，让父组件决定是否处理
+  emit('centerChange', formattedCenter)
 }
 
 /**
@@ -273,70 +307,102 @@ function initializeLayers(tianDiTuKey = ''): void {
  * @param params - 初始化参数
  */
 function init(params: InitParams = {}): void {
-  if (!mapRef.value)
+  if (!mapRef.value) {
     return
+  }
+
+  // 保存初始化参数
+  mapParams.value = params
 
   // 设置默认参数
   const {
-    center = [116.404, 39.915], // 默认北京坐标
+    center = [116.404, 39.915],
     zoom = 10,
     maxZoom = 18,
     minZoom = 4,
-    tianDiTuKey = '', // 天地图密钥
+    tianDiTuKey = '',
+    amapKey = '',
   } = params
 
-  // 初始化所有底图图层
-  initializeLayers(tianDiTuKey)
-
-  // 创建地图实例
-  map = new Map({
-    target: mapRef.value,
-    layers: Object.values(baseMaps),
-    view: new View({
-      center: fromLonLat(center),
-      zoom,
-      projection: 'EPSG:3857',
-      maxZoom,
-      minZoom,
-    }),
-    controls: defaultControls({
-      zoom: false,
-      rotate: false,
-      attribution: false,
-    }).extend([
-      new ScaleLine({
-        units: 'metric',
-        className: 'ol-scale-line',
+  try {
+    // 初始化所有底图图层
+    initializeLayers(tianDiTuKey)
+
+    // 创建地图实例 - 加载所有底图图层，但默认只显示高德地图
+    map = new Map({
+      target: mapRef.value,
+      layers: Object.values(baseMaps), // 加载所有底图图层
+      view: new View({
+        center: fromLonLat(center),
+        zoom,
+        projection: 'EPSG:3857',
+        maxZoom,
+        minZoom,
       }),
-    ]),
-    // 使用默认交互，包括拖动、缩放等
-    interactions: defaultInteractions({
-      altShiftDragRotate: false, // 禁用 Alt+Shift+拖动 旋转
-      pinchRotate: false, // 禁用双指旋转
-    }),
-  })
-
-  // 设置鼠标样式
-  if (mapRef.value) {
-    mapRef.value.style.cursor = 'grab'
+      controls: defaultControls({
+        zoom: false,
+        rotate: false,
+        attribution: false,
+      }).extend([
+        new ScaleLine({
+          units: 'metric',
+          className: 'ol-scale-line',
+        }),
+      ]),
+      interactions: defaultInteractions({
+        altShiftDragRotate: false,
+        pinchRotate: false,
+      }),
+    })
 
-    // 监听地图事件
-    const mapElement = mapRef.value
+    // 更新地图大小，确保地图正确渲染
+    setTimeout(() => {
+      if (map) {
+        map.updateSize()
+        // 确保默认图层正确显示
+        handleMapChange('tianditu')
+      }
+    }, 200)
+
+    // 监听地图移动结束事件
+    map.on('moveend', handleMoveEnd)
+
+    // 设置鼠标样式
+    if (mapRef.value) {
+      mapRef.value.style.cursor = 'grab'
+      // 监听地图事件
+      const mapElement = mapRef.value
+
+      // 鼠标按下时
+      mapElement.addEventListener('mousedown', () => {
+        mapElement.style.cursor = 'grabbing'
+        // 用户开始拖动地图，取消跟随定位
+        if (locationTimer) {
+          isFollowingLocation.value = false
+        }
+      })
 
-    // 鼠标按下时
-    mapElement.addEventListener('mousedown', () => {
-      mapElement.style.cursor = 'grabbing'
-    })
+      // 触摸开始时
+      mapElement.addEventListener('touchstart', () => {
+        // 用户开始拖动地图，取消跟随定位
+        if (locationTimer) {
+          isFollowingLocation.value = false
+        }
+      })
 
-    // 鼠标释放时
-    mapElement.addEventListener('mouseup', () => {
-      mapElement.style.cursor = 'grab'
-    })
+      // 鼠标释放时
+      mapElement.addEventListener('mouseup', () => {
+        mapElement.style.cursor = 'grab'
+      })
 
-    // 鼠标离开地图时
-    mapElement.addEventListener('mouseleave', () => {
-      mapElement.style.cursor = 'grab'
-    })
+      // 鼠标离开地图时
+      mapElement.addEventListener('mouseleave', () => {
+        mapElement.style.cursor = 'grab'
+      })
+    }
+  }
+  catch (error) {
+    console.error('地图初始化失败:', error)
   }
 }
 
@@ -467,10 +533,9 @@ function createPointFeature(point: PointData, icon: string, iconAnchor: [number,
 /**
  * 创建点位图层
  * @param config - 图层配置
- * @param points - 点位数据
  * @returns 返回图层实例
  */
-function createPointLayer(config: PointLayerConfig, points: PointData[]): VectorLayer<VectorSource> {
+function createPointLayer(config: PointLayerConfig): VectorLayer<VectorSource> {
   const vectorSource = new VectorSource()
   const vectorLayer = new VectorLayer({
     source: vectorSource,
@@ -479,10 +544,15 @@ function createPointLayer(config: PointLayerConfig, points: PointData[]): Vector
   })
 
   // 添加点位要素
-  points.forEach((point) => {
-    const feature = createPointFeature(point, config.icon, config.iconAnchor)
-    vectorSource.addFeature(feature)
-  })
+  const addFeatures = (data: PointData[]) => {
+    // 清除现有要素
+    vectorSource.clear()
+    // 添加新的点位要素
+    data.forEach((point) => {
+      const feature = createPointFeature(point, config.icon, config.iconAnchor)
+      vectorSource.addFeature(feature)
+    })
+  }
 
   // 添加点击事件处理
   if (config.onClick) {
@@ -498,23 +568,134 @@ function createPointLayer(config: PointLayerConfig, points: PointData[]): Vector
     })
   }
 
+  // 监听图层可见性变化
+  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 - 点位图层配置
+ * 添加点位图层
+ * @param config - 图层配置
  * @returns 返回图层实例
  */
-function addVectorPoints(config: PointLayerConfig): VectorLayer<VectorSource> | null {
-  if (!map || !config.data)
+function addPointLayer(config: PointLayerConfig): VectorLayer<VectorSource> | null {
+  if (!map)
     return null
 
-  const vectorLayer = createPointLayer(config, config.data)
+  const vectorLayer = createPointLayer(config)
   map.addLayer(vectorLayer)
+  vectorLayers[config.id] = vectorLayer
+
+  // 更新图层状态
+  if (config.showInControl !== false) {
+    const existingIndex = pointLayerStatus.value.findIndex(layer => layer.id === config.id)
+    if (existingIndex === -1) {
+      pointLayerStatus.value.push(config)
+    }
+    else {
+      pointLayerStatus.value[existingIndex] = config
+    }
+  }
+
   return vectorLayer
 }
 
+/**
+ * 添加海量点图层
+ * @param config - 图层配置
+ */
+function addWebGLPoints(config: WebGLPointOptions): void {
+  if (!map)
+    return
+
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    visible: config.show,
+    zIndex: config.id === undefined ? 1 : 3,
+  })
+
+  // 添加点位要素
+  const addFeatures = (data: PointData[]) => {
+    // 清除现有要素
+    vectorSource.clear()
+    // 添加新的点位要素
+    data.forEach((point) => {
+      const feature = createPointFeature(point, config.icon, config.iconAnchor)
+      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, ...pointData } = properties
+        config.onClick(pointData as PointData, event)
+      }
+    })
+  }
+
+  // 初始加载数据
+  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)
+    }
+  }
+
+  map.addLayer(vectorLayer)
+  vectorLayers[config.id] = vectorLayer
+
+  // 更新图层状态
+  if (config.showInControl !== false) {
+    const existingIndex = pointLayerStatus.value.findIndex(layer => layer.id === config.id)
+    if (existingIndex === -1) {
+      pointLayerStatus.value.push(config)
+    }
+    else {
+      pointLayerStatus.value[existingIndex] = config
+    }
+  }
+}
+
 /**
  * 添加 WMS 图层
  * @param options - WMS 配置
@@ -587,32 +768,6 @@ function handleToggleWMSLayer(layer: WMSLayerConfig): void {
   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 {
-    pointLayerStatus.value[existingIndex] = config
-  }
-
-  return config.id
-}
-
 /**
  * 控制点位图层显示/隐藏
  * @param layerId - 图层ID
@@ -638,6 +793,87 @@ function handleTogglePointLayer(layer: PointLayerConfig): void {
   setPointLayerVisible(layer.id, layer.show)
 }
 
+/** 处理定位请求 */
+async function handleLocation() {
+  if (!map)
+    return
+
+  // 如果是导航模式，重新开启跟随定位
+  if (locationTimer) {
+    isFollowingLocation.value = true
+  }
+
+  try {
+    mobileUtil.execute({
+      param: undefined,
+      funcName: 'getPhoneStatus',
+      callbackFunc: (result) => {
+        const locationResult = result as PhoneLocationStatus
+        if (locationResult.f_latitude && locationResult.f_longitude) {
+          const center: [number, number] = [locationResult.f_longitude, locationResult.f_latitude]
+          setCenterAndZoom(center, getZoom())
+          // 更新位置图标
+          if (isFollowingLocation.value) {
+            updateLocationMarker(center)
+          }
+        }
+      },
+    })
+  }
+  catch (error) {
+    // 在 web 端测试时，使用模拟数据
+    console.log('获取实时位置失败，使用模拟数据')
+    // 生成一个随机偏移量
+    const offset = (Math.random() - 0.5) * 0.01
+    const center: [number, number] = [
+      108.948024 + offset, // 西安经度
+      34.263161 + offset, // 西安纬度
+    ]
+
+    setCenterAndZoom(center, getZoom())
+    // 更新位置图标
+    if (isFollowingLocation.value) {
+      updateLocationMarker(center)
+    }
+  }
+}
+
+// 开启导航
+function startNavigation() {
+  isFollowingLocation.value = true
+
+  // 创建并添加位置图标图层
+  if (!locationLayer) {
+    locationLayer = createLocationLayer()
+    map?.addLayer(locationLayer)
+  }
+
+  locationTimer = setInterval(() => {
+    navigationHandleLocation()
+  }, 1000)
+}
+
+function stopNavigation() {
+  isFollowingLocation.value = false
+  if (locationTimer) {
+    clearInterval(locationTimer)
+    locationTimer = null
+  }
+
+  // 移除位置图标图层
+  if (locationLayer && map) {
+    map.removeLayer(locationLayer)
+    locationLayer = null
+  }
+}
+
+function navigationHandleLocation() {
+  // 打开导航定时器, 并且跟随定位
+  if (isFollowingLocation.value) {
+    handleLocation()
+  }
+}
+
 // 暴露方法给父组件
 defineExpose({
   init,
@@ -646,12 +882,17 @@ defineExpose({
   setZoom,
   getZoom,
   setCenterAndZoom,
-  addVectorPoints,
+  addPointLayer,
+  addWebGLPoints,
   addWMSLayers,
   setWMSLayerVisible,
   handleToggleWMSLayer,
-  addPointLayer,
   setPointLayerVisible,
+  handleTogglePointLayer,
+  getAddressInfo,
+  handleLocation,
+  startNavigation,
+  stopNavigation,
 })
 
 // 组件卸载时清理地图实例
@@ -660,181 +901,306 @@ onUnmounted(() => {
     map.setTarget(undefined)
     map = null
   }
+  if (locationTimer) {
+    clearInterval(locationTimer)
+    locationTimer = null
+  }
+  locationLayer = null
 })
 </script>
 
 <template>
   <div class="map-wrapper">
     <div ref="mapRef" class="ol-map" />
-
-    <!-- 图层控制面板 -->
+    <!-- 添加定位按钮 -->
+    <div class="location-button">
+      <Button size="small" square @click="handleLocation">
+        <img
+          src="@af-mobile-client-vue3/assets/img/component/location.png"
+          class="location-icon"
+          alt="定位"
+        >
+      </Button>
+    </div>
     <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 class="control-toggle">
+        <Button
+          :type="showControls ? 'primary' : 'default'"
+          size="small"
+          square
+          @click="showControls = !showControls"
+        >
+          <img
+            src="@af-mobile-client-vue3/assets/img/component/mapLayers.png"
+            class="toggle-icon"
+            :class="[{ active: showControls }]"
+            alt="图层"
+          >
+        </Button>
       </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 v-show="showControls" class="control-panels">
+        <!-- 底图切换 -->
+        <div class="control-panel base-layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-map-marked" /> 底图切换
+          </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>
-      </div>
 
-      <!-- 点位图层控制 -->
-      <div v-if="pointLayerStatus.length > 0" class="control-panel point-layer-control">
-        <div class="control-title">
-          点位图层
+        <!-- 图层控制 -->
+        <div v-if="wmsLayerStatus.length > 0" class="control-panel layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-layers" /> 图层控制
+          </div>
+          <div class="layer-list">
+            <div
+              v-for="layer in wmsLayerStatus"
+              :key="layer.id"
+              class="layer-item"
+              :class="{ active: layer.show }"
+              @click="handleToggleWMSLayer(layer)"
+            >
+              <i class="van-icon" :class="layer.show ? 'van-icon-eye' : 'van-icon-closed-eye'" />
+              <span>{{ layer.value }}</span>
+            </div>
+          </div>
         </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 v-if="pointLayerStatus.length > 0" class="control-panel layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-location" /> 点位图层
+          </div>
+          <div class="layer-list">
+            <div
+              v-for="layer in pointLayerStatus"
+              :key="layer.id"
+              class="layer-item"
+              :class="{ active: layer.show }"
+              @click="handleTogglePointLayer(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>
 </template>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .map-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
-}
-
-.ol-map {
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  touch-action: none;
 
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.map-controls {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  .ol-map {
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    touch-action: none;
 
-.control-panel {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  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;
+    &:active {
+      cursor: grabbing;
+    }
   }
-}
 
-.base-layer-control {
-  select {
-    width: 100%;
-    padding: 6px 24px 6px 12px;
-    font-size: 14px;
-    border: 1px solid #dcdee0;
-    border-radius: 4px;
-    background-color: white;
-    cursor: pointer;
-    outline: none;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 6px center;
-    background-size: 12px;
-
-    &:hover {
-      border-color: #1989fa;
-    }
+  // 定位按钮样式
+  .location-button {
+    position: absolute;
+    left: 0.5em;
+    bottom: calc(0.5em + 30px);
+    z-index: 1000;
+
+    .van-button {
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #ebedf0;
+      background: rgba(255, 255, 255, 0.9);
+      backdrop-filter: blur(4px);
+      box-shadow: none;
+
+      &:hover {
+        border-color: #1989fa;
+        .location-icon {
+          opacity: 1;
+        }
+      }
 
-    option {
-      padding: 8px;
+      .location-icon {
+        width: 20px;
+        height: 20px;
+        opacity: 0.7;
+        transition: all 0.3s;
+      }
     }
   }
-}
 
-.wms-layer-control {
-  .control-buttons {
+  .map-controls {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: 8px;
 
-    :deep(.van-button) {
-      width: 100%;
-      justify-content: flex-start;
-      padding-left: 12px;
-      border-radius: 4px;
+    .control-toggle {
+      align-self: flex-end;
+
+      .van-button {
+        width: 32px;
+        height: 32px;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #ebedf0;
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(4px);
+        box-shadow: none;
+
+        &.van-button--primary {
+          background: #1989fa;
+          border-color: #1989fa;
+        }
 
-      &--default {
-        border: 1px solid #dcdee0;
+        .toggle-icon {
+          width: 20px;
+          height: 20px;
+          transition: all 0.3s;
+          opacity: 0.7;
+
+          &.active {
+            opacity: 1;
+            filter: brightness(1) invert(1);
+          }
+        }
 
         &:hover {
           border-color: #1989fa;
-          color: #1989fa;
+          .toggle-icon {
+            opacity: 1;
+          }
         }
       }
     }
-  }
-}
 
-.point-layer-control {
-  .control-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+    .control-panels {
+      background: white;
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      min-width: 160px;
+      max-width: 180px;
+
+      .control-panel {
+        & + .control-panel {
+          margin-top: 12px;
+          padding-top: 12px;
+          border-top: 1px solid #f5f5f5;
+        }
 
-    :deep(.van-button) {
-      width: 100%;
-      justify-content: flex-start;
-      padding-left: 12px;
-      border-radius: 4px;
+        .control-title {
+          font-size: 13px;
+          font-weight: 500;
+          color: #323233;
+          margin-bottom: 8px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          .van-icon {
+            font-size: 16px;
+            color: #1989fa;
+          }
+        }
 
-      &--default {
-        border: 1px solid #dcdee0;
+        select {
+          width: 100%;
+          padding: 6px 24px 6px 8px;
+          font-size: 13px;
+          border: 1px solid #dcdee0;
+          border-radius: 4px;
+          background-color: #f7f8fa;
+          color: #323233;
+          cursor: pointer;
+          outline: none;
+          appearance: none;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+          background-repeat: no-repeat;
+          background-position: right 6px center;
+          background-size: 12px;
+
+          &:hover {
+            border-color: #1989fa;
+          }
+
+          option {
+            padding: 6px;
+            background: white;
+          }
+        }
 
-        &:hover {
-          border-color: #1989fa;
-          color: #1989fa;
+        .layer-list {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+
+          .layer-item {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+            background: #f7f8fa;
+            border: 1px solid transparent;
+
+            .van-icon {
+              font-size: 14px;
+              color: #969799;
+            }
+
+            span {
+              font-size: 13px;
+              color: #323233;
+              flex: 1;
+            }
+
+            &:hover {
+              background: #f0f2f5;
+              border-color: #dcdee0;
+            }
+
+            &.active {
+              background: #e6f3ff;
+              border-color: #1989fa;
+
+              .van-icon {
+                color: #1989fa;
+              }
+
+              span {
+                color: #1989fa;
+              }
+            }
+          }
         }
       }
     }
@@ -842,7 +1208,7 @@ onUnmounted(() => {
 }
 
 // 比例尺样式
-:deep(.ol-scale-line) {
+.ol-scale-line {
   position: absolute;
   left: 0.5em;
   bottom: 0.5em;
@@ -851,7 +1217,7 @@ onUnmounted(() => {
   border-radius: 4px;
 }
 
-:deep(.ol-scale-line-inner) {
+.ol-scale-line-inner {
   border: 2px solid #333;
   border-top: none;
   color: #333;
@@ -867,52 +1233,71 @@ onUnmounted(() => {
   .map-controls {
     right: 8px;
     top: 8px;
-    gap: 8px;
-  }
+    gap: 6px;
 
-  .control-panel {
-    padding: 8px;
-    min-width: 120px;
+    .control-panels {
+      padding: 10px;
+      min-width: 140px;
 
-    .control-title {
-      font-size: 12px;
-      margin-bottom: 6px;
-    }
-  }
+      .control-panel {
+        & + .control-panel {
+          margin-top: 10px;
+          padding-top: 10px;
+        }
 
-  .base-layer-control {
-    select {
-      padding: 4px 20px 4px 8px;
-      font-size: 12px;
-      background-size: 10px;
-    }
-  }
+        .control-title {
+          font-size: 12px;
+          margin-bottom: 6px;
 
-  .wms-layer-control {
-    .control-buttons {
-      gap: 6px;
+          .van-icon {
+            font-size: 14px;
+          }
+        }
 
-      :deep(.van-button) {
-        font-size: 12px;
-        padding: 0 8px;
-      }
-    }
-  }
+        select {
+          padding: 4px 20px 4px 6px;
+          font-size: 12px;
+          background-size: 10px;
+        }
 
-  .point-layer-control {
-    .control-buttons {
-      gap: 6px;
+        .layer-list {
+          gap: 3px;
 
-      :deep(.van-button) {
-        font-size: 12px;
-        padding: 0 8px;
+          .layer-item {
+            padding: 4px 6px;
+
+            .van-icon {
+              font-size: 12px;
+            }
+
+            span {
+              font-size: 12px;
+            }
+          }
+        }
       }
     }
   }
+}
 
-  :deep(.ol-scale-line) {
-    transform: scale(0.8);
-    transform-origin: left bottom;
-  }
+// 比例尺样式
+:deep(.ol-scale-line) {
+  position: absolute;
+  left: 0.5em;
+  bottom: 0.5em;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 2px;
+  border-radius: 4px;
+}
+
+:deep(.ol-scale-line-inner) {
+  border: 2px solid #333;
+  border-top: none;
+  color: #333;
+  font-size: 12px;
+  text-align: center;
+  margin: 1px;
+  will-change: contents, width;
+  transition: width 0.25s;
 }
 </style>