1098 lines
36 KiB
TypeScript
1098 lines
36 KiB
TypeScript
import { watch, onUnmounted, type Ref, h } from 'vue';
|
||
import { storeToRefs } from 'pinia';
|
||
import { Modal, Input } from 'ant-design-vue';
|
||
import OlMap from 'ol/Map';
|
||
import VectorLayer from 'ol/layer/Vector';
|
||
import VectorSource from 'ol/source/Vector';
|
||
import Feature from 'ol/Feature';
|
||
import Point from 'ol/geom/Point';
|
||
import LineString from 'ol/geom/LineString';
|
||
import Polygon from 'ol/geom/Polygon';
|
||
import Circle from 'ol/geom/Circle';
|
||
import { fromLonLat, toLonLat } from 'ol/proj';
|
||
import { getLength, getArea } from 'ol/sphere';
|
||
import Style from 'ol/style/Style';
|
||
import Stroke from 'ol/style/Stroke';
|
||
import Fill from 'ol/style/Fill';
|
||
import CircleStyle from 'ol/style/Circle';
|
||
import Draw, { type DrawEvent } from 'ol/interaction/Draw';
|
||
import Select, { type SelectEvent } from 'ol/interaction/Select';
|
||
import Modify from 'ol/interaction/Modify';
|
||
import Translate from 'ol/interaction/Translate';
|
||
import Text from 'ol/style/Text';
|
||
import RegularShape from 'ol/style/RegularShape';
|
||
import { useMapStudioStore } from '../stores/mapStudioStore';
|
||
import { useUndoRedo } from './useUndoRedo';
|
||
import type { DrawStyle, SelectedDrawInfo, DrawToolType } from '../types';
|
||
|
||
/** 已绘制 feature 的自定义属性 key */
|
||
export const DRAW_FEATURE_ID_KEY = '_drawId';
|
||
export const DRAW_FEATURE_TYPE_KEY = '_drawType';
|
||
export const DRAW_FEATURE_TEXT_KEY = '_drawText';
|
||
|
||
let drawIdCounter = 0;
|
||
function nextDrawId(): string {
|
||
return `draw_${Date.now()}_${++drawIdCounter}`;
|
||
}
|
||
|
||
/** Feature 上存储单个样式对象的属性 key */
|
||
const DS_FEATURE_KEY = '_drawPerStyle';
|
||
|
||
/**
|
||
* 防止选中图形时同步样式触发不必要撤回步骤的标记。
|
||
* updateSelectedDrawInfo 中设为 true，等待 Vue watch 队列消费完毕后自动恢复 false。
|
||
*/
|
||
let skipStyleCp = false;
|
||
/**
|
||
* 样式变更的防抖定时器（150ms）。
|
||
* 同一交互内的快速连续变更（如拖拽颜色滑块）合并为 1 个撤回步骤；
|
||
* 不同用户操作（如修改颜色后修改字号）之间创建独立的撤回步骤。
|
||
*/
|
||
let styleCpTimer: ReturnType<typeof setTimeout> | null = null;
|
||
|
||
/** 根据 lineType 返回 lineDash 数组 */
|
||
function getLineDash(type: string): number[] | undefined {
|
||
switch (type) {
|
||
case 'dashed':
|
||
return [10, 6];
|
||
case 'dotted':
|
||
return [3, 4];
|
||
case 'dash-dot':
|
||
return [10, 4, 3, 4];
|
||
default:
|
||
return undefined;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 管理自定义绘制工具（Draw/Modify/Select/Translate）
|
||
*
|
||
* 设计：
|
||
* - Select / Modify / Translate 始终存在（永久交互），非绘制状态也能选中/编辑
|
||
* - Draw 交互跟随 drawToolActive 增删，光标也由其驱动
|
||
* - 每个绘制的 feature 独立存储自己的样式对象，右侧抽屉修改仅影响当前选中的 feature
|
||
*/
|
||
/** 模块级 action 引用，由 useDrawTools 填充 */
|
||
export const drawActions = {
|
||
deleteSelectedDraw: null as (() => void) | null,
|
||
updateSelectedTextContent: null as ((text: string) => void) | null,
|
||
getSerializedFeatures: null as (() => any[]) | null,
|
||
clearAllDrawings: null as (() => void) | null,
|
||
restoreDrawingsFromSave: null as
|
||
| ((features: any[], style: any) => void)
|
||
| null
|
||
};
|
||
|
||
export function useDrawTools(mapInstance: Ref<OlMap | null>) {
|
||
const store = useMapStudioStore();
|
||
const {
|
||
drawToolActive,
|
||
drawStyle,
|
||
selectedDrawInfo,
|
||
activeTab,
|
||
selectedDrawStyle,
|
||
selectedDrawText
|
||
} = storeToRefs(store);
|
||
// ── 图层 ──
|
||
const drawSource = new VectorSource();
|
||
const drawLayer = new VectorLayer({
|
||
source: drawSource,
|
||
style: createDrawStyleFunction,
|
||
zIndex: 100
|
||
});
|
||
|
||
// 绘制图形增删即时记录撤回步骤
|
||
// ⚠ OL 在 drawend 事件触发时尚未将图形添加到 source，
|
||
// 因此不能依赖 drawend 内调用 checkpoint（会捕获添加前的状态，导致栈落后1个图形）
|
||
// 改用 addfeature 事件（OL 将 finalized feature 添加到 source 后触发）来记录添加步骤
|
||
const {
|
||
drawCheckpoint: onDrawChange,
|
||
setSuppressWatcher,
|
||
beginDrawBatch
|
||
} = useUndoRedo();
|
||
drawSource.on('addfeature', evt => {
|
||
const addedFeat = (evt as any).feature;
|
||
// drawstart 阶段 OL 添加的 sketch feature 没有 DRAW_FEATURE_ID_KEY，过滤掉
|
||
// drawend 完成后 OL 添加的 finalized feature 已有 DRAW_FEATURE_ID_KEY，记录 checkpoint
|
||
// 文字工具跳过：addfeature 触发时文字内容还未录入，等 onOk 确认后再手动创建快照
|
||
if (
|
||
addedFeat &&
|
||
addedFeat.get(DRAW_FEATURE_ID_KEY) &&
|
||
addedFeat.get(DRAW_FEATURE_TYPE_KEY) !== 'text'
|
||
) {
|
||
onDrawChange();
|
||
}
|
||
});
|
||
drawSource.on('removefeature', evt => {
|
||
const removedFeat = (evt as any).feature;
|
||
// 只有真实绘制的 feature 才触发 checkpoint，过滤 OL 内部 sketch feature（问题7修复）
|
||
if (removedFeat && removedFeat.get(DRAW_FEATURE_ID_KEY)) {
|
||
onDrawChange();
|
||
}
|
||
});
|
||
|
||
// ── 永久交互（Select / Modify / Translate）─
|
||
const persistentInteractions: import('ol/interaction/Interaction')[] = [];
|
||
let currentDrawInteraction: Draw | null = null;
|
||
|
||
// ── Shift 键状态（用于约束直线/正方形/正圆绘制）──
|
||
let shiftHeld = false;
|
||
/** 当前绘制的 sketch feature（用于 shift 按住时强制更新预览） */
|
||
let sketchFeature: Feature | null = null;
|
||
/** 当前 geometryFunction（用于 shift 按住时重新计算几何） */
|
||
let currentGeometryFunction:
|
||
| ((coords: number[][], geom?: any) => any)
|
||
| null = null;
|
||
/** 最后一次传递给 geometryFunction 的原始坐标（用于 shift 按住时重新计算） */
|
||
let lastRawSketchCoords: number[][] | null = null;
|
||
|
||
// ── 样式工厂（从 feature 自身读取样式，fallback 到 drawStyle）──
|
||
function createDrawStyleFunction(feature: Feature): Style[] {
|
||
const perStyle = feature.get(DS_FEATURE_KEY) as
|
||
| Partial<DrawStyle>
|
||
| undefined;
|
||
const strokeColor = perStyle?.strokeColor ?? drawStyle.value.strokeColor;
|
||
const strokeWidth = perStyle?.strokeWidth ?? drawStyle.value.strokeWidth;
|
||
const fillColor = perStyle?.fillColor ?? drawStyle.value.fillColor;
|
||
const pointColor = perStyle?.pointColor ?? drawStyle.value.pointColor;
|
||
const pointRadius = perStyle?.pointRadius ?? drawStyle.value.pointRadius;
|
||
const lineType = perStyle?.lineType ?? drawStyle.value.lineType;
|
||
const showArrow = perStyle?.showArrow ?? drawStyle.value.showArrow;
|
||
const arrowPosition =
|
||
perStyle?.arrowPosition ?? drawStyle.value.arrowPosition;
|
||
const arrowSize = perStyle?.arrowSize ?? drawStyle.value.arrowSize;
|
||
const fontSize = perStyle?.fontSize ?? drawStyle.value.fontSize;
|
||
const fontFamily = perStyle?.fontFamily ?? drawStyle.value.fontFamily;
|
||
const textColor = perStyle?.textColor ?? drawStyle.value.textColor;
|
||
const textStrokeColor =
|
||
perStyle?.textStrokeColor ?? drawStyle.value.textStrokeColor;
|
||
const textStrokeWidth =
|
||
perStyle?.textStrokeWidth ?? drawStyle.value.textStrokeWidth;
|
||
const fontBold = perStyle?.fontBold ?? drawStyle.value.fontBold;
|
||
|
||
const stroke =
|
||
strokeWidth > 0
|
||
? new Stroke({
|
||
color: strokeColor,
|
||
width: strokeWidth,
|
||
lineDash: getLineDash(lineType) || []
|
||
})
|
||
: undefined;
|
||
|
||
const geomType = feature.getGeometry()?.getType();
|
||
const textContent = feature.get(DRAW_FEATURE_TEXT_KEY) as
|
||
| string
|
||
| undefined;
|
||
const drawTypeKey = feature.get(DRAW_FEATURE_TYPE_KEY) as
|
||
| string
|
||
| undefined;
|
||
|
||
// ── 文字标注 ──
|
||
if (textContent) {
|
||
return [
|
||
new Style({
|
||
text: new Text({
|
||
text: textContent,
|
||
font: `${fontBold ? 'bold ' : ''}${Math.max(
|
||
fontSize,
|
||
12
|
||
)}px ${fontFamily}`,
|
||
fill: new Fill({ color: textColor }),
|
||
stroke:
|
||
textStrokeWidth > 0
|
||
? new Stroke({ color: textStrokeColor, width: textStrokeWidth })
|
||
: undefined,
|
||
offsetX: 0,
|
||
offsetY: 0
|
||
})
|
||
})
|
||
];
|
||
}
|
||
|
||
// ── Point（标记点）──
|
||
if (geomType === 'Point') {
|
||
const imgStyle = new CircleStyle({
|
||
radius: pointRadius,
|
||
fill: new Fill({ color: pointColor })
|
||
});
|
||
if (stroke) imgStyle.setStroke(stroke);
|
||
return [new Style({ image: imgStyle })];
|
||
}
|
||
|
||
const styles: Style[] = [];
|
||
|
||
// ── LineString（折线）──
|
||
if (geomType === 'LineString') {
|
||
if (stroke) styles.push(new Style({ stroke }));
|
||
|
||
// 箭头（自由手绘不显示箭头）
|
||
if (showArrow && drawTypeKey !== 'freehand') {
|
||
const lineGeom = feature.getGeometry() as LineString;
|
||
const coords = lineGeom.getCoordinates();
|
||
if (coords.length >= 2) {
|
||
const arrowR =
|
||
arrowSize === 'small' ? 6 : arrowSize === 'large' ? 12 : 9;
|
||
|
||
// 结束箭头
|
||
const last = coords[coords.length - 1];
|
||
const prev = coords[coords.length - 2];
|
||
const endAngle = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
|
||
styles.push(
|
||
new Style({
|
||
geometry: new Point(last),
|
||
image: new RegularShape({
|
||
points: 3,
|
||
radius: arrowR,
|
||
rotation: endAngle - Math.PI / 2,
|
||
fill: new Fill({ color: strokeColor }),
|
||
stroke: new Stroke({ color: strokeColor, width: 1 })
|
||
})
|
||
})
|
||
);
|
||
|
||
// 起始箭头
|
||
if (arrowPosition === 'both' && coords.length >= 2) {
|
||
const first = coords[0];
|
||
const second = coords[1];
|
||
const startAngle = Math.atan2(
|
||
first[1] - second[1],
|
||
first[0] - second[0]
|
||
);
|
||
styles.push(
|
||
new Style({
|
||
geometry: new Point(first),
|
||
image: new RegularShape({
|
||
points: 3,
|
||
radius: arrowR,
|
||
rotation: startAngle - Math.PI / 2,
|
||
fill: new Fill({ color: strokeColor }),
|
||
stroke: new Stroke({ color: strokeColor, width: 1 })
|
||
})
|
||
})
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Polygon / Circle ──
|
||
if (geomType === 'Polygon' || geomType === 'Circle') {
|
||
const polyStyle = new Style({ fill: new Fill({ color: fillColor }) });
|
||
if (stroke) polyStyle.setStroke(stroke);
|
||
styles.push(polyStyle);
|
||
}
|
||
|
||
return styles.length > 0 ? styles : [];
|
||
}
|
||
|
||
// ── 计算几何信息 ──
|
||
function computeGeomInfo(feature: Feature): SelectedDrawInfo {
|
||
const geom = feature.getGeometry()!;
|
||
const geomType = geom.getType();
|
||
const id = (feature.get(DRAW_FEATURE_ID_KEY) as string) || nextDrawId();
|
||
const drawTypeKey = (feature.get(DRAW_FEATURE_TYPE_KEY) as string) || '';
|
||
const coords: number[] = [];
|
||
|
||
if (geomType === 'Point') {
|
||
const [lng, lat] = toLonLat((geom as Point).getCoordinates());
|
||
coords.push(lng, lat);
|
||
} else if (geomType === 'LineString') {
|
||
const line = geom as LineString;
|
||
line.getCoordinates().forEach(p => {
|
||
const [lng, lat] = toLonLat(p);
|
||
coords.push(lng, lat);
|
||
});
|
||
} else if (geomType === 'Polygon') {
|
||
const poly = geom as Polygon;
|
||
poly.getFirstCoordinate().forEach(p => {
|
||
const [lng, lat] = toLonLat(p);
|
||
coords.push(lng, lat);
|
||
});
|
||
} else if (geomType === 'Circle') {
|
||
const center = toLonLat((geom as Circle).getCenter());
|
||
coords.push(center[0], center[1]);
|
||
}
|
||
|
||
let length: number | undefined;
|
||
let area: number | undefined;
|
||
|
||
if (geomType === 'LineString') {
|
||
length = getLength(geom as LineString);
|
||
} else if (geomType === 'Polygon') {
|
||
area = getArea(geom as Polygon);
|
||
} else if (geomType === 'Circle') {
|
||
area = Math.PI * (geom as Circle).getRadius() ** 2;
|
||
}
|
||
|
||
let displayType: SelectedDrawInfo['type'] = 'Point';
|
||
if (geomType === 'LineString') displayType = 'LineString';
|
||
else if (geomType === 'Polygon') displayType = 'Polygon';
|
||
else if (geomType === 'Circle') displayType = 'Circle';
|
||
|
||
return { id, type: displayType, drawTypeKey, coords, length, area };
|
||
}
|
||
|
||
let selectedFeatureId: string | null = null;
|
||
|
||
/** 将 feature 存储的样式同步到 selectedDrawStyle */
|
||
function syncPerStyleToSelected(feature: Feature | null) {
|
||
if (!feature) {
|
||
selectedDrawStyle.value = { ...drawStyle.value };
|
||
selectedDrawText.value = '';
|
||
return;
|
||
}
|
||
const stored = feature.get(DS_FEATURE_KEY) as
|
||
| Partial<DrawStyle>
|
||
| undefined;
|
||
selectedDrawStyle.value = {
|
||
strokeColor: stored?.strokeColor ?? drawStyle.value.strokeColor,
|
||
strokeWidth: stored?.strokeWidth ?? drawStyle.value.strokeWidth,
|
||
fillColor: stored?.fillColor ?? drawStyle.value.fillColor,
|
||
pointColor: stored?.pointColor ?? drawStyle.value.pointColor,
|
||
pointRadius: stored?.pointRadius ?? drawStyle.value.pointRadius,
|
||
lineType: stored?.lineType ?? drawStyle.value.lineType,
|
||
showArrow: stored?.showArrow ?? drawStyle.value.showArrow,
|
||
arrowPosition: stored?.arrowPosition ?? drawStyle.value.arrowPosition,
|
||
arrowSize: stored?.arrowSize ?? drawStyle.value.arrowSize,
|
||
fontSize: stored?.fontSize ?? drawStyle.value.fontSize,
|
||
fontFamily: stored?.fontFamily ?? drawStyle.value.fontFamily,
|
||
textColor: stored?.textColor ?? drawStyle.value.textColor,
|
||
textStrokeColor:
|
||
stored?.textStrokeColor ?? drawStyle.value.textStrokeColor,
|
||
textStrokeWidth:
|
||
stored?.textStrokeWidth ?? drawStyle.value.textStrokeWidth,
|
||
fontBold: stored?.fontBold ?? drawStyle.value.fontBold
|
||
};
|
||
selectedDrawText.value =
|
||
(feature.get(DRAW_FEATURE_TEXT_KEY) as string) || '';
|
||
}
|
||
|
||
/** 强制刷新图层渲染 */
|
||
function refreshLayerStyle() {
|
||
drawLayer.changed();
|
||
}
|
||
|
||
/** 将 selectedDrawStyle 写回 feature 并刷新渲染 */
|
||
function saveSelectedDrawStyleToFeature() {
|
||
if (!selectedFeatureId) return;
|
||
const feature = getSelectedFeature();
|
||
if (!feature) return;
|
||
const s = selectedDrawStyle.value;
|
||
feature.set(DS_FEATURE_KEY, {
|
||
strokeColor: s.strokeColor,
|
||
strokeWidth: s.strokeWidth,
|
||
fillColor: s.fillColor,
|
||
pointColor: s.pointColor,
|
||
pointRadius: s.pointRadius,
|
||
lineType: s.lineType,
|
||
showArrow: s.showArrow,
|
||
arrowPosition: s.arrowPosition,
|
||
arrowSize: s.arrowSize,
|
||
fontSize: s.fontSize,
|
||
fontFamily: s.fontFamily,
|
||
textColor: s.textColor,
|
||
textStrokeColor: s.textStrokeColor,
|
||
textStrokeWidth: s.textStrokeWidth,
|
||
fontBold: s.fontBold
|
||
});
|
||
refreshLayerStyle();
|
||
|
||
// 用户主动编辑样式时创建撤回步骤（跳过选中 feature 时的首次同步）
|
||
// 防抖 200ms：同一交互内的快速连续变更（如拖拽颜色滑块）合并为 1 个步骤，
|
||
// 停止操作 200ms 后自动创建撤回步骤；不同用户操作之间产生独立步骤。
|
||
if (!skipStyleCp) {
|
||
if (styleCpTimer) {
|
||
clearTimeout(styleCpTimer);
|
||
}
|
||
styleCpTimer = setTimeout(() => {
|
||
styleCpTimer = null;
|
||
onDrawChange();
|
||
}, 200);
|
||
}
|
||
}
|
||
|
||
// 监听 selectedDrawStyle 变化 → 自动保存到当前 feature
|
||
const stopPerStyleWatch = watch(
|
||
selectedDrawStyle,
|
||
() => {
|
||
saveSelectedDrawStyleToFeature();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 监听 drawStyle（全局默认）变化 → 刷新渲染
|
||
const stopStyleWatch = watch(
|
||
drawStyle,
|
||
() => {
|
||
refreshLayerStyle();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// ── 更新 selectedDrawInfo ──
|
||
function updateSelectedDrawInfo(feature: Feature | null) {
|
||
// 选中/取消选中图形时同步样式，不应产生撤回步骤
|
||
skipStyleCp = true;
|
||
setTimeout(() => {
|
||
skipStyleCp = false;
|
||
}, 0);
|
||
if (!feature) {
|
||
selectedDrawInfo.value = null;
|
||
selectedFeatureId = null;
|
||
syncPerStyleToSelected(null);
|
||
return;
|
||
}
|
||
selectedFeatureId = feature.get(DRAW_FEATURE_ID_KEY) as string;
|
||
selectedDrawInfo.value = computeGeomInfo(feature);
|
||
syncPerStyleToSelected(feature);
|
||
}
|
||
|
||
// ── 删除选中的绘制图形 ──
|
||
function deleteSelectedDraw() {
|
||
if (!selectedFeatureId) return;
|
||
const feature = drawSource
|
||
.getFeatures()
|
||
.find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId);
|
||
if (feature) drawSource.removeFeature(feature);
|
||
selectedDrawInfo.value = null;
|
||
selectedFeatureId = null;
|
||
}
|
||
|
||
function getSelectedFeature(): Feature | null {
|
||
if (!selectedFeatureId) return null;
|
||
return (
|
||
drawSource
|
||
.getFeatures()
|
||
.find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId) || null
|
||
);
|
||
}
|
||
|
||
/** 更新选中 feature 的文字内容 */
|
||
function updateSelectedTextContent(text: string) {
|
||
if (!selectedFeatureId) return;
|
||
const feature = getSelectedFeature();
|
||
if (!feature) return;
|
||
feature.set(DRAW_FEATURE_TEXT_KEY, text);
|
||
refreshLayerStyle();
|
||
onDrawChange();
|
||
}
|
||
|
||
// ── 设置永久交互（Select / Modify / Translate）──────────────
|
||
function setupPersistentInteractions() {
|
||
if (persistentInteractions.length > 0) return; // 防重复
|
||
const map = mapInstance.value;
|
||
if (!map) return;
|
||
|
||
// ── Select ──
|
||
const selectInteraction = new Select({
|
||
layers: [drawLayer],
|
||
style: null
|
||
});
|
||
selectInteraction.on('select', (evt: SelectEvent) => {
|
||
const feat = evt.selected.length > 0 ? evt.selected[0] : null;
|
||
// 选中图形只切换 tab 展示内容，不应产生撤回步骤（问题6修复）
|
||
beginDrawBatch();
|
||
updateSelectedDrawInfo(feat);
|
||
if (feat) {
|
||
activeTab.value = 'draw';
|
||
} else if (!evt.deselected.length) {
|
||
// 点击空白 → 取消选中
|
||
selectedDrawInfo.value = null;
|
||
selectedFeatureId = null;
|
||
}
|
||
});
|
||
map.addInteraction(selectInteraction);
|
||
persistentInteractions.push(selectInteraction);
|
||
|
||
// ── Modify ──
|
||
const modifyInteraction = new Modify({
|
||
source: drawSource,
|
||
style: null
|
||
});
|
||
map.addInteraction(modifyInteraction);
|
||
persistentInteractions.push(modifyInteraction);
|
||
|
||
// ── Translate ──
|
||
const translateInteraction = new Translate({
|
||
layers: [drawLayer]
|
||
});
|
||
translateInteraction.on('translating', () => {
|
||
if (selectedFeatureId) {
|
||
const feat = drawSource
|
||
.getFeatures()
|
||
.find(f => f.get(DRAW_FEATURE_ID_KEY) === selectedFeatureId);
|
||
if (feat) {
|
||
selectedDrawInfo.value = computeGeomInfo(feat);
|
||
}
|
||
}
|
||
});
|
||
map.addInteraction(translateInteraction);
|
||
persistentInteractions.push(translateInteraction);
|
||
}
|
||
|
||
// ── 同步 Draw 交互（跟随 drawToolActive）─────────────────────
|
||
/** 根据当前工具生成 Draw 预览样式 */
|
||
function createDrawPreviewStyle(): Style[] {
|
||
const ds = drawStyle.value;
|
||
const isPointTool = drawToolActive.value === 'point';
|
||
const isLineTool =
|
||
drawToolActive.value === 'line' || drawToolActive.value === 'freehand';
|
||
const previewStroke =
|
||
ds.strokeWidth > 0
|
||
? new Stroke({
|
||
color: ds.strokeColor,
|
||
width: ds.strokeWidth,
|
||
lineDash: isLineTool ? getLineDash(ds.lineType) || [] : []
|
||
})
|
||
: undefined;
|
||
return [
|
||
new Style({
|
||
stroke: previewStroke,
|
||
fill: new Fill({ color: ds.fillColor }),
|
||
image: isPointTool
|
||
? new CircleStyle({
|
||
radius: ds.pointRadius,
|
||
fill: new Fill({ color: ds.pointColor }),
|
||
stroke: previewStroke || undefined
|
||
})
|
||
: undefined
|
||
})
|
||
];
|
||
}
|
||
|
||
// ── Shift 约束的 geometryFunction ──
|
||
/**
|
||
* 椭圆/正圆 geometryFunction
|
||
* 使用 type:'Circle'（click-drag-release），
|
||
* 第一点为外接矩形左上角，第二点为右下角
|
||
* 默认椭圆，按住 shift 为正圆
|
||
*/
|
||
function createEllipseGeometryFunction(): (
|
||
coords: number[][],
|
||
geom?: any
|
||
) => any {
|
||
return function (coords: number[][], geom?: any): any {
|
||
// 保存原始坐标，用于 Shift 按住时强制更新预览
|
||
lastRawSketchCoords = coords.map(c => [c[0], c[1]]);
|
||
if (coords.length < 2) {
|
||
const p = coords[0];
|
||
const pts = 64;
|
||
const ring: number[][] = [];
|
||
for (let i = 0; i <= pts; i++) {
|
||
const a = (i / pts) * 2 * Math.PI;
|
||
ring.push([p[0], p[1]]);
|
||
}
|
||
if (geom) {
|
||
geom.setCoordinates([ring]);
|
||
return geom;
|
||
}
|
||
return new Polygon([ring]);
|
||
}
|
||
|
||
// 左上角 (x1,y1) → 右下角 (x2,y2)
|
||
const x1 = coords[0][0],
|
||
y1 = coords[0][1];
|
||
const x2 = coords[1][0],
|
||
y2 = coords[1][1];
|
||
|
||
const cx = (x1 + x2) / 2;
|
||
const cy = (y1 + y2) / 2;
|
||
let rx = Math.abs(x2 - x1) / 2 || 1;
|
||
let ry = Math.abs(y2 - y1) / 2 || 1;
|
||
|
||
if (shiftHeld) {
|
||
const r = Math.max(rx, ry);
|
||
rx = r;
|
||
ry = r;
|
||
}
|
||
|
||
const pts = 64;
|
||
const ring: number[][] = [];
|
||
for (let i = 0; i <= pts; i++) {
|
||
const a = (i / pts) * 2 * Math.PI;
|
||
ring.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
|
||
}
|
||
|
||
if (geom) {
|
||
geom.setCoordinates([ring]);
|
||
return geom;
|
||
}
|
||
return new Polygon([ring]);
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 矩形/正方形 geometryFunction
|
||
* 第一点为左上角，第二点为右下角
|
||
* 默认矩形，按住 shift 为正方形
|
||
*/
|
||
function createRectGeometryFunction(): (
|
||
coords: number[][],
|
||
geom?: any
|
||
) => any {
|
||
return function (coords: number[][], geom?: any): any {
|
||
// 保存原始坐标，用于 Shift 按住时强制更新预览
|
||
lastRawSketchCoords = coords.map(c => [c[0], c[1]]);
|
||
if (coords.length < 2) {
|
||
const p = coords[0];
|
||
const ring: number[][] = [
|
||
[p[0], p[1]],
|
||
[p[0], p[1]],
|
||
[p[0], p[1]],
|
||
[p[0], p[1]],
|
||
[p[0], p[1]]
|
||
];
|
||
if (geom) {
|
||
geom.setCoordinates([ring]);
|
||
return geom;
|
||
}
|
||
return new Polygon([ring]);
|
||
}
|
||
|
||
// 左上角 (x1,y1) → 右下角 (x2,y2)
|
||
const x1 = coords[0][0],
|
||
y1 = coords[0][1];
|
||
let x2 = coords[1][0],
|
||
y2 = coords[1][1];
|
||
|
||
if (shiftHeld) {
|
||
const w = Math.abs(x2 - x1);
|
||
const h = Math.abs(y2 - y1);
|
||
const max = Math.max(w, h);
|
||
if (w > h) {
|
||
y2 = y1 + (y2 >= y1 ? 1 : -1) * max;
|
||
} else {
|
||
x2 = x1 + (x2 >= x1 ? 1 : -1) * max;
|
||
}
|
||
}
|
||
|
||
const ring: number[][] = [
|
||
[Math.min(x1, x2), Math.min(y1, y2)],
|
||
[Math.min(x1, x2), Math.max(y1, y2)],
|
||
[Math.max(x1, x2), Math.max(y1, y2)],
|
||
[Math.max(x1, x2), Math.min(y1, y2)],
|
||
[Math.min(x1, x2), Math.min(y1, y2)]
|
||
];
|
||
|
||
if (geom) {
|
||
geom.setCoordinates([ring]);
|
||
return geom;
|
||
}
|
||
return new Polygon([ring]);
|
||
};
|
||
}
|
||
|
||
function createShiftConstrainedGeometryFunction(): (
|
||
coords: number[][],
|
||
geom?: any
|
||
) => any {
|
||
return function (coords: number[][], geom?: any): any {
|
||
if (!geom) {
|
||
geom = new LineString(coords);
|
||
} else {
|
||
geom.setCoordinates(coords);
|
||
}
|
||
|
||
if (shiftHeld && coords.length >= 2) {
|
||
const c = geom.getCoordinates();
|
||
const last = c[c.length - 1];
|
||
const prev = c[c.length - 2];
|
||
const dx = Math.abs(last[0] - prev[0]);
|
||
const dy = Math.abs(last[1] - prev[1]);
|
||
|
||
if (dx > dy) {
|
||
last[1] = prev[1]; // 水平约束
|
||
} else {
|
||
last[0] = prev[0]; // 垂直约束
|
||
}
|
||
geom.setCoordinates(c);
|
||
}
|
||
|
||
return geom;
|
||
};
|
||
}
|
||
|
||
function syncDrawInteraction() {
|
||
const map = mapInstance.value;
|
||
if (!map) return;
|
||
|
||
// 暴力扫描移除所有 Draw 交互
|
||
const interactions = map.getInteractions().getArray();
|
||
for (let i = interactions.length - 1; i >= 0; i--) {
|
||
if (interactions[i] instanceof Draw) {
|
||
map.removeInteraction(interactions[i]);
|
||
}
|
||
}
|
||
currentDrawInteraction = null;
|
||
|
||
// 恢复默认光标
|
||
map.getViewport().style.cursor = '';
|
||
|
||
// 没有激活的工具 → 结束
|
||
if (!drawToolActive.value) return;
|
||
|
||
// 十字光标
|
||
map.getViewport().style.cursor = 'crosshair';
|
||
|
||
const tool = drawToolActive.value;
|
||
let drawType: string;
|
||
let geometryFunction: any | undefined;
|
||
currentGeometryFunction = null; // 重置，仅 rect/circle 会赋值
|
||
switch (tool) {
|
||
case 'point':
|
||
drawType = 'Point';
|
||
break;
|
||
case 'line':
|
||
drawType = 'LineString';
|
||
geometryFunction = createShiftConstrainedGeometryFunction();
|
||
break;
|
||
case 'polygon':
|
||
drawType = 'Polygon';
|
||
break;
|
||
case 'rect':
|
||
drawType = 'LineString';
|
||
geometryFunction = createRectGeometryFunction();
|
||
currentGeometryFunction = geometryFunction;
|
||
break;
|
||
case 'circle':
|
||
drawType = 'LineString';
|
||
geometryFunction = createEllipseGeometryFunction();
|
||
currentGeometryFunction = geometryFunction;
|
||
break;
|
||
case 'freehand':
|
||
drawType = 'LineString';
|
||
break;
|
||
case 'text':
|
||
drawType = 'Point';
|
||
break;
|
||
default:
|
||
return;
|
||
}
|
||
|
||
currentDrawInteraction = new Draw({
|
||
source: drawSource,
|
||
type: drawType as any,
|
||
geometryFunction,
|
||
maxPoints: tool === 'rect' || tool === 'circle' ? 2 : undefined,
|
||
freehand: tool === 'freehand',
|
||
freehandCondition: () => false,
|
||
condition: () => true,
|
||
style: createDrawPreviewStyle()
|
||
});
|
||
|
||
currentDrawInteraction.on('drawstart', (evt: DrawEvent) => {
|
||
sketchFeature = evt.feature;
|
||
lastRawSketchCoords = null;
|
||
});
|
||
currentDrawInteraction.on('drawend', () => {
|
||
sketchFeature = null;
|
||
lastRawSketchCoords = null;
|
||
currentGeometryFunction = null;
|
||
});
|
||
|
||
currentDrawInteraction.on('drawend', (evt: DrawEvent) => {
|
||
const feature = evt.feature;
|
||
feature.set(DRAW_FEATURE_ID_KEY, nextDrawId());
|
||
feature.set(DRAW_FEATURE_TYPE_KEY, tool);
|
||
// 如果是文字工具，弹出 ant-design-vue Modal 输入框
|
||
if (tool === 'text') {
|
||
feature.set(DS_FEATURE_KEY, {
|
||
strokeColor: drawStyle.value.strokeColor,
|
||
strokeWidth: drawStyle.value.strokeWidth,
|
||
fillColor: drawStyle.value.fillColor,
|
||
pointColor: drawStyle.value.pointColor,
|
||
pointRadius: drawStyle.value.pointRadius,
|
||
lineType: drawStyle.value.lineType,
|
||
showArrow: drawStyle.value.showArrow,
|
||
arrowPosition: drawStyle.value.arrowPosition,
|
||
arrowSize: drawStyle.value.arrowSize,
|
||
fontSize: drawStyle.value.fontSize,
|
||
fontFamily: drawStyle.value.fontFamily,
|
||
textColor: drawStyle.value.textColor,
|
||
textStrokeColor: drawStyle.value.textStrokeColor,
|
||
textStrokeWidth: drawStyle.value.textStrokeWidth,
|
||
fontBold: drawStyle.value.fontBold
|
||
});
|
||
// 先抑制 watcher（suppressUntil），避免 updateSelectedDrawInfo 触发的 checkpoint（问题5修复）
|
||
beginDrawBatch();
|
||
updateSelectedDrawInfo(feature);
|
||
activeTab.value = 'draw';
|
||
|
||
let tempText = '';
|
||
Modal.confirm({
|
||
title: '输入文字内容',
|
||
content: () =>
|
||
h(Input, {
|
||
placeholder: '请输入文字内容',
|
||
onInput: (e: any) => {
|
||
tempText = e.target?.value ?? '';
|
||
}
|
||
}),
|
||
onOk: () => {
|
||
if (tempText && tempText.trim()) {
|
||
feature.set(DRAW_FEATURE_TEXT_KEY, tempText.trim());
|
||
} else {
|
||
drawSource.removeFeature(feature);
|
||
selectedDrawInfo.value = null;
|
||
selectedFeatureId = null;
|
||
}
|
||
// 文字确认后手动创建撤回步骤（addfeature 阶段已跳过），捕获带文字内容的状态
|
||
onDrawChange();
|
||
// 同步样式不应产生额外撤回步骤（onDrawChange 已记录完整的文字+样式状态）
|
||
skipStyleCp = true;
|
||
setTimeout(() => {
|
||
skipStyleCp = false;
|
||
}, 0);
|
||
syncPerStyleToSelected(feature);
|
||
refreshLayerStyle();
|
||
},
|
||
onCancel: () => {
|
||
drawSource.removeFeature(feature);
|
||
selectedDrawInfo.value = null;
|
||
selectedFeatureId = null;
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
// 存储当前默认样式到新绘制的 feature
|
||
feature.set(DS_FEATURE_KEY, {
|
||
strokeColor: drawStyle.value.strokeColor,
|
||
strokeWidth: drawStyle.value.strokeWidth,
|
||
fillColor: drawStyle.value.fillColor,
|
||
pointColor: drawStyle.value.pointColor,
|
||
pointRadius: drawStyle.value.pointRadius,
|
||
lineType: drawStyle.value.lineType,
|
||
showArrow: drawStyle.value.showArrow,
|
||
arrowPosition: drawStyle.value.arrowPosition,
|
||
arrowSize: drawStyle.value.arrowSize,
|
||
fontSize: drawStyle.value.fontSize,
|
||
fontFamily: drawStyle.value.fontFamily,
|
||
textColor: drawStyle.value.textColor,
|
||
textStrokeColor: drawStyle.value.textStrokeColor,
|
||
textStrokeWidth: drawStyle.value.textStrokeWidth,
|
||
fontBold: drawStyle.value.fontBold
|
||
});
|
||
beginDrawBatch();
|
||
updateSelectedDrawInfo(feature);
|
||
activeTab.value = 'draw';
|
||
// ⚠ 不再在此处调用 onDrawChange()：
|
||
// OL 在 drawend 时尚未将图形添加到 source，checkpoint 会捕获添加前的状态。
|
||
// 改为由 addfeature 监听器（已在 setup 中注册）在 OL 添加图形后自动触发。
|
||
});
|
||
|
||
map.addInteraction(currentDrawInteraction);
|
||
}
|
||
|
||
// ── 监听工具切换 ──
|
||
const stopToolWatch = watch(drawToolActive, () => {
|
||
syncDrawInteraction();
|
||
|
||
// 绘制工具激活时禁用 Select/Modify/Translate，防止与绘制交互冲突
|
||
const isDrawing = drawToolActive.value !== null;
|
||
for (const interaction of persistentInteractions) {
|
||
interaction.setActive(!isDrawing);
|
||
}
|
||
});
|
||
|
||
// ── 监听地图注入，添加图层 + 设置永久交互 ──
|
||
const stopLayerWatch = watch(
|
||
mapInstance,
|
||
map => {
|
||
if (!map) return;
|
||
const layers = map.getLayers();
|
||
if (!layers.getArray().includes(drawLayer)) {
|
||
layers.push(drawLayer);
|
||
}
|
||
setupPersistentInteractions();
|
||
syncDrawInteraction();
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
// ── Shift 键监听 ──
|
||
/** 当 Shift 状态变化时，强制更新预览几何（让矩形/圆形立即受约束） */
|
||
function updateDrawPreviewGeometry() {
|
||
if (
|
||
!sketchFeature ||
|
||
!currentGeometryFunction ||
|
||
!lastRawSketchCoords ||
|
||
lastRawSketchCoords.length < 2
|
||
)
|
||
return;
|
||
const existingGeom = sketchFeature.getGeometry();
|
||
const newGeom = currentGeometryFunction(lastRawSketchCoords, existingGeom);
|
||
if (newGeom && newGeom !== existingGeom) {
|
||
sketchFeature.setGeometry(newGeom);
|
||
}
|
||
}
|
||
function onShiftDown(e: KeyboardEvent) {
|
||
if (e.key === 'Shift') {
|
||
shiftHeld = true;
|
||
updateDrawPreviewGeometry();
|
||
}
|
||
}
|
||
function onShiftUp(e: KeyboardEvent) {
|
||
if (e.key === 'Shift') {
|
||
shiftHeld = false;
|
||
updateDrawPreviewGeometry();
|
||
}
|
||
}
|
||
document.addEventListener('keydown', onShiftDown);
|
||
document.addEventListener('keyup', onShiftUp);
|
||
|
||
// ── 键盘 Delete 键删除选中图形 ──
|
||
function onKeyDown(e: KeyboardEvent) {
|
||
if (e.key !== 'Delete' && e.key !== 'Backspace') return;
|
||
if (
|
||
e.target instanceof HTMLInputElement ||
|
||
e.target instanceof HTMLTextAreaElement
|
||
) {
|
||
return;
|
||
}
|
||
if (selectedFeatureId) deleteSelectedDraw();
|
||
}
|
||
document.addEventListener('keydown', onKeyDown);
|
||
|
||
// ── 清理 ──
|
||
function dispose() {
|
||
stopLayerWatch();
|
||
stopStyleWatch();
|
||
stopToolWatch();
|
||
stopPerStyleWatch();
|
||
if (styleCpTimer !== null) {
|
||
clearTimeout(styleCpTimer);
|
||
styleCpTimer = null;
|
||
}
|
||
document.removeEventListener('keydown', onKeyDown);
|
||
document.removeEventListener('keydown', onShiftDown);
|
||
document.removeEventListener('keyup', onShiftUp);
|
||
|
||
const map = mapInstance.value;
|
||
if (!map) return;
|
||
|
||
const interactions = map.getInteractions().getArray();
|
||
for (let i = interactions.length - 1; i >= 0; i--) {
|
||
if (interactions[i] instanceof Draw) {
|
||
map.removeInteraction(interactions[i]);
|
||
}
|
||
}
|
||
currentDrawInteraction = null;
|
||
|
||
for (const interaction of persistentInteractions) {
|
||
map.removeInteraction(interaction);
|
||
}
|
||
persistentInteractions.length = 0;
|
||
|
||
map.removeLayer(drawLayer);
|
||
}
|
||
|
||
onUnmounted(() => dispose());
|
||
|
||
// ── 从序列化数据创建几何体 ──
|
||
function createGeometry(
|
||
type: string,
|
||
coords: any,
|
||
radius?: number
|
||
): import('ol/geom/Geometry') | null {
|
||
try {
|
||
switch (type) {
|
||
case 'Point':
|
||
return new Point(fromLonLat(coords));
|
||
case 'LineString':
|
||
return new LineString(coords.map((p: number[]) => fromLonLat(p)));
|
||
case 'Polygon':
|
||
return new Polygon([coords.map((p: number[]) => fromLonLat(p))]);
|
||
case 'Circle': {
|
||
const center = fromLonLat(coords);
|
||
const circle = new Circle(center, radius || 1000);
|
||
return circle;
|
||
}
|
||
default:
|
||
return null;
|
||
}
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// ── 清空所有绘制图形（恢复时使用） ──
|
||
function clearAllDrawings() {
|
||
drawSource.clear();
|
||
}
|
||
|
||
// ── 从保存的数据恢复绘制图形（编辑时使用） ──
|
||
function restoreDrawingsFromSave(features: any[], globalStyle: any) {
|
||
// 确保绘制图层已添加到地图
|
||
if (mapInstance.value) {
|
||
const layers = mapInstance.value.getLayers();
|
||
if (!layers.getArray().includes(drawLayer)) {
|
||
layers.push(drawLayer);
|
||
}
|
||
}
|
||
|
||
for (const item of features) {
|
||
const geom = createGeometry(item.type, item.coordinates, item.radius);
|
||
if (!geom) continue;
|
||
|
||
const feature = new Feature({ geometry: geom });
|
||
feature.set(DRAW_FEATURE_ID_KEY, item.id || nextDrawId());
|
||
feature.set(DRAW_FEATURE_TYPE_KEY, item.drawTypeKey || '');
|
||
feature.set(DRAW_FEATURE_TEXT_KEY, item.text || '');
|
||
if (item.style && Object.keys(item.style).length > 0) {
|
||
feature.set(DS_FEATURE_KEY, { ...item.style });
|
||
}
|
||
drawSource.addFeature(feature);
|
||
}
|
||
}
|
||
|
||
// ── 序列化所有绘制图形（用于保存） ──
|
||
function getSerializedFeatures(): any[] {
|
||
return drawSource.getFeatures().map(f => {
|
||
const geom = f.getGeometry();
|
||
const geomType = geom?.getType();
|
||
let coords: any;
|
||
let radius = 0;
|
||
|
||
if (geomType === 'Point') {
|
||
coords = toLonLat((geom as Point).getCoordinates());
|
||
} else if (geomType === 'LineString') {
|
||
coords = (geom as LineString).getCoordinates().map(p => toLonLat(p));
|
||
} else if (geomType === 'Polygon') {
|
||
coords = (geom as Polygon).getCoordinates()[0].map(p => toLonLat(p));
|
||
} else if (geomType === 'Circle') {
|
||
const circle = geom as Circle;
|
||
coords = toLonLat(circle.getCenter());
|
||
radius = circle.getRadius();
|
||
}
|
||
|
||
const perStyle = f.get(DS_FEATURE_KEY) || {};
|
||
return {
|
||
id: f.get(DRAW_FEATURE_ID_KEY),
|
||
type: geomType,
|
||
drawTypeKey: f.get(DRAW_FEATURE_TYPE_KEY) || '',
|
||
text: f.get(DRAW_FEATURE_TEXT_KEY) || '',
|
||
coordinates: coords,
|
||
radius,
|
||
style: { ...perStyle }
|
||
};
|
||
});
|
||
}
|
||
|
||
// 填充模块级 action 引用
|
||
drawActions.deleteSelectedDraw = deleteSelectedDraw;
|
||
drawActions.updateSelectedTextContent = updateSelectedTextContent;
|
||
drawActions.getSerializedFeatures = getSerializedFeatures;
|
||
drawActions.clearAllDrawings = clearAllDrawings;
|
||
drawActions.restoreDrawingsFromSave = restoreDrawingsFromSave;
|
||
|
||
return {
|
||
drawLayer,
|
||
drawSource,
|
||
deleteSelectedDraw,
|
||
getSelectedFeature,
|
||
saveSelectedDrawStyleToFeature,
|
||
updateSelectedTextContent,
|
||
dispose
|
||
};
|
||
}
|