12.1 地图集成方案 - 完整技术文档

// 选型决策逻辑
const 选型因素 = {
  业务场景: '国内物流配送监控系统',
  数据规模: '10万+ 配送点位实时监控',
  性能要求: '60fps 流畅交互',
  定制需求: '深度样式定制 + 3D建筑',

  最终方案: {
    国内业务: '高德地图 - 数据准确性最优',
    性能优化: 'Mapbox GL - WebGL渲染10万+点位',
    样式定制: 'Mapbox Studio - 可视化编辑器',
    后备方案: '可快速切换到百度地图'
  }
}

<!-- MapAdapter.vue - 统一地图适配组件 -->
<template>
  <div class="map-adapter">
    <!-- 高德地图容器 -->
    <div v-if="mapType === 'amap'" ref="amapContainer" class="map-container"></div>

    <!-- Mapbox容器 -->
    <div v-else-if="mapType === 'mapbox'" ref="mapboxContainer" class="map-container"></div>

    <!-- 地图控制栏 -->
    <div class="map-controls">
      <button @click="switchMapType">切换地图: {{ mapType }}</button>
      <button @click="addMarker">添加标记</button>
      <button @click="fitBounds">自适应视图</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const props = defineProps({
  defaultMapType: {
    type: String,
    default: 'amap' // 'amap' | 'mapbox'
  },
  center: {
    type: Array,
    default: () => [116.397428, 39.90923] // 北京天安门
  },
  zoom: {
    type: Number,
    default: 12
  }
})

const emit = defineEmits(['map-ready', 'marker-click'])

// 响应式变量
const mapType = ref(props.defaultMapType)
const amapContainer = ref(null)
const mapboxContainer = ref(null)
const mapInstance = ref(null)
const markers = ref([])

// 统一的地图适配器类
class MapAdapter {
  constructor(type, instance) {
    this.type = type
    this.instance = instance
  }

  // 统一的添加标记方法
  addMarker(lnglat, options = {}) {
    if (this.type === 'amap') {
      const marker = new window.AMap.Marker({
        position: lnglat,
        title: options.title || '',
        icon: options.icon
      })
      marker.setMap(this.instance)
      return marker
    } else if (this.type === 'mapbox') {
      const el = document.createElement('div')
      el.className = 'mapbox-marker'
      el.style.width = '30px'
      el.style.height = '30px'
      el.style.backgroundImage = `url(${options.icon || 'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png'})`
      el.style.backgroundSize = 'cover'

      const marker = new mapboxgl.Marker(el)
        .setLngLat(lnglat)
        .setPopup(new mapboxgl.Popup().setHTML(options.title || ''))
        .addTo(this.instance)
      return marker
    }
  }

  // 统一的设置中心点方法
  setCenter(lnglat) {
    if (this.type === 'amap') {
      this.instance.setCenter(lnglat)
    } else if (this.type === 'mapbox') {
      this.instance.setCenter(lnglat)
    }
  }

  // 统一的设置缩放级别
  setZoom(zoom) {
    if (this.type === 'amap') {
      this.instance.setZoom(zoom)
    } else if (this.type === 'mapbox') {
      this.instance.setZoom(zoom)
    }
  }

  // 统一的自适应视图
  fitBounds(bounds) {
    if (this.type === 'amap') {
      this.instance.setBounds(new window.AMap.Bounds(bounds[0], bounds[1]))
    } else if (this.type === 'mapbox') {
      this.instance.fitBounds(bounds)
    }
  }

  // 统一的销毁方法
  destroy() {
    if (this.type === 'amap') {
      this.instance.destroy()
    } else if (this.type === 'mapbox') {
      this.instance.remove()
    }
  }
}

// 初始化高德地图
const initAmap = async () => {
  try {
    const AMap = await AMapLoader.load({
      key: '你的高德Key', // 替换为你的Key
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MarkerCluster']
    })

    const map = new AMap.Map(amapContainer.value, {
      center: props.center,
      zoom: props.zoom,
      mapStyle: 'amap://styles/normal' // 标准样式
    })

    // 添加工具栏
    map.addControl(new AMap.Scale())
    map.addControl(new AMap.ToolBar())

    mapInstance.value = new MapAdapter('amap', map)
    emit('map-ready', mapInstance.value)

    console.log('✅ 高德地图初始化成功')
  } catch (error) {
    console.error('❌ 高德地图初始化失败:', error)
  }
}

// 初始化Mapbox地图
const initMapbox = async () => {
  try {
    mapboxgl.accessToken = '你的Mapbox Token' // 替换为你的Token

    const map = new mapboxgl.Map({
      container: mapboxContainer.value,
      style: 'mapbox://styles/mapbox/streets-v12',
      center: props.center,
      zoom: props.zoom,
      pitch: 45, // 3D视角
      bearing: 0
    })

    // 添加导航控件
    map.addControl(new mapboxgl.NavigationControl())
    map.addControl(new mapboxgl.ScaleControl())

    await new Promise(resolve => map.on('load', resolve))

    mapInstance.value = new MapAdapter('mapbox', map)
    emit('map-ready', mapInstance.value)

    console.log('✅ Mapbox地图初始化成功')
  } catch (error) {
    console.error('❌ Mapbox地图初始化失败:', error)
  }
}

// 切换地图类型
const switchMapType = async () => {
  // 销毁当前地图
  if (mapInstance.value) {
    mapInstance.value.destroy()
    mapInstance.value = null
    markers.value = []
  }

  // 切换类型
  mapType.value = mapType.value === 'amap' ? 'mapbox' : 'amap'

  // 等待DOM更新
  await nextTick()

  // 初始化新地图
  if (mapType.value === 'amap') {
    await initAmap()
  } else {
    await initMapbox()
  }
}

// 添加标记示例
const addMarker = () => {
  if (!mapInstance.value) return

  const randomLng = props.center[0] + (Math.random() - 0.5) * 0.1
  const randomLat = props.center[1] + (Math.random() - 0.5) * 0.1

  const marker = mapInstance.value.addMarker(
    [randomLng, randomLat],
    { title: `标记 ${markers.value.length + 1}` }
  )

  markers.value.push(marker)
}

// 自适应视图
const fitBounds = () => {
  if (!mapInstance.value || markers.value.length === 0) return

  // 计算所有标记的边界
  const lngs = []
  const lats = []

  markers.value.forEach(marker => {
    if (mapType.value === 'amap') {
      const pos = marker.getPosition()
      lngs.push(pos.lng)
      lats.push(pos.lat)
    } else {
      const pos = marker.getLngLat()
      lngs.push(pos.lng)
      lats.push(pos.lat)
    }
  })

  const bounds = [
    [Math.min(...lngs), Math.min(...lats)],
    [Math.max(...lngs), Math.max(...lats)]
  ]

  mapInstance.value.fitBounds(bounds)
}

// 监听地图类型变化
watch(() => props.defaultMapType, async (newType) => {
  if (newType !== mapType.value) {
    mapType.value = newType
    await nextTick()
    if (mapType.value === 'amap') {
      await initAmap()
    } else {
      await initMapbox()
    }
  }
})

// 组件挂载
onMounted(async () => {
  if (mapType.value === 'amap') {
    await initAmap()
  } else {
    await initMapbox()
  }
})
</script>

<style scoped>
.map-adapter {
  position: relative;
  width: 100%;
  height: 600px;
}

.map-container {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.map-controls button {
  padding: 8px 16px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.map-controls button:hover {
  background: #f0f0f0;
}

.mapbox-marker {
  cursor: pointer;
}
</style>

<!-- MapboxStyleCustom.vue - Mapbox样式定制 -->
<template>
  <div class="mapbox-style-custom">
    <div ref="mapContainer" class="map-container"></div>

    <div class="style-panel">
      <h3>样式控制面板</h3>

      <div class="style-item">
        <label>预设样式:</label>
        <select v-model="selectedStyle" @change="changeStyle">
          <option value="streets-v12">街道</option>
          <option value="dark-v11">暗黑</option>
          <option value="light-v11">明亮</option>
          <option value="satellite-v9">卫星</option>
          <option value="custom">自定义</option>
        </select>
      </div>

      <div class="style-item">
        <label>建筑3D:</label>
        <input type="checkbox" v-model="show3DBuildings" @change="toggle3DBuildings">
      </div>

      <div class="style-item">
        <label>地形:</label>
        <input type="checkbox" v-model="showTerrain" @change="toggleTerrain">
      </div>

      <div class="style-item">
        <label>天空:</label>
        <input type="checkbox" v-model="showSky" @change="toggleSky">
      </div>

      <button @click="exportStyle" class="export-btn">导出样式JSON</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const mapContainer = ref(null)
const map = ref(null)
const selectedStyle = ref('streets-v12')
const show3DBuildings = ref(false)
const showTerrain = ref(false)
const showSky = ref(false)

// 自定义深色样式配置
const customDarkStyle = {
  version: 8,
  name: '自定义深色主题',
  sources: {
    'mapbox-streets': {
      type: 'vector',
      url: 'mapbox://mapbox.mapbox-streets-v8'
    }
  },
  layers: [
    {
      id: 'background',
      type: 'background',
      paint: {
        'background-color': '#1a1a2e'
      }
    },
    {
      id: 'water',
      type: 'fill',
      source: 'mapbox-streets',
      'source-layer': 'water',
      paint: {
        'fill-color': '#16213e',
        'fill-opacity': 0.8
      }
    },
    {
      id: 'roads',
      type: 'line',
      source: 'mapbox-streets',
      'source-layer': 'road',
      paint: {
        'line-color': '#0f3460',
        'line-width': 2
      }
    },
    {
      id: 'buildings',
      type: 'fill-extrusion',
      source: 'mapbox-streets',
      'source-layer': 'building',
      paint: {
        'fill-extrusion-color': '#e94560',
        'fill-extrusion-height': ['get', 'height'],
        'fill-extrusion-opacity': 0.6
      }
    }
  ]
}

// 初始化地图
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJjbGV4YW1wbGUifQ.example' // 替换为你的Token

  map.value = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923],
    zoom: 15,
    pitch: 45,
    bearing: -17.6
  })

  map.value.on('load', () => {
    console.log('✅ 地图加载完成')

    // 添加3D建筑图层
    add3DBuildingsLayer()
  })

  // 添加导航控件
  map.value.addControl(new mapboxgl.NavigationControl())
})

// 切换样式
const changeStyle = () => {
  if (selectedStyle.value === 'custom') {
    map.value.setStyle(customDarkStyle)
  } else {
    map.value.setStyle(`mapbox://styles/mapbox/${selectedStyle.value}`)
  }

  // 样式加载完成后重新添加图层
  map.value.once('style.load', () => {
    if (show3DBuildings.value) add3DBuildingsLayer()
    if (showTerrain.value) addTerrainLayer()
    if (showSky.value) addSkyLayer()
  })
}

// 添加3D建筑图层
const add3DBuildingsLayer = () => {
  if (!map.value.getLayer('3d-buildings')) {
    const layers = map.value.getStyle().layers
    const labelLayerId = layers.find(
      layer => layer.type === 'symbol' && layer.layout['text-field']
    )?.id

    map.value.addLayer(
      {
        id: '3d-buildings',
        source: 'composite',
        'source-layer': 'building',
        filter: ['==', 'extrude', 'true'],
        type: 'fill-extrusion',
        minzoom: 15,
        paint: {
          'fill-extrusion-color': '#aaa',
          'fill-extrusion-height': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'height']
          ],
          'fill-extrusion-base': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'min_height']
          ],
          'fill-extrusion-opacity': 0.6
        }
      },
      labelLayerId
    )
  }
}

// 切换3D建筑
const toggle3DBuildings = () => {
  if (show3DBuildings.value) {
    add3DBuildingsLayer()
  } else {
    if (map.value.getLayer('3d-buildings')) {
      map.value.removeLayer('3d-buildings')
    }
  }
}

// 添加地形图层
const addTerrainLayer = () => {
  map.value.addSource('mapbox-dem', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
    tileSize: 512,
    maxzoom: 14
  })

  map.value.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
}

// 切换地形
const toggleTerrain = () => {
  if (showTerrain.value) {
    addTerrainLayer()
  } else {
    map.value.setTerrain(null)
  }
}

// 添加天空图层
const addSkyLayer = () => {
  map.value.addLayer({
    id: 'sky',
    type: 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  })
}

// 切换天空
const toggleSky = () => {
  if (showSky.value) {
    addSkyLayer()
  } else {
    if (map.value.getLayer('sky')) {
      map.value.removeLayer('sky')
    }
  }
}

// 导出样式JSON
const exportStyle = () => {
  const style = map.value.getStyle()
  const blob = new Blob([JSON.stringify(style, null, 2)], {
    type: 'application/json'
  })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'mapbox-style.json'
  a.click()
  URL.revokeObjectURL(url)

  console.log('✅ 样式已导出')
}
</script>

<style scoped>
.mapbox-style-custom {
  position: relative;
  width: 100%;
  height: 600px;
}

.map-container {
  width: 100%;
  height: 100%;
}

.style-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 250px;
}

.style-panel h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.style-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.style-item label {
  font-size: 14px;
  color: #333;
}

.style-item select {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.style-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.export-btn {
  width: 100%;
  padding: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.export-btn:hover {
  background: #45a049;
}
</style>

<!-- MapEventSystem.vue - 地图事件处理 -->
<template>
  <div class="map-event-system">
    <div ref="mapContainer" class="map-container"></div>

    <div class="event-log">
      <h3>事件日志 (最近10条)</h3>
      <div class="log-list">
        <div
          v-for="(log, index) in eventLogs"
          :key="index"
          :class="['log-item', `log-${log.type}`]"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-type">{{ log.type }}</span>
          <span class="log-detail">{{ log.detail }}</span>
        </div>
      </div>
      <button @click="clearLogs">清空日志</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const mapContainer = ref(null)
const map = ref(null)
const eventLogs = ref([])
const eventHandlers = ref({})

// 添加日志
const addLog = (type, detail) => {
  const now = new Date()
  const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`

  eventLogs.value.unshift({ type, detail, time })

  // 只保留最近10条
  if (eventLogs.value.length > 10) {
    eventLogs.value.pop()
  }
}

// 防抖函数
const debounce = (func, wait) => {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

// 节流函数
const throttle = (func, limit) => {
  let inThrottle
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJjbGV4YW1wbGUifQ.example'

  map.value = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923],
    zoom: 12
  })

  map.value.on('load', () => {
    addLog('系统', '地图初始化完成')
    setupEventListeners()
    addTestMarkers()
  })
})

// 设置事件监听器
const setupEventListeners = () => {
  // 1. 点击事件
  eventHandlers.value.click = (e) => {
    addLog('点击', `坐标: [${e.lngLat.lng.toFixed(6)}, ${e.lngLat.lat.toFixed(6)}]`)
  }
  map.value.on('click', eventHandlers.value.click)

  // 2. 移动事件 - 使用节流优化
  eventHandlers.value.move = throttle((e) => {
    const center = map.value.getCenter()
    addLog('移动', `中心点: [${center.lng.toFixed(4)}, ${center.lat.toFixed(4)}]`)
  }, 500)
  map.value.on('move', eventHandlers.value.move)

  // 3. 缩放事件 - 使用防抖优化
  eventHandlers.value.zoom = debounce((e) => {
    const zoom = map.value.getZoom().toFixed(2)
    addLog('缩放', `级别: ${zoom}`)
  }, 300)
  map.value.on('zoom', eventHandlers.value.zoom)

  // 4. 拖拽开始
  eventHandlers.value.dragstart = () => {
    addLog('拖拽', '开始拖拽')
  }
  map.value.on('dragstart', eventHandlers.value.dragstart)

  // 5. 拖拽结束
  eventHandlers.value.dragend = () => {
    addLog('拖拽', '结束拖拽')
  }
  map.value.on('dragend', eventHandlers.value.dragend)

  // 6. 双击事件
  eventHandlers.value.dblclick = (e) => {
    addLog('双击', '触发双击缩放')
    e.preventDefault() // 可以阻止默认缩放行为
  }
  map.value.on('dblclick', eventHandlers.value.dblclick)

  // 7. 右键菜单
  eventHandlers.value.contextmenu = (e) => {
    e.preventDefault()
    addLog('右键', `坐标: [${e.lngLat.lng.toFixed(6)}, ${e.lngLat.lat.toFixed(6)}]`)

    // 可以在这里显示自定义右键菜单
    showContextMenu(e.point)
  }
  map.value.on('contextmenu', eventHandlers.value.contextmenu)

  // 8. 鼠标移入移出
  eventHandlers.value.mouseenter = () => {
    map.value.getCanvas().style.cursor = 'pointer'
  }
  eventHandlers.value.mouseleave = () => {
    map.value.getCanvas().style.cursor = ''
  }

  // 9. 图层点击事件
  map.value.on('click', 'test-markers', (e) => {
    const coordinates = e.features[0].geometry.coordinates.slice()
    const title = e.features[0].properties.title

    addLog('标记点击', `点击了: ${title}`)

    // 显示弹窗
    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(`<h3>${title}</h3><p>坐标: ${coordinates}</p>`)
      .addTo(map.value)
  })

  // 鼠标悬停效果
  map.value.on('mouseenter', 'test-markers', eventHandlers.value.mouseenter)
  map.value.on('mouseleave', 'test-markers', eventHandlers.value.mouseleave)
}

// 添加测试标记
const addTestMarkers = () => {
  map.value.addSource('test-markers', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [116.397428, 39.90923]
          },
          properties: {
            title: '天安门'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [116.407394, 39.904211]
          },
          properties: {
            title: '故宫'
          }
        }
      ]
    }
  })

  map.value.addLayer({
    id: 'test-markers',
    type: 'circle',
    source: 'test-markers',
    paint: {
      'circle-radius': 10,
      'circle-color': '#3887be',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff'
    }
  })
}

// 显示右键菜单
const showContextMenu = (point) => {
  // 这里可以实现自定义右键菜单
  console.log('右键菜单位置:', point)
}

// 清空日志
const clearLogs = () => {
  eventLogs.value = []
  addLog('系统', '日志已清空')
}

// 组件卸载前清理事件监听
onBeforeUnmount(() => {
  if (map.value) {
    Object.entries(eventHandlers.value).forEach(([event, handler]) => {
      map.value.off(event, handler)
    })
    map.value.remove()
  }
})
</script>

<style scoped>
.map-event-system {
  position: relative;
  width: 100%;
  height: 600px;
}

.map-container {
  width: 100%;
  height: 100%;
}

.event-log {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 350px;
  max-height: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  overflow: hidden;
}

.event-log h3 {
  margin: 0;
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.log-list {
  max-height: 300px;
  overflow-y: auto;
}

.log-item {
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 10px;
  font-size: 12px;
  align-items: center;
}

.log-time {
  color: #999;
  min-width: 60px;
}

.log-type {
  font-weight: bold;
  min-width: 50px;
}

.log-系统 .log-type { color: #4CAF50; }
.log-点击 .log-type { color: #2196F3; }
.log-移动 .log-type { color: #FF9800; }
.log-缩放 .log-type { color: #9C27B0; }
.log-拖拽 .log-type { color: #F44336; }
.log-双击 .log-type { color: #00BCD4; }
.log-右键 .log-type { color: #795548; }
.log-标记点击 .log-type { color: #E91E63; }

.log-detail {
  color: #666;
  flex: 1;
}

.event-log button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 12px;
}

.event-log button:hover {
  background: #e0e0e0;
}
</style>

【项目名称】物流配送实时监控系统 - 地图可视化模块

【项目背景】
负责公司物流配送业务的地图可视化系统开发,需要在地图上实时展示10万+配送点位,
支持配送员轨迹回放、电子围栏监控等功能。系统服务于全国200+城市的配送业务。

【技术方案】
1. 地图技术选型:采用高德地图+Mapbox双方案架构
   - 国内业务使用高德地图,保证POI数据准确性
   - 性能要求高的场景使用Mapbox GL,支持WebGL硬件加速
   - 设计统一的MapAdapter适配层,实现快速切换

2. 地图封装架构:
   - 封装统一的地图适配器类,抽象addMarker/setCenter等方法
   - 支持高德、百度、Mapbox三种地图无缝切换
   - 统一事件处理机制,解决不同地图API差异

3. 样式定制:
   - 基于Mapbox Studio实现深度样式定制
   - 支持3D建筑、地形、天空等高级特性
   - 实现样式JSON导出功能,方便批量应用

4. 事件优化:
   - 对move/zoom等高频事件应用节流防抖
   - 实现事件代理机制,减少监听器数量
   - 自定义右键菜单,提升用户体验

【技术亮点】
✓ 统一适配层设计:解决多地图API差异,降低切换成本80%
✓ 性能优化:通过节流防抖将事件处理性能提升60%
✓ 深度定制:实现Mapbox样式可视化编辑,支持导出复用

【项目成果】
• 地图切换时间从3天缩短至2小时,切换成本降低90%
• 事件处理性能提升60%,交互流畅度显著提高
• 样式定制效率提升5倍,设计师可独立完成样式调整

标准回答:

"我们在技术选型时主要考虑了三个因素:

第一,数据准确性。我们是国内物流业务,需要准确的POI数据和路线规划,
高德地图在国内的数据质量是最好的,这是业务刚需。

第二,性能瓶颈。我们需要渲染10万+配送点位,高德地图基于DOM的渲染
方式在大数据量下性能不足,而Mapbox GL使用WebGL硬件加速,可以流畅
渲染百万级点位。

第三,扩展性。Mapbox支持深度样式定制和3D可视化,可以满足未来的业务
扩展需求。

所以我们采用了双方案:常规业务用高德保证数据准确,大数据量场景用
Mapbox保证性能。为了降低切换成本,我封装了统一的适配器层,统一了
两种地图的API调用方式,切换成本从原本的3天缩短到2小时。

实际效果非常好,既保证了数据准确性,又解决了性能问题。"

标准回答:

"适配器的核心思路是抽象共同接口,屏蔽API差异。

首先,我分析了高德和Mapbox的API差异,提取了核心的通用方法:
- addMarker添加标记
- setCenter设置中心点
- setZoom设置缩放
- fitBounds自适应视图

然后设计了一个MapAdapter类,构造函数接收地图类型和实例,
内部根据类型做不同的实现。比如addMarker方法:

高德用: new AMap.Marker({position, icon}).setMap(map)
Mapbox用: new mapboxgl.Marker(el).setLngLat(lnglat).addTo(map)

通过这个适配层,业务代码只需要调用adapter.addMarker(),
不需要关心底层是哪个地图,切换地图时只需要改一行配置。

这个设计模式在实际开发中非常实用,后来我们又快速接入了百度地图,
只花了半天时间。"

标准回答:

"地图的move和zoom事件触发非常频繁,用户拖动地图时,move事件
每秒可能触发60次,如果每次都执行业务逻辑,比如请求接口获取新数据,
会造成严重的性能问题。

我的优化方案是:

1. 对move事件用throttle节流,500ms只执行一次。用户在拖动过程中
不需要实时更新,拖动结束后更新一次就够了。

2. 对zoom事件用debounce防抖,300ms后才执行。因为缩放往往是连续
操作,等用户停止缩放后再执行一次即可。

实际测试数据:
- 优化前: 拖动地图时CPU占用80%+,接口请求200+次/分钟
- 优化后: CPU占用降到30%,接口请求仅6-8次/分钟

性能提升了60%,用户体验明显改善。这是一个小的优化点,但对高频
交互的性能影响非常大。"

问题描述:
高德、百度、Mapbox三种地图的API完全不同,比如添加标记:
- 高德: marker.setMap(map)
- 百度: map.addOverlay(marker)
- Mapbox: marker.addTo(map)

切换地图需要改大量代码,维护成本高。

解决方案:
设计MapAdapter适配器模式,统一封装addMarker/setCenter等方法,
业务层调用统一接口,底层根据地图类型做不同实现。

技术价值:
这是典型的适配器模式应用,体现了设计模式在实际开发中的价值。
切换成本从3天降到2小时,降低90%。

问题描述:
地图拖动时move事件每秒触发60次,如果每次都请求接口更新点位数据,
会导致:
- 后端接口被打爆
- 前端渲染卡顿
- 网络请求堆积

解决方案:
1. throttle节流: move事件500ms只执行一次
2. debounce防抖: zoom事件300ms后才执行
3. requestAnimationFrame: 渲染更新同步浏览器刷新率

技术价值:
这是前端性能优化的经典场景,展示了对高频事件的处理能力。
实测CPU占用从80%降到30%,性能提升60%。

创新点:
传统Mapbox样式需要手写JSON配置,设计师无法独立完成。
我实现了一个可视化样式编辑器:
- 支持预设样式快速切换
- 支持3D建筑/地形/天空等特性开关
- 支持导出样式JSON,方便复用

技术实现:
通过map.setStyle()动态切换样式,用map.getStyle()导出配置,
简单但很实用。

业务价值:
设计师可以独立完成样式调整,开发效率提升5倍。
导出的JSON可以在多个项目中复用,节省了大量重复工作。

【错误表达 - 过于AI化】
"我们使用了先进的地图技术,通过优秀的架构设计,实现了高性能的
地图可视化系统,大大提升了用户体验。"

【正确表达 - 自然真实】
"当时我们遇到一个问题,10万个配送点位在地图上根本渲染不出来,
浏览器直接卡死。我花了两天时间调研,发现高德地图是DOM渲染,
点太多就慢。后来换成Mapbox的WebGL渲染,性能提升了10倍。

但是Mapbox的国内数据不如高德准,POI经常找不到。最后我想了个办法,
常规场景用高德,大数据量场景用Mapbox,然后写了个适配器让它们
可以快速切换。这个方案既解决了性能问题,又保证了数据准确。

有一次产品临时要换成百度地图,我只改了一行配置,两小时就切换
完成了。产品经理都惊呆了,说之前换地图要一个星期。这就是提前
做好架构设计的好处。"

<!-- App.vue - 使用示例 -->
<template>
  <div class="app">
    <h1>地图集成方案演示</h1>

    <div class="demo-section">
      <h2>1. 地图适配器 - 多地图切换</h2>
      <MapAdapter
        :default-map-type="'amap'"
        :center="[116.397428, 39.90923]"
        :zoom="12"
        @map-ready="handleMapReady"
      />
    </div>

    <div class="demo-section">
      <h2>2. Mapbox样式定制</h2>
      <MapboxStyleCustom />
    </div>

    <div class="demo-section">
      <h2>3. 地图事件系统</h2>
      <MapEventSystem />
    </div>
  </div>
</template>

<script setup>
import MapAdapter from './MapAdapter.vue'
import MapboxStyleCustom from './MapboxStyleCustom.vue'
import MapEventSystem from './MapEventSystem.vue'

const handleMapReady = (mapAdapter) => {
  console.log('✅ 地图适配器准备完成:', mapAdapter)
}
</script>

<style>
.app {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.demo-section h2 {
  margin-top: 0;
  color: #333;
}
</style>