npm create vite@latest vue-ol-app --template vue
cd vue-ol-app
npm install

npm install ol @vueuse/core pinia element-plus axios

// stores/mapStore.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

???????export const useMapStore = defineStore('map', () => {
  // 地圖實例
  const map = ref(null);
  
  // 當前視圖狀態(tài)
  const viewState = ref({
    center: [116.404, 39.915],
    zoom: 10,
    rotation: 0
  });
  
  // 圖層狀態(tài)
  const layers = ref({
    baseLayers: [
      { id: 'osm', name: 'OpenStreetMap', visible: true, type: 'tile' },
      { id: 'satellite', name: '衛(wèi)星地圖', visible: false, type: 'tile' }
    ],
    overlayLayers: []
  });
  
  // 當前激活的工具
  const activeTool = ref(null);
  
  // 標記點集合
  const markers = ref([]);
  
  // 獲取當前可見的底圖
  const visibleBaseLayer = computed(() => {
    return layers.value.baseLayers.find(layer => layer.visible);
  });
  
  // 切換底圖
  function toggleBaseLayer(layerId) {
    layers.value.baseLayers.forEach(layer => {
      layer.visible = layer.id === layerId;
    });
  }
  
  return {
    map,
    viewState,
    layers,
    activeTool,
    markers,
    visibleBaseLayer,
    toggleBaseLayer
  };
});

<!-- components/MapContainer.vue -->
<template>
  <div ref="mapContainer" class="map-container">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useMapStore } from '../stores/mapStore';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';

const props = defineProps({
  viewOptions: {
    type: Object,
    default: () => ({
      center: [116.404, 39.915],
      zoom: 10
    })
  }
});

const mapContainer = ref(null);
const mapStore = useMapStore();

// 初始化地圖
function initMap() {
  const map = new Map({
    target: mapContainer.value,
    view: new View({
      center: fromLonLat(props.viewOptions.center),
      zoom: props.viewOptions.zoom,
      minZoom: 2,
      maxZoom: 18
    })
  });
  
  mapStore.map = map;
  
  // 保存視圖狀態(tài)變化
  map.on('moveend', () => {
    const view = map.getView();
    mapStore.viewState = {
      center: view.getCenter(),
      zoom: view.getZoom(),
      rotation: view.getRotation()
    };
  });
  
  return map;
}

// 響應式調(diào)整地圖大小
function updateMapSize() {
  if (mapStore.map) {
    mapStore.map.updateSize();
  }
}

onMounted(() => {
  initMap();
  window.addEventListener('resize', updateMapSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateMapSize);
  if (mapStore.map) {
    mapStore.map.setTarget(undefined);
    mapStore.map = null;
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

<!-- components/LayerControl.vue -->
<template>
  <div class="layer-control">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>圖層控制</span>
        </div>
      </template>
      
      <div class="base-layers">
        <div v-for="layer in mapStore.layers.baseLayers" 
             :key="layer.id" 
             class="layer-item"
             @click="mapStore.toggleBaseLayer(layer.id)">
          <el-radio v-model="mapStore.visibleBaseLayer.id" :label="layer.id">
            {{ layer.name }}
          </el-radio>
        </div>
      </div>
      
      <el-divider></el-divider>
      
      <div class="overlay-layers">
        <div v-for="layer in mapStore.layers.overlayLayers" 
             :key="layer.id" 
             class="layer-item">
          <el-checkbox v-model="layer.visible" @change="toggleLayerVisibility(layer)">
            {{ layer.name }}
          </el-checkbox>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useMapStore } from '../stores/mapStore';
import { onMounted, watch } from 'vue';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

const mapStore = useMapStore();

// 初始化圖層
function initLayers() {
  // 添加OSM底圖
  const osmLayer = new TileLayer({
    source: new OSM(),
    properties: {
      id: 'osm',
      name: 'OpenStreetMap',
      type: 'base'
    }
  });
  
  // 添加衛(wèi)星底圖
  const satelliteLayer = new TileLayer({
    source: new XYZ({
      url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=your_mapbox_token'
    }),
    properties: {
      id: 'satellite',
      name: '衛(wèi)星地圖',
      type: 'base'
    }
  });
  
  // 添加標記圖層
  const markerLayer = new VectorLayer({
    source: new VectorSource(),
    properties: {
      id: 'markers',
      name: '標記點',
      type: 'overlay'
    }
  });
  
  mapStore.map.addLayer(osmLayer);
  mapStore.map.addLayer(satelliteLayer);
  mapStore.map.addLayer(markerLayer);
  
  // 默認隱藏衛(wèi)星圖層
  satelliteLayer.setVisible(false);
  
  // 更新store中的圖層狀態(tài)
  mapStore.layers.overlayLayers.push({
    id: 'markers',
    name: '標記點',
    visible: true,
    olLayer: markerLayer
  });
}

// 切換圖層可見性
function toggleLayerVisibility(layer) {
  layer.olLayer.setVisible(layer.visible);
}

// 監(jiān)聽底圖變化
watch(() => mapStore.visibleBaseLayer, (newLayer) => {
  mapStore.map.getLayers().forEach(layer => {
    const props = layer.getProperties();
    if (props.type === 'base') {
      layer.setVisible(props.id === newLayer.id);
    }
  });
});

onMounted(() => {
  if (mapStore.map) {
    initLayers();
  }
});
</script>

<style scoped>
.layer-control {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 250px;
}

.layer-item {
  padding: 8px 0;
  cursor: pointer;
}

.base-layers, .overlay-layers {
  margin-bottom: 10px;
}
</style>

// composables/useMap.js
import { ref, onMounted } from 'vue';
import { useMapStore } from '../stores/mapStore';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj';
import { Style, Icon } from 'ol/style';

export function useMapMarkers() {
  const mapStore = useMapStore();
  const markerSource = ref(null);
  
  // 初始化標記源
  function initMarkerSource() {
    const markerLayer = mapStore.map.getLayers().getArray()
      .find(layer => layer.get('id') === 'markers');
    
    if (markerLayer) {
      markerSource.value = markerLayer.getSource();
    }
  }
  
  // 添加標記
  function addMarker(coordinate, properties = {}) {
    if (!markerSource.value) return;
    
    const marker = new Feature({
      geometry: new Point(fromLonLat(coordinate)),
      ...properties
    });
    
    marker.setStyle(createMarkerStyle(properties));
    markerSource.value.addFeature(marker);
    
    return marker;
  }
  
  // 創(chuàng)建標記樣式
  function createMarkerStyle(properties) {
    return new Style({
      image: new Icon({
        src: properties.icon || '/images/marker.png',
        scale: 0.5,
        anchor: [0.5, 1]
      })
    });
  }
  
  // 清除所有標記
  function clearMarkers() {
    if (markerSource.value) {
      markerSource.value.clear();
    }
  }
  
  onMounted(() => {
    if (mapStore.map) {
      initMarkerSource();
    }
  });
  
  return {
    addMarker,
    clearMarkers
  };
}

<!-- components/MeasureTool.vue -->
<template>
  <el-card shadow="hover" class="measure-tool">
    <template #header>
      <div class="card-header">
        <span>測量工具</span>
      </div>
    </template>
    
    <el-radio-group v-model="measureType" @change="changeMeasureType">
      <el-radio-button label="length">距離測量</el-radio-button>
      <el-radio-button label="area">面積測量</el-radio-button>
    </el-radio-group>
    
    <div v-if="measureResult" class="measure-result">
      <div v-if="measureType === 'length'">
        長度: {{ measureResult }} 米
      </div>
      <div v-else>
        面積: {{ measureResult }} 平方米
      </div>
    </div>
    
    <el-button 
      type="danger" 
      size="small" 
      @click="clearMeasurement"
      :disabled="!measureResult">
      清除
    </el-button>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useMapStore } from '../stores/mapStore';
import Draw from 'ol/interaction/Draw';
import { LineString, Polygon } from 'ol/geom';
import { getLength, getArea } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import { Style, Fill, Stroke } from 'ol/style';

const mapStore = useMapStore();
const measureType = ref('length');
const measureResult = ref(null);
const drawInteraction = ref(null);
const measureListener = ref(null);

// 測量樣式
const measureStyle = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new Stroke({
    color: 'rgba(0, 0, 255, 0.5)',
    lineDash: [10, 10],
    width: 2
  })
});

// 改變測量類型
function changeMeasureType() {
  clearMeasurement();
  setupMeasureInteraction();
}

// 設置測量交互
function setupMeasureInteraction() {
  const source = new VectorSource();
  const vector = new VectorLayer({
    source: source,
    style: measureStyle
  });
  
  mapStore.map.addLayer(vector);
  
  let geometryType = measureType.value === 'length' ? 'LineString' : 'Polygon';
  
  drawInteraction.value = new Draw({
    source: source,
    type: geometryType,
    style: measureStyle
  });
  
  mapStore.map.addInteraction(drawInteraction.value);
  
  let sketch;
  drawInteraction.value.on('drawstart', function(evt) {
    sketch = evt.feature;
    measureResult.value = null;
  });
  
  measureListener.value = drawInteraction.value.on('drawend', function(evt) {
    const feature = evt.feature;
    const geometry = feature.getGeometry();
    
    if (measureType.value === 'length') {
      const length = getLength(geometry);
      measureResult.value = Math.round(length * 100) / 100;
    } else {
      const area = getArea(geometry);
      measureResult.value = Math.round(area * 100) / 100;
    }
    
    // 清除臨時圖形
    source.clear();
  });
}

// 清除測量
function clearMeasurement() {
  if (drawInteraction.value) {
    mapStore.map.removeInteraction(drawInteraction.value);
    unByKey(measureListener.value);
    drawInteraction.value = null;
  }
  
  // 移除測量圖層
  mapStore.map.getLayers().getArray().forEach(layer => {
    if (layer.get('name') === 'measure-layer') {
      mapStore.map.removeLayer(layer);
    }
  });
  
  measureResult.value = null;
}

onUnmounted(() => {
  clearMeasurement();
});
</script>

<style scoped>
.measure-tool {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  width: 250px;
}

.measure-result {
  margin: 10px 0;
  padding: 5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}
</style>

<!-- components/RoutePlanner.vue -->
<template>
  <el-card shadow="hover" class="route-planner">
    <template #header>
      <div class="card-header">
        <span>路徑規(guī)劃</span>
      </div>
    </template>
    
    <el-form label-position="top">
      <el-form-item label="起點">
        <el-input v-model="startPoint" placeholder="輸入起點坐標或地址"></el-input>
      </el-form-item>
      
      <el-form-item label="終點">
        <el-input v-model="endPoint" placeholder="輸入終點坐標或地址"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="calculateRoute">計算路線</el-button>
        <el-button @click="clearRoute">清除</el-button>
      </el-form-item>
    </el-form>
    
    <div v-if="routeDistance" class="route-info">
      <div>距離: {{ routeDistance }} 公里</div>
      <div>預計時間: {{ routeDuration }} 分鐘</div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { useMapStore } from '../stores/mapStore';
import { useMapMarkers } from '../composables/useMap';
import LineString from 'ol/geom/LineString';
import Feature from 'ol/Feature';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { Style, Stroke } from 'ol/style';

const mapStore = useMapStore();
const { addMarker } = useMapMarkers();
const startPoint = ref('');
const endPoint = ref('');
const routeDistance = ref(null);
const routeDuration = ref(null);

let routeLayer = null;
let startMarker = null;
let endMarker = null;

// 計算路線
async function calculateRoute() {
  // 在實際應用中，這里應該調(diào)用路線規(guī)劃API
  // 這里使用模擬數(shù)據(jù)
  
  // 清除舊路線
  clearRoute();
  
  // 解析起點和終點坐標
  const startCoords = parseCoordinates(startPoint.value) || [116.404, 39.915];
  const endCoords = parseCoordinates(endPoint.value) || [116.404, 39.925];
  
  // 添加標記
  startMarker = addMarker(startCoords, { 
    title: '起點',
    icon: '/images/start-marker.png'
  });
  
  endMarker = addMarker(endCoords, { 
    title: '終點',
    icon: '/images/end-marker.png'
  });
  
  // 創(chuàng)建路線圖層
  const source = new VectorSource();
  routeLayer = new VectorLayer({
    source: source,
    style: new Style({
      stroke: new Stroke({
        color: '#0066ff',
        width: 4
      })
    })
  });
  
  mapStore.map.addLayer(routeLayer);
  
  // 模擬路線數(shù)據(jù)
  const routeCoords = [
    startCoords,
    [startCoords[0] + 0.005, startCoords[1] + 0.005],
    [endCoords[0] - 0.005, endCoords[1] - 0.005],
    endCoords
  ];
  
  // 計算距離和時間
  routeDistance.value = calculateDistance(routeCoords).toFixed(2);
  routeDuration.value = Math.round(routeDistance.value * 10);
  
  // 添加路線到圖層
  const routeFeature = new Feature({
    geometry: new LineString(routeCoords.map(coord => fromLonLat(coord)))
  });
  
  source.addFeature(routeFeature);
  
  // 調(diào)整視圖以顯示整個路線
  const view = mapStore.map.getView();
  view.fit(source.getExtent(), {
    padding: [50, 50, 50, 50],
    duration: 1000
  });
}

// 解析坐標
function parseCoordinates(input) {
  if (!input) return null;
  
  // 嘗試解析類似 "116.404,39.915" 的格式
  const parts = input.split(',');
  if (parts.length === 2) {
    const lon = parseFloat(parts[0]);
    const lat = parseFloat(parts[1]);
    if (!isNaN(lon) && !isNaN(lat)) {
      return [lon, lat];
    }
  }
  
  return null;
}

// 計算路線距離 (簡化版)
function calculateDistance(coords) {
  // 在實際應用中應該使用更精確的算法
  let distance = 0;
  for (let i = 1; i < coords.length; i++) {
    const dx = coords[i][0] - coords[i-1][0];
    const dy = coords[i][1] - coords[i-1][1];
    distance += Math.sqrt(dx*dx + dy*dy) * 111; // 粗略轉(zhuǎn)換為公里
  }
  return distance;
}

// 清除路線
function clearRoute() {
  if (routeLayer) {
    mapStore.map.removeLayer(routeLayer);
    routeLayer = null;
  }
  
  if (startMarker) {
    startMarker.getSource().removeFeature(startMarker);
  }
  
  if (endMarker) {
    endMarker.getSource().removeFeature(endMarker);
  }
  
  routeDistance.value = null;
  routeDuration.value = null;
}
</script>

<style scoped>
.route-planner {
  position: absolute;
  top: 20px;
  left: 300px;
  z-index: 100;
  width: 300px;
}

.route-info {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}
</style>

<!-- components/MapToolbar.vue -->
<template>
  <div class="map-toolbar">
    <el-button-group>
      <el-tooltip content="放大" placement="top">
        <el-button @click="zoomIn">
          <el-icon><zoom-in /></el-icon>
        </el-button>
      </el-tooltip>
      
      <el-tooltip content="縮小" placement="top">
        <el-button @click="zoomOut">
          <el-icon><zoom-out /></el-icon>
        </el-button>
      </el-tooltip>
      
      <el-tooltip content="復位" placement="top">
        <el-button @click="resetView">
          <el-icon><refresh /></el-icon>
        </el-button>
      </el-tooltip>
      
      <el-tooltip content="全屏" placement="top">
        <el-button @click="toggleFullscreen">
          <el-icon><full-screen /></el-icon>
        </el-button>
      </el-tooltip>
      
      <el-tooltip content="截圖" placement="top">
        <el-button @click="exportMap">
          <el-icon><camera /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>

<script setup>
import { useMapStore } from '../stores/mapStore';
import { useFullscreen } from '@vueuse/core';
import { toPng } from 'html-to-image';

const mapStore = useMapStore();
const { toggle: toggleFullscreen } = useFullscreen();

// 放大
function zoomIn() {
  const view = mapStore.map.getView();
  const zoom = view.getZoom();
  view.animate({
    zoom: zoom + 1,
    duration: 200
  });
}

// 縮小
function zoomOut() {
  const view = mapStore.map.getView();
  const zoom = view.getZoom();
  view.animate({
    zoom: zoom - 1,
    duration: 200
  });
}

// 復位
function resetView() {
  const view = mapStore.map.getView();
  view.animate({
    center: fromLonLat([116.404, 39.915]),
    zoom: 10,
    duration: 500
  });
}

// 導出地圖為圖片
async function exportMap() {
  try {
    const mapElement = mapStore.map.getViewport();
    const dataUrl = await toPng(mapElement);
    
    const link = document.createElement('a');
    link.download = 'map-screenshot.png';
    link.href = dataUrl;
    link.click();
  } catch (error) {
    console.error('導出地圖失敗:', error);
    ElMessage.error('導出地圖失敗');
  }
}
</script>

<style scoped>
.map-toolbar {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 4px;
}
</style>

<!-- views/HomeView.vue -->
<template>
  <div class="home-container">
    <MapContainer :view-options="initialView">
      <LayerControl />
      <MeasureTool />
      <RoutePlanner />
      <MapToolbar />
    </MapContainer>
  </div>
</template>

<script setup>
import MapContainer from '../components/MapContainer.vue';
import LayerControl from '../components/LayerControl.vue';
import MeasureTool from '../components/MeasureTool.vue';
import RoutePlanner from '../components/RoutePlanner.vue';
import MapToolbar from '../components/MapToolbar.vue';

const initialView = {
  center: [116.404, 39.915],
  zoom: 12
};
</script>

<style scoped>
.home-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>

// stores/themeStore.js
import { defineStore } from 'pinia';
import { ref, watch } from 'vue';

???????export const useThemeStore = defineStore('theme', () => {
  const currentTheme = ref('light');
  
  function toggleTheme() {
    currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
  }
  
  watch(currentTheme, (newTheme) => {
    document.documentElement.setAttribute('data-theme', newTheme);
  }, { immediate: true });
  
  return { currentTheme, toggleTheme };
});

// utils/eventBus.js
import mitt from 'mitt';

export const eventBus = mitt();

// 在組件中使用
import { eventBus } from '../utils/eventBus';

// 發(fā)送事件
eventBus.emit('marker-clicked', markerData);

// 接收事件
eventBus.on('marker-clicked', (data) => {
  // 處理事件
});

import Cluster from 'ol/source/Cluster';

const clusterSource = new Cluster({
  distance: 40,
  source: new VectorSource({
    url: 'data/points.geojson',
    format: new GeoJSON()
  })
});

const clusterLayer = new VectorLayer({
  source: clusterSource,
  style: function(feature) {
    const size = feature.get('features').length;
    // 根據(jù)聚類點數(shù)量返回不同樣式
  }
});

import WebGLPointsLayer from 'ol/layer/WebGLPoints';

const webglLayer = new WebGLPointsLayer({
  source: vectorSource,
  style: {
    symbol: {
      symbolType: 'circle',
      size: ['interpolate', ['linear'], ['get', 'size'], 8, 8, 12, 12],
      color: ['interpolate', ['linear'], ['get', 'value'], 0, 'blue', 100, 'red']
    }
  }
});

function setupLazyLayer() {
  const layer = new VectorLayer({
    source: new VectorSource(),
    visible: false
  });
  
  map.addLayer(layer);
  
  // 當圖層可見時加載數(shù)據(jù)
  layer.on('change:visible', function() {
    if (layer.getVisible() && layer.getSource().getFeatures().length === 0) {
      loadLayerData();
    }
  });
  
  async function loadLayerData() {
    const response = await fetch('data/large-dataset.geojson');
    const geojson = await response.json();
    layer.getSource().addFeatures(new GeoJSON().readFeatures(geojson));
  }
}

npm run build

# Dockerfile
FROM nginx:alpine

COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
server {
    listen 80;
    server_name localhost;
    
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    
    - name: Install dependencies
      run: npm install
    
    - name: Build project
      run: npm run build
    
    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        source: "dist/*"
        target: "/var/www/vue-ol-app"
    
    - name: Restart Nginx
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        script: |
          sudo systemctl restart nginx