OpenLayers中如何实现多段线绘制及虚实线动态切换？

DevOps 小满

2026-8-27

可行实现方案

双图层方案不推荐，额外维护两个图层的要素同步、事件绑定很容易出现预览段和确认段衔接断层、交互冲突的问题，完全没必要。手动重绘最新线段的思路方向正确，但不需要自己监听鼠标事件手动更新几何，利用OpenLayers Draw交互的内置逻辑+动态样式函数就能零额外成本实现效果，是性能最高、和原生逻辑兼容性最好的方案。

核心原理

Draw交互绘制线要素时，内部维护的临时草图（sketch）要素会自动同步两类坐标：

所有用户点击确认过的节点坐标
跟随鼠标实时更新的最后一个临时坐标
你只需要给绘制绑定的矢量图层传入动态样式函数，在绘制状态下拆分两类坐标对应的线段，分别返回实线、虚线样式即可，不需要额外操作要素几何。

具体实现步骤

给绘制用的矢量图层配置动态样式函数，不要写死静态样式
通过Draw的drawstart和drawend事件标记当前要素是否处于绘制中状态
样式函数判断要素状态：
- 非绘制状态（绘制完成的线）：直接返回全实线样式
- 绘制中状态：拆分坐标数组，前N-1个点组成的已确认线段返回实线样式，最后2个点（最后一个确认点+鼠标临时点）组成的预览段返回虚线样式
绘制结束后清除绘制标记，刷新要素样式确保最终展示为全实线

核心实现代码

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import LineString from 'ol/geom/LineString';
import OSM from 'ol/source/OSM';

// 初始化地图
const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({
    center: [0, 0],
    zoom: 6
  })
});

// 绘制用矢量源、图层
const drawSource = new VectorSource();
const drawLayer = new VectorLayer({
  source: drawSource,
  style: (feature) => {
    // 已完成绘制的线，统一返回实线样式
    if (!feature.get('drawing')) {
      return new Style({
        stroke: new Stroke({
          color: '#2563eb',
          width: 3,
          lineDash: null
        })
      });
    }

    const styles = [];
    const coords = feature.getGeometry().getCoordinates();
    // 已确认节点段：所有点击确认的点组成的线段，实线
    if (coords.length >= 2) {
      const confirmedLine = new LineString(coords.slice(0, -1));
      styles.push(new Style({
        geometry: confirmedLine,
        stroke: new Stroke({
          color: '#2563eb',
          width: 3
        })
      }));
    }
    // 实时预览段：最后一个确认点+鼠标位置点，虚线
    if (coords.length >= 2) {
      const previewLine = new LineString(coords.slice(-2));
      styles.push(new Style({
        geometry: previewLine,
        stroke: new Stroke({
          color: '#2563eb',
          width: 2,
          lineDash: [6, 4],
          opacity: 0.7
        })
      }));
    }
    return styles;
  }
});
map.addLayer(drawLayer);

// 初始化线绘制交互
const lineDraw = new Draw({
  source: drawSource,
  type: 'LineString'
});

// 绑定绘制状态标记
lineDraw.on('drawstart', (e) => {
  e.feature.set('drawing', true);
});
lineDraw.on('drawend', (e) => {
  e.feature.set('drawing', false);
  e.feature.changed(); // 触发样式重绘
});

map.addInteraction(lineDraw);

方案说明

这个实现和测量样式示例的逻辑完全兼容，如果需要加距离标注，只要在样式函数里额外添加文本样式，计算对应线段的长度放在中点位置即可，不需要改动核心逻辑。
全程只需要单个矢量图层，不需要手动同步坐标、监听鼠标移动事件，所有几何更新都走Draw交互的内置优化，不会出现交互卡顿、线段衔接错位的问题。

内容的提问来源于stack exchange，提问作者Daniella