Vue3 + OpenLayers 開發教程（四）樣式配置與性能優化

1. 地圖樣式基礎概念

1.1 什么是地圖樣式？

地圖樣式是決定地圖要素（點、線、面）如何顯示的重要配置。在 OpenLayers 中，樣式主要包含以下幾個核心組件：

Fill（填充）：控制面狀要素的內部填充
Stroke（描邊）：控制線狀要素和面狀要素邊界的樣式
Image（圖像）：控制點狀要素的顯示方式
Text（文本）：控制要素標簽的顯示

1.2 樣式配置的重要性

良好的樣式配置可以：

提升地圖的可讀性
突出重要信息
優化渲染性能
增強用戶體驗

2. 自定義樣式配置

2.1 創建樣式配置文件

創建 src/config/styles.ts：

import { Style, Fill, Stroke, Circle, Text } from 'ol/style';
import { Feature } from 'ol';
import { Geometry } from 'ol/geom';// 基礎樣式配置
export const baseStyle = new Style({fill: new Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new Stroke({color: '#ffcc33',width: 2}),image: new Circle({radius: 7,fill: new Fill({color: '#ffcc33'})})
});// 高亮樣式配置
export const highlightStyle = new Style({fill: new Fill({color: 'rgba(255, 255, 255, 0.4)'}),stroke: new Stroke({color: '#ff0000',width: 2}),image: new Circle({radius: 7,fill: new Fill({color: '#ff0000'})})
});// 標簽樣式配置
export const labelStyle = (feature: Feature<Geometry>) => {return new Style({text: new Text({text: feature.get('name') || '',font: '14px sans-serif',fill: new Fill({color: '#000000'}),stroke: new Stroke({color: '#ffffff',width: 3}),offsetY: -15})});
};// 聚類樣式配置
export const clusterStyle = (feature: Feature<Geometry>) => {const size = feature.get('features')?.length || 0;const radius = Math.min(20 + Math.sqrt(size) * 5, 40);return new Style({image: new Circle({radius: radius,fill: new Fill({color: `rgba(255, 153, 0, ${Math.min(0.8, 0.4 + size / 100)})`}),stroke: new Stroke({color: '#ff9900',width: 2})}),text: new Text({text: size.toString(),font: '12px sans-serif',fill: new Fill({color: '#ffffff'})})});
};// 熱力圖樣式配置
export const heatmapStyle = {radius: 15,blur: 15,gradient: ['rgba(0, 0, 255, 0)','rgba(0, 0, 255, 1)','rgba(0, 255, 255, 1)','rgba(0, 255, 0, 1)','rgba(255, 255, 0, 1)','rgba(255, 0, 0, 1)']
};

2.2 創建樣式管理組件

創建 src/components/map/StyleManager.vue：

<template><div class="style-manager"><div class="style-group"><h3>樣式配置</h3><div class="style-item"><label>填充顏色</label><input type="color" v-model="fillColor" @change="updateStyle"></div><div class="style-item"><label>邊框顏色</label><input type="color" v-model="strokeColor" @change="updateStyle"></div><div class="style-item"><label>邊框寬度</label><input type="range" v-model="strokeWidth" min="1" max="10" @change="updateStyle"></div><div class="style-item"><label>點半徑</label><input type="range" v-model="pointRadius" min="3" max="20" @change="updateStyle"></div></div></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import { useMapStore } from '@/stores/map';
import { Style, Fill, Stroke, Circle } from 'ol/style';const mapStore = useMapStore();const fillColor = ref('#ffffff');
const strokeColor = ref('#ffcc33');
const strokeWidth = ref(2);
const pointRadius = ref(7);const updateStyle = () => {const style = new Style({fill: new Fill({color: fillColor.value + '33' // 添加透明度}),stroke: new Stroke({color: strokeColor.value,width: strokeWidth.value}),image: new Circle({radius: pointRadius.value,fill: new Fill({color: strokeColor.value})})});// 更新當前選中圖層的樣式if (mapStore.activeLayer) {mapStore.activeLayer.setStyle(style);}
};
</script><style scoped>
.style-manager {position: absolute;top: 10px;right: 120px;background: white;padding: 10px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.style-group {margin-bottom: 10px;
}.style-group h3 {margin: 0 0 10px 0;font-size: 14px;
}.style-item {margin-bottom: 8px;
}.style-item label {display: block;margin-bottom: 4px;font-size: 12px;
}.style-item input[type="color"] {width: 100%;height: 30px;padding: 0;border: 1px solid #ccc;border-radius: 4px;
}.style-item input[type="range"] {width: 100%;
}
</style>

3. 性能優化基礎

3.1 為什么需要性能優化？

地圖應用通常需要處理大量數據，性能優化可以：

提升渲染速度
減少內存占用
改善用戶體驗
延長設備電池壽命

3.2 常見性能瓶頸

渲染瓶頸：
- 過多的圖層和要素
- 復雜的樣式計算
- 頻繁的重繪操作
內存瓶頸：
- 未及時清理的圖層
- 重復的數據存儲
- 過大的數據量
計算瓶頸：
- 復雜的幾何計算
- 頻繁的樣式更新
- 大量的數據轉換

4. 性能優化實現

4.1 圖層優化

創建 src/utils/performance.ts：

import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Cluster } from 'ol/source';
import { Heatmap as HeatmapLayer } from 'ol/layer';
import { Style, Circle, Fill, Stroke } from 'ol/style';
import { clusterStyle, heatmapStyle } from '@/config/styles';// 創建聚類圖層
export const createClusterLayer = (source: VectorSource, distance: number = 40) => {return new VectorLayer({source: new Cluster({source: source,distance: distance}),style: clusterStyle});
};// 創建熱力圖層
export const createHeatmapLayer = (source: VectorSource) => {return new HeatmapLayer({source: source,...heatmapStyle});
};// 圖層可見性優化
export const optimizeLayerVisibility = (layer: VectorLayer, zoom: number) => {const minZoom = layer.getMinZoom() || 0;const maxZoom = layer.getMaxZoom() || 20;if (zoom < minZoom || zoom > maxZoom) {layer.setVisible(false);} else {layer.setVisible(true);}
};// 要素簡化
export const simplifyGeometry = (feature: any, tolerance: number) => {const geometry = feature.getGeometry();if (geometry) {const simplified = geometry.simplify(tolerance);feature.setGeometry(simplified);}
};// 視圖變化優化
export const optimizeViewChange = (map: any, callback: Function, delay: number = 100) => {let timeout: number;map.on('moveend', () => {clearTimeout(timeout);timeout = window.setTimeout(() => {callback();}, delay);});
};

4.2 創建性能監控組件

創建 src/components/map/PerformanceMonitor.vue：

<template><div class="performance-monitor"><div class="metric"><span>FPS</span><span>{{ fps.toFixed(1) }}</span></div><div class="metric"><span>內存</span><span>{{ memory }}MB</span></div><div class="metric"><span>圖層數</span><span>{{ layerCount }}</span></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useMapStore } from '@/stores/map';const mapStore = useMapStore();
const fps = ref(0);
const memory = ref(0);
const layerCount = ref(0);let frameCount = 0;
let lastTime = performance.now();
let frameId: number;const updateMetrics = () => {frameCount++;const currentTime = performance.now();if (currentTime - lastTime >= 1000) {fps.value = (frameCount * 1000) / (currentTime - lastTime);frameCount = 0;lastTime = currentTime;// 獲取內存使用情況if (window.performance && window.performance.memory) {memory.value = Math.round(window.performance.memory.usedJSHeapSize / 1048576);}// 獲取圖層數量layerCount.value = mapStore.map?.getLayers().getArray().length || 0;}frameId = requestAnimationFrame(updateMetrics);
};onMounted(() => {updateMetrics();
});onUnmounted(() => {cancelAnimationFrame(frameId);
});
</script><style scoped>
.performance-monitor {position: absolute;bottom: 10px;right: 10px;background: rgba(0, 0, 0, 0.7);color: white;padding: 5px 10px;border-radius: 4px;font-size: 12px;display: flex;gap: 15px;
}.metric {display: flex;flex-direction: column;align-items: center;
}.metric span:first-child {font-size: 10px;opacity: 0.8;
}
</style>