Vue3 + OpenLayers 开发教程 ( 三 ) 交互与空间分析

1. 空间分析的重要性

空间分析是GIS的核心功能之一，它可以帮助我们：

分析地理要素之间的空间关系
进行空间查询和统计
支持决策制定
预测和模拟地理现象

2. 地图交互

2.1 交互类型

在WebGIS中，常见的交互类型包括：

选择（Select）：选择地图上的要素
绘制（Draw）：创建新的地理要素
修改（Modify）：编辑现有要素
捕捉（Snap）：辅助精确绘制和编辑

2.2 创建交互配置文件

创建 src/config/interactions.ts：

typescript 复制代码

import { defaults as defaultInteractions } from 'ol/interaction';
import Draw from 'ol/interaction/Draw';
import Modify from 'ol/interaction/Modify';
import Select from 'ol/interaction/Select';
import Snap from 'ol/interaction/Snap';
import { click, pointerMove } from 'ol/events/condition';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Style, Fill, Stroke, Circle } from 'ol/style';

// 创建矢量图层
export const createVectorLayer = () => {
  return new VectorLayer({
    source: new VectorSource(),
    style: 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 createSelectInteraction = (vectorLayer: VectorLayer) => {
  return new Select({
    layers: [vectorLayer],
    condition: click,
    style: 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 createDrawInteraction = (vectorLayer: VectorLayer, type: 'Point' | 'LineString' | 'Polygon') => {
  return new Draw({
    source: vectorLayer.getSource() as VectorSource,
    type: type,
    style: 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 createModifyInteraction = (vectorLayer: VectorLayer) => {
  return new Modify({
    source: vectorLayer.getSource() as VectorSource
  });
};

// 创建捕捉交互
export const createSnapInteraction = (vectorLayer: VectorLayer) => {
  return new Snap({
    source: vectorLayer.getSource() as VectorSource
  });
};

1.2 创建工具组件

创建 src/components/map/Toolbar.vue：

vue 复制代码

<template>
  <div class="toolbar">
    <button
      v-for="tool in tools"
      :key="tool.name"
      :class="{ active: activeTool === tool.name }"
      @click="handleToolClick(tool)"
    >
      {{ tool.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useMapStore } from '@/stores/map';
import { createVectorLayer, createSelectInteraction, createDrawInteraction, createModifyInteraction, createSnapInteraction } from '@/config/interactions';
import type { Map } from 'ol';

const mapStore = useMapStore();
const activeTool = ref<string | null>(null);

const tools = [
  { name: 'select', label: '选择' },
  { name: 'point', label: '点' },
  { name: 'line', label: '线' },
  { name: 'polygon', label: '面' },
  { name: 'modify', label: '修改' }
];

let vectorLayer: any = null;
let currentInteraction: any = null;

const handleToolClick = (tool: { name: string; label: string }) => {
  if (activeTool.value === tool.name) {
    activeTool.value = null;
    removeCurrentInteraction();
    return;
  }

  activeTool.value = tool.name;
  removeCurrentInteraction();

  if (!vectorLayer) {
    vectorLayer = createVectorLayer();
    mapStore.map?.addLayer(vectorLayer);
  }

  switch (tool.name) {
    case 'select':
      currentInteraction = createSelectInteraction(vectorLayer);
      break;
    case 'point':
      currentInteraction = createDrawInteraction(vectorLayer, 'Point');
      break;
    case 'line':
      currentInteraction = createDrawInteraction(vectorLayer, 'LineString');
      break;
    case 'polygon':
      currentInteraction = createDrawInteraction(vectorLayer, 'Polygon');
      break;
    case 'modify':
      currentInteraction = createModifyInteraction(vectorLayer);
      break;
  }

  if (currentInteraction) {
    mapStore.map?.addInteraction(currentInteraction);
    if (tool.name !== 'select') {
      mapStore.map?.addInteraction(createSnapInteraction(vectorLayer));
    }
  }
};

const removeCurrentInteraction = () => {
  if (currentInteraction) {
    mapStore.map?.removeInteraction(currentInteraction);
    currentInteraction = null;
  }
};
</script>

<style scoped>
.toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.toolbar button.active {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}

.toolbar button:hover {
  background: #f0f0f0;
}

.toolbar button.active:hover {
  background: #40a9ff;
}
</style>

3. 空间分析工具

3.1 常用空间分析方法

测量分析
- 面积测量：计算多边形区域的面积
- 长度测量：计算线状要素的长度
- 距离测量：计算两点之间的距离
缓冲区分析
- 创建要素周围的缓冲区区域
- 常用于影响范围分析
- 支持不同距离的缓冲区创建
空间关系分析
- 包含（Contains）：判断一个要素是否完全包含另一个要素
- 相交（Intersects）：判断两个要素是否相交
- 包含于（Within）：判断一个要素是否完全包含于另一个要素

3.2 创建空间分析工具

创建 src/utils/spatialAnalysis.ts：

typescript 复制代码

import { Feature } from 'ol';
import { Geometry, Point, LineString, Polygon } from 'ol/geom';
import { getArea, getLength } from 'ol/sphere';
import { transform } from 'ol/proj';

// 计算几何图形面积
export const calculateArea = (feature: Feature<Geometry>): number => {
  const geometry = feature.getGeometry();
  if (geometry instanceof Polygon) {
    const coordinates = geometry.getCoordinates()[0];
    const transformedCoordinates = coordinates.map(coord =>
      transform(coord, 'EPSG:3857', 'EPSG:4326')
    );
    return getArea(new Polygon([transformedCoordinates]));
  }
  return 0;
};

// 计算几何图形长度
export const calculateLength = (feature: Feature<Geometry>): number => {
  const geometry = feature.getGeometry();
  if (geometry instanceof LineString) {
    const coordinates = geometry.getCoordinates();
    const transformedCoordinates = coordinates.map(coord =>
      transform(coord, 'EPSG:3857', 'EPSG:4326')
    );
    return getLength(new LineString(transformedCoordinates));
  }
  return 0;
};

// 缓冲区分析
export const createBuffer = (feature: Feature<Geometry>, distance: number): Feature<Polygon> => {
  const geometry = feature.getGeometry();
  if (!geometry) throw new Error('Geometry is required');

  const buffer = geometry.buffer(distance);
  return new Feature({
    geometry: buffer as Polygon
  });
};

// 空间关系分析
export const analyzeSpatialRelation = (
  feature1: Feature<Geometry>,
  feature2: Feature<Geometry>
): {
  contains: boolean;
  intersects: boolean;
  within: boolean;
} => {
  const geometry1 = feature1.getGeometry();
  const geometry2 = feature2.getGeometry();

  if (!geometry1 || !geometry2) {
    throw new Error('Both features must have geometries');
  }

  return {
    contains: geometry1.containsGeometry(geometry2),
    intersects: geometry1.intersectsGeometry(geometry2),
    within: geometry1.withinGeometry(geometry2)
  };
};

创建 src/components/map/AnalysisTools.vue：

vue 复制代码

<template>
  <div class="analysis-tools">
    <div class="tool-group">
      <h3>测量工具</h3>
      <button @click="startAreaMeasurement">面积测量</button>
      <button @click="startLengthMeasurement">长度测量</button>
    </div>
    <div class="tool-group">
      <h3>空间分析</h3>
      <button @click="startBufferAnalysis">缓冲区分析</button>
      <button @click="startSpatialRelation">空间关系</button>
    </div>
    <div v-if="measurementResult" class="result">
      <h3>测量结果</h3>
      <p>{{ measurementResult }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useMapStore } from '@/stores/map';
import { createVectorLayer, createDrawInteraction } from '@/config/interactions';
import { calculateArea, calculateLength, createBuffer, analyzeSpatialRelation } from '@/utils/spatialAnalysis';
import type { Feature } from 'ol';

const mapStore = useMapStore();
const measurementResult = ref<string>('');
let vectorLayer: any = null;
let currentInteraction: any = null;

const startAreaMeasurement = () => {
  if (!vectorLayer) {
    vectorLayer = createVectorLayer();
    mapStore.map?.addLayer(vectorLayer);
  }

  currentInteraction = createDrawInteraction(vectorLayer, 'Polygon');
  currentInteraction.on('drawend', (event: any) => {
    const area = calculateArea(event.feature);
    measurementResult.value = `面积: ${(area / 1000000).toFixed(2)} 平方公里`;
    mapStore.map?.removeInteraction(currentInteraction);
  });

  mapStore.map?.addInteraction(currentInteraction);
};

const startLengthMeasurement = () => {
  if (!vectorLayer) {
    vectorLayer = createVectorLayer();
    mapStore.map?.addLayer(vectorLayer);
  }

  currentInteraction = createDrawInteraction(vectorLayer, 'LineString');
  currentInteraction.on('drawend', (event: any) => {
    const length = calculateLength(event.feature);
    measurementResult.value = `长度: ${(length / 1000).toFixed(2)} 公里`;
    mapStore.map?.removeInteraction(currentInteraction);
  });

  mapStore.map?.addInteraction(currentInteraction);
};

const startBufferAnalysis = () => {
  // 实现缓冲区分析
};

const startSpatialRelation = () => {
  // 实现空间关系分析
};
</script>

<style scoped>
.analysis-tools {
  position: absolute;
  top: 60px;
  right: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tool-group {
  margin-bottom: 10px;
}

.tool-group h3 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.tool-group button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.tool-group button:hover {
  background: #f0f0f0;
}

.result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.result h3 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.result p {
  margin: 0;
  font-size: 12px;
  color: #666;
}
</style>

4. 实际应用场景

4.1 城市规划

用地规划分析
基础设施布局
城市扩张模拟

4.2 环境监测

污染源影响范围分析
生态保护区规划
环境风险评估

4.3 应急管理

灾害影响范围分析
救援路线规划
避难场所选址

5. 性能优化建议

数据优化
- 使用适当的数据格式
- 数据简化（Simplification）
- 空间索引优化
渲染优化
- 图层分级显示
- 要素聚合
- 使用WebGL渲染
交互优化
- 防抖处理
- 异步加载
- 缓存机制

6. 下一步学习方向

高级空间分析
- 网络分析
- 地形分析
- 空间统计
数据可视化
- 热力图
- 聚类分析
- 动态效果
移动端开发
- 触摸交互
- 离线地图
- 定位服务
性能优化
- WebGL渲染
- 大数据处理
- 并发控制

7. 功能说明

地图交互：
- 选择工具
- 绘制工具（点、线、面）
- 修改工具
- 捕捉功能
空间分析：
- 面积测量
- 长度测量
- 缓冲区分析
- 空间关系分析