af-mobile-client-vue3 1.0.94 → 1.0.96

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

@@ -0,0 +1,644 @@
+<script setup lang="ts">
+/**
+ * OpenLayers地图组件
+ * 支持多种底图切换：
+ * - 高德地图（矢量）
+ * - 高德卫星图
+ * - 天地图（矢量）
+ * - 天地图卫星图
+ */
+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 { 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 { onUnmounted, ref } from 'vue'
+import 'vant/lib/index.css' // 添加 Vant 样式
+
+/** 初始化参数接口 */
+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 PointLayerOptions {
+  /** 图标URL地址 */
+  icon: string
+  /** 图标大小 [宽, 高] */
+  iconSize?: [number, number]
+  /** 图标锚点位置 [x, y]，范围 0-1 */
+  iconAnchor?: [number, number]
+  /** 点位数据数组 */
+  data: PointData[]
+  /** 点击事件回调 */
+  onClick?: (point: PointData, event: any) => void
+}
+
+/** WebGL渲染配置接口 */
+interface WebGLPointOptions extends PointLayerOptions {
+  /** 是否开启聚合 */
+  enableCluster?: boolean
+  /** 聚合距离，单位像素 */
+  clusterDistance?: number
+  /** 聚合样式配置 */
+  clusterStyle?: {
+    /** 填充颜色 */
+    fillColor?: string
+    /** 边框颜色 */
+    strokeColor?: string
+    /** 文字颜色 */
+    textColor?: string
+  }
+  /** 渲染性能配置 */
+  performance?: {
+    /** 是否开启分块加载 */
+    enableChunk?: boolean
+    /** 每块数据量 */
+    chunkSize?: number
+    /** 是否开启节流 */
+    enableThrottle?: boolean
+    /** 节流时间间隔(ms) */
+    throttleWait?: number
+  }
+}
+
+/** 地图容器引用 */
+const mapRef = ref<HTMLDivElement>()
+/** 地图实例 */
+let map: Map | null = null
+/** 当前底图类型 */
+const currentMapType = ref<string>('tianditu')
+
+/** 图层选项配置 */
+const layerOptions = [
+  { text: '高德地图', value: 'gaode' },
+  { text: '高德卫星', value: 'gaodeSatellite' },
+  { text: '天地图', value: 'tianditu' },
+  { text: '天地图卫星', value: 'tianditusatellite' },
+]
+
+/** 存储所有底图图层 */
+const baseMaps: Record<string, TileLayer<XYZ>> = {}
+
+/**
+ * 切换地图图层
+ * @param type - 图层类型
+ */
+function handleMapChange(type: string): void {
+  // 隐藏所有图层
+  Object.keys(baseMaps).forEach((key) => {
+    baseMaps[key].setVisible(false)
+  })
+
+  // 根据选择显示对应图层
+  switch (type) {
+    case 'gaodeSatellite':
+      baseMaps.gaodeSatellite.setVisible(true)
+      baseMaps.gaodelabelLayer.setVisible(true)
+      break
+    case 'tianditu':
+      baseMaps.tianditu.setVisible(true)
+      baseMaps.tianditulabel.setVisible(true)
+      break
+    case 'tianditusatellite':
+      baseMaps.tianditusatellite.setVisible(true)
+      baseMaps.tianditusatlabel.setVisible(true)
+      break
+    default:
+      baseMaps.gaode.setVisible(true)
+  }
+  currentMapType.value = type
+}
+
+/**
+ * 初始化底图图层
+ * @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',
+    }),
+  })
+
+  // 高德卫星图
+  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.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: 'EPSG:3857',
+    }),
+    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: 'EPSG:3857',
+    }),
+    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: 'EPSG:3857',
+    }),
+    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: 'EPSG:3857',
+    }),
+    visible: false,
+  })
+}
+
+/**
+ * 初始化地图
+ * @param params - 初始化参数
+ */
+function init(params: InitParams = {}): void {
+  if (!mapRef.value)
+    return
+
+  // 设置默认参数
+  const {
+    center = [116.404, 39.915], // 默认北京坐标
+    zoom = 10,
+    maxZoom = 18,
+    minZoom = 4,
+    tianDiTuKey = '', // 天地图密钥
+  } = 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',
+      }),
+    ]),
+    // 使用默认交互，包括拖动、缩放等
+    interactions: defaultInteractions({
+      altShiftDragRotate: false, // 禁用 Alt+Shift+拖动 旋转
+      pinchRotate: false, // 禁用双指旋转
+    }),
+  })
+
+  // 设置鼠标样式
+  if (mapRef.value) {
+    mapRef.value.style.cursor = 'grab'
+
+    // 监听地图事件
+    const mapElement = mapRef.value
+
+    // 鼠标按下时
+    mapElement.addEventListener('mousedown', () => {
+      mapElement.style.cursor = 'grabbing'
+    })
+
+    // 鼠标释放时
+    mapElement.addEventListener('mouseup', () => {
+      mapElement.style.cursor = 'grab'
+    })
+
+    // 鼠标离开地图时
+    mapElement.addEventListener('mouseleave', () => {
+      mapElement.style.cursor = 'grab'
+    })
+  }
+}
+
+/**
+ * 获取地图实例
+ * @returns OpenLayers Map 实例
+ */
+function getMap(): Map | null {
+  return map
+}
+
+/**
+ * 设置地图中心点
+ * @param center - 经纬度坐标 [经度, 纬度]
+ * @param animate - 是否使用动画效果，默认true
+ */
+function setCenter(center: [number, number], animate = true): void {
+  if (!map)
+    return
+
+  const view = map.getView()
+  if (animate) {
+    view.animate({
+      center: fromLonLat(center),
+      duration: 500,
+    })
+  }
+  else {
+    view.setCenter(fromLonLat(center))
+  }
+}
+
+/**
+ * 设置地图缩放级别
+ * @param zoom - 缩放级别
+ * @param animate - 是否使用动画效果，默认true
+ */
+function setZoom(zoom: number, animate = true): void {
+  if (!map)
+    return
+
+  const view = map.getView()
+  if (animate) {
+    view.animate({
+      zoom,
+      duration: 500,
+    })
+  }
+  else {
+    view.setZoom(zoom)
+  }
+}
+
+/**
+ * 获取当前地图缩放级别
+ * @returns 当前缩放级别
+ */
+function getZoom(): number {
+  if (!map)
+    return 0
+  return map.getView().getZoom() || 0
+}
+
+/**
+ * 设置地图中心点和缩放级别
+ * @param center - 经纬度坐标 [经度, 纬度]
+ * @param zoom - 缩放级别
+ * @param animate - 是否使用动画效果，默认true
+ */
+function setCenterAndZoom(center: [number, number], zoom: number, animate = true): void {
+  if (!map)
+    return
+
+  const view = map.getView()
+  if (animate) {
+    view.animate({
+      center: fromLonLat(center),
+      zoom,
+      duration: 500,
+    })
+  }
+  else {
+    view.setCenter(fromLonLat(center))
+    view.setZoom(zoom)
+  }
+}
+
+/**
+ * 渲染点位
+ * @param options - 点位图层配置
+ * @returns 返回图层实例
+ */
+function addVectorPoints(options: PointLayerOptions): VectorLayer<VectorSource> | null {
+  if (!map)
+    return null
+
+  const {
+    icon,
+    iconAnchor = [0.5, 1],
+    data,
+    onClick,
+  } = options
+
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    zIndex: 1,
+  })
+
+  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)
+    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
+      })
+    })
+  }
+
+  return vectorLayer
+}
+
+/**
+ * 渲染海量点（适用于10万+数据量）
+ * @param options - WebGL渲染配置
+ * @returns 返回图层实例
+ */
+function addWebGLPoints(options: WebGLPointOptions): VectorLayer<VectorSource> | null {
+  if (!map)
+    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,
+  })
+
+  // 分块加载数据
+  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)
+    }
+  }
+  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)
+  }
+
+  // 添加到地图
+  map.addLayer(vectorLayer)
+
+  return vectorLayer
+}
+
+// 暴露方法给父组件
+defineExpose({
+  init,
+  getMap,
+  setCenter,
+  setZoom,
+  getZoom,
+  setCenterAndZoom,
+  addVectorPoints,
+  addWebGLPoints,
+})
+
+// 组件卸载时清理地图实例
+onUnmounted(() => {
+  if (map) {
+    map.setTarget(undefined)
+    map = null
+  }
+})
+</script>
+
+<template>
+  <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>
+  </div>
+</template>
+
+<style scoped lang="less">
+.map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.ol-map {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.layer-selector {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1000;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 2px;
+
+  select {
+    padding: 6px 24px 6px 12px;
+    font-size: 14px;
+    border: none;
+    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 {
+      background-color: #f5f5f5;
+    }
+
+    option {
+      padding: 8px;
+    }
+  }
+}
+
+// 比例尺样式
+: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;
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .layer-selector {
+    right: 8px;
+    top: 8px;
+
+    select {
+      padding: 4px 20px 4px 8px;
+      font-size: 12px;
+      background-size: 10px;
+    }
+  }
+
+  :deep(.ol-scale-line) {
+    transform: scale(0.8);
+    transform-origin: left bottom;
+  }
+}
+</style>