React + Openlayers 开发记录

撤销栈：[]

重做栈：[]

禁止地图点击缩放和拖动平移交互

Openlayers 创建的地图默认支持点击缩放、拖动平移等交互，如果有禁止用户交互的需求，可以通过配置 Map 的 interactions 参数以禁止相应交互。

new Map({
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map-container',
  interactions: defaultInteractions({
    altShiftDragRotate: false, // 是否需要按住 Alt-Shift 键并拖动旋转
    doubleClickZoom: false, // 是否需要双击缩放
    mouseWheelZoom: false, // 是否需要鼠标滚轮缩放
    shiftDragZoom: false, // 是否需要按住 Shift 键拖动缩放
    dragPan: false, // 是否需要拖动平移
  }),
  controls: defaultControls({
    zoom: false,
    rotate: false,
    attribution: false,
  }),
})

图形的平移、旋转、缩放交互

ol-ext 是一组用于 Openlayers 的扩展、控件和交互。

可以使用 ol.interaction.Transform 类轻松实现对图形的平移、旋转、缩放等操作。

当鼠标指针悬停在图形上时，单击鼠标左键即可选中图形，此时会显示控制点，方便用户对要素进行操作。

import ExtTransform from 'ol-ext/interaction/Transform'

const extTransform = new ExtTransform({
  enableRotatedTransform: false, // 地图旋转时启用变换
  hitTolerance: 2, // 偏移量
  scale: true, // 缩放
  rotate: true, // 旋转
  stretch: true, // 拉伸
  translate: true, // 拖拽
  keepAspectRatio: shiftKeyOnly, // 按住shift保持同比例缩放
  keepRectangle: false, // 尽可能保留矩形
  translateBBox: true, // 在边界框内拖动即可移动
  translateFeature: true, // 点击feature即可移动
  addCondition: shiftKeyOnly, // 按住shift多选要素
  noFlip: false, // 防止特征几何翻转，默认为false
  layers: [drawLayer], // 指定可以拖拽的图层
  pointRadius: 0, // 设置选中样式的显示范围
})

map.addInteraction(extTransform) // 添加到地图

撤销/重做交互

ol.interaction.UndoRedo 类是 ol-ext 中用于处理地图上撤消和重做操作的交互类。它可以与地图中的矢量源和交互一起工作，使用户能够撤消和重做地图上的操作。

以下是与该类相关的一些常用方法和事件：

常用方法：

undo() 方法用于执行上次记录的操作。
redo() 方法用于重做上一次被撤消的操作。
shift() 方法允许您从撤消堆栈中删除操作。
getStack() 方法可获取堆栈中当前撤消操作的列表。

监听事件：

event:undo：当执行撤消操作时触发此事件。
event:redo：当执行重做操作时触发此事件。
change:add：当向撤消堆栈中添加新操作时触发此事件。
change:remove：当从撤消堆栈中移除操作时触发此事件。
change:clear：当清空整个撤消堆栈时触发此事件。

这些事件和方法提供了对撤消和重做操作的完整控制。你可以监听这些事件，以便在用户执行操作时采取相应的行动，也可以使用方法来执行撤消和重做的操作。

import ExtUndoRedo from 'ol-ext/interaction/UndoRedo'

// 撤销/重做交互
const extUndoRedo = new ExtUndoRedo()

extUndoRedo.on('undo', (event) => {
  console.log('undo', event)
})
extUndoRedo.on('redo', (event) => {
  console.log('redo', event)
})
extUndoRedo.on('stack:add', (event) => {
  console.log('stack:add', event)
})
extUndoRedo.on('stack:remove', (event) => {
  console.log('stack:remove', event)
})
extUndoRedo.on('stack:clear', (event) => {
  console.log('stack:clear', event)
})

extUndoRedo.undo()
extUndoRedo.redo()
extUndoRedo.shift()
extUndoRedo.getStack()

map.addInteraction(extUndoRedo) // 添加到地图