openlayers：实现使用“修改”交互来缩放和旋转几何体 (附完整源码）_openlayer interaction修改

使用ol/interaction/Modify交互来缩放和旋转几何图形的示例。自定义样式函数根据所修改顶点的位置生成并显示原始几何图形的缩放和旋转版本。这将设置为交互结束时的最终几何体。默认情况下，ol/geom/Geometry缩放和旋转方法使用几何体范围的中心作为锚。对于不规则形状，范围会随着几何体的旋转而变化，如果停止旋转并重新开始旋转，则使用其中心作为锚可能会产生不同的结果。为了避免使用相对于几何体固定的锚点-对于ol/geom/Polygon，顶点的质心，而对于ol/geom/LineString，中点。仅使用外部顶点（距锚最大距离的1/3以上）进行缩放和旋转，因为靠近锚的精确缩放将是困难的。为了方便用户，样式功能突出显示锚和可用顶点。ol/interaction/Translate交互也可用于重新定位几何图形。“修改”和“翻译”交互设置了互斥的condition选项，因此它们可以一起使用。使用Ctrl+Drag（Mac上为Command+Drag）可使用“翻译”交互。

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Circle as Cir
1
2