af-mobile-client-vue3 1.1.43 → 1.1.44

package/package.json

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

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

@@ -15,6 +15,7 @@ import type {
   WebGLPointOptions,
   WMSLayerConfig,
   WMSOptions,
+  TrackData,
 } from './types'
 import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
@@ -23,11 +24,12 @@ 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 LineString from 'ol/geom/LineString'
 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'
 import { ImageWMS, Vector as VectorSource, XYZ } from 'ol/source'
-import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
+import { Fill, Icon, Stroke, Style, Text, Circle } from 'ol/style'
 import { Button } from 'vant'
 import { getCurrentInstance, onUnmounted, ref } from 'vue'
 import { wgs84ToGcj02Projection } from './utils/wgs84ToGcj02'
@@ -83,6 +85,10 @@ let locationTimer: ReturnType<typeof setInterval> | null = null
 /** 位置图标图层 */
 let locationLayer: VectorLayer<VectorSource> | null = null
 
+/** 存储轨迹图层 */
+const trackLayers: Record<number, VectorLayer<VectorSource>> = {}
+const trackLayerStatus = ref<TrackData[]>([])
+
 /**
  * 创建位置图标图层
  */
@@ -890,6 +896,139 @@ function navigationHandleLocation() {
   }
 }
 
+/**
+ * 添加轨迹图层
+ * @param trackData - 轨迹数据
+ */
+function addTrackLayer(trackData: TrackData): void {
+  if (!map)
+    return
+
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    visible: true,
+    zIndex: 2,
+  })
+
+  // 创建轨迹线要素
+  const coordinates = trackData.trackData.map(coord => fromLonLat(coord))
+  const lineString = new Feature({
+    geometry: new LineString(coordinates),
+  })
+
+  // 设置轨迹线样式
+  const lineStyle = new Style({
+    stroke: new Stroke({
+      color: trackData.color,
+      width: 3,
+    }),
+  })
+  lineString.setStyle(lineStyle)
+
+  // 创建起点和终点图标
+  const startPoint = new Feature({
+    geometry: new Point(coordinates[0]),
+  })
+  const endPoint = new Feature({
+    geometry: new Point(coordinates[coordinates.length - 1]),
+  })
+
+  // 设置起点图标样式 - 使用绿色圆形图标
+  const startStyle = new Style({
+    image: new Circle({
+      radius: 8,
+      fill: new Fill({
+        color: '#4CAF50',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+    text: new Text({
+      text: '起点',
+      offsetY: -15,
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  // 设置终点图标样式 - 使用红色圆形图标
+  const endStyle = new Style({
+    image: new Circle({
+      radius: 8,
+      fill: new Fill({
+        color: '#F44336',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+    text: new Text({
+      text: '终点',
+      offsetY: -15,
+      font: '12px sans-serif',
+      fill: new Fill({
+        color: '#333',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
+    }),
+  })
+
+  startPoint.setStyle(startStyle)
+  endPoint.setStyle(endStyle)
+
+  // 添加要素到图层
+  vectorSource.addFeatures([lineString, startPoint, endPoint])
+
+  // 添加到地图
+  map.addLayer(vectorLayer)
+  trackLayers[trackData.id] = vectorLayer
+
+  // 更新图层状态，确保 show 属性被正确设置
+  const trackDataWithShow = {
+    ...trackData,
+    show: true, // 默认显示
+  }
+  trackLayerStatus.value.push(trackDataWithShow)
+}
+
+/**
+ * 控制轨迹图层显示/隐藏
+ * @param trackId - 轨迹ID
+ * @param visible - 是否显示
+ */
+function setTrackLayerVisible(trackId: number, visible: boolean): void {
+  const layer = trackLayers[trackId]
+  if (layer) {
+    layer.setVisible(visible)
+    // 更新图层状态
+    const layerIndex = trackLayerStatus.value.findIndex(layer => layer.id === trackId)
+    if (layerIndex !== -1) {
+      trackLayerStatus.value[layerIndex].show = visible
+    }
+  }
+}
+
+/**
+ * 切换轨迹图层显示状态
+ */
+function handleToggleTrackLayer(track: TrackData): void {
+  track.show = !track.show
+  setTrackLayerVisible(track.id, track.show)
+}
+
 // 暴露方法给父组件
 defineExpose({
   init,
@@ -909,6 +1048,9 @@ defineExpose({
   handleLocation,
   startNavigation,
   stopNavigation,
+  addTrackLayer,
+  setTrackLayerVisible,
+  handleToggleTrackLayer,
 })
 
 // 组件卸载时清理地图实例
@@ -1008,6 +1150,25 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+
+        <!-- 轨迹图层 -->
+        <div v-if="trackLayerStatus.length > 0" class="control-panel layer-control">
+          <div class="control-title">
+            <i class="van-icon van-icon-location-o" /> 轨迹图层
+          </div>
+          <div class="layer-list">
+            <div
+              v-for="track in trackLayerStatus"
+              :key="track.id"
+              class="layer-item"
+              :class="{ active: track.show }"
+              @click="handleToggleTrackLayer(track)"
+            >
+              <i class="van-icon" :class="track.show ? 'van-icon-eye' : 'van-icon-closed-eye'" />
+              <span>{{ track.name }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -132,3 +132,14 @@ export interface WMSOptions {
   /** WMS 服务配置 */
   wms: WMSConfig
 }
+
+/**
+ * 轨迹数据类型
+ */
+export interface TrackData {
+  id: number
+  name: string
+  trackData: [number, number][] // 经纬度数组
+  color: string
+  show?: boolean // 是否显示
+}

package/src/views/component/XOlMapView/index.vue

@@ -3,6 +3,7 @@ import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDat
 import { showNotify } from 'vant'
 import { onMounted, ref } from 'vue'
 import XOlMap from '../../../components/data/XOlMap/index.vue'
+import { trackTestData } from './testData'
 import 'vant/lib/index.css'
 
 const mapRef = ref()
@@ -265,6 +266,13 @@ function handleAddMassPoints() {
   })
 }
 
+// 添加轨迹测试
+function handleAddTrack() {
+  trackTestData.forEach((track) => {
+    mapRef.value.addTrackLayer(track)
+  })
+}
+
 // 导航模式相关
 const isNavigationMode = ref(false)
 
@@ -322,6 +330,15 @@ function stopNavigation() {
             </van-button>
           </div>
 
+          <div class="control-group">
+            <div class="group-title">
+              轨迹示例
+            </div>
+            <van-button type="primary" size="small" @click="handleAddTrack">
+              添加测试轨迹
+            </van-button>
+          </div>
+
           <div class="control-group">
             <div class="group-title">
               导航模式测试

package/src/views/component/XOlMapView/testData.ts

@@ -0,0 +1,64 @@
+/**
+ * 轨迹测试数据
+ */
+
+// 轨迹数据类型定义
+export interface TrackData {
+  id: number
+  name: string
+  trackData: [number, number][] // 经纬度数组
+  color: string
+  show?: boolean // 是否显示
+}
+
+/**
+ * 生成随机轨迹点
+ * @param startPoint - 起始点 [经度, 纬度]
+ * @param pointCount - 点的数量
+ * @param maxOffset - 最大偏移量（经纬度）
+ * @returns 轨迹点数组
+ */
+function generateRandomTrack(
+  startPoint: [number, number],
+  pointCount: number,
+  maxOffset: number = 0.01,
+): [number, number][] {
+  const points: [number, number][] = [startPoint]
+  let currentPoint = startPoint
+
+  for (let i = 1; i < pointCount; i++) {
+    // 生成随机偏移量，使用正态分布使轨迹更自然
+    const offsetLng = (Math.random() - 0.5) * maxOffset * (1 + Math.random() * 0.5)
+    const offsetLat = (Math.random() - 0.5) * maxOffset * (1 + Math.random() * 0.5)
+
+    // 添加一些随机性，使轨迹更自然
+    const randomFactor = Math.random() > 0.8 ? 2 : 1 // 偶尔会有较大的偏移
+    const newPoint: [number, number] = [
+      currentPoint[0] + offsetLng * randomFactor,
+      currentPoint[1] + offsetLat * randomFactor,
+    ]
+
+    points.push(newPoint)
+    currentPoint = newPoint
+  }
+
+  return points
+}
+
+// 测试数据
+export const trackTestData: TrackData[] = [
+  {
+    id: 1,
+    name: '张三的轨迹',
+    trackData: generateRandomTrack([108.948024, 34.263161], 1000, 0.005),
+    color: '#FF0000',
+    show: true,
+  },
+  {
+    id: 2,
+    name: '李四的轨迹',
+    trackData: generateRandomTrack([108.948024, 34.263161], 500, 0.003),
+    color: '#00FF00',
+    show: true,
+  },
+]