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

1. 空间分析的重要性

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

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

2. 地图交互

2.1 交互类型

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

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

2.2 创建交互配置文件

创建 src/config/interactions.ts：

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：

3. 空间分析工具

3.1 常用空间分析方法

1. 测量分析

   • 面积测量：计算多边形区域的面积
   • 长度测量：计算线状要素的长度
   • 距离测量：计算两点之间的距离

2. 缓冲区分析

   • 创建要素周围的缓冲区区域
   • 常用于影响范围分析
   • 支持不同距离的缓冲区创建

3. 空间关系分析

   • 包含（Contains）：判断一个要素是否完全包含另一个要素
   • 相交（Intersects）：判断两个要素是否相交
   • 包含于（Within）：判断一个要素是否完全包含于另一个要素

3.2 创建空间分析工具

创建 src/utils/spatialAnalysis.ts：

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：

4. 实际应用场景

4.1 城市规划

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

4.2 环境监测

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

4.3 应急管理

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

5. 性能优化建议

1. 数据优化

   • 使用适当的数据格式
   • 数据简化（Simplification）
   • 空间索引优化

2. 渲染优化

   • 图层分级显示
   • 要素聚合
   • 使用WebGL渲染

3. 交互优化

   • 防抖处理
   • 异步加载
   • 缓存机制

6. 下一步学习方向

1. 高级空间分析

   • 网络分析
   • 地形分析
   • 空间统计

2. 数据可视化

   • 热力图
   • 聚类分析
   • 动态效果

3. 移动端开发

   • 触摸交互
   • 离线地图
   • 定位服务

4. 性能优化

   • WebGL渲染
   • 大数据处理
   • 并发控制

7. 功能说明

1. 地图交互：

   • 选择工具
   • 绘制工具（点、线、面）
   • 修改工具
   • 捕捉功能

2. 空间分析：

   • 面积测量
   • 长度测量
   • 缓冲区分析
   • 空间关系分析