| | |
| | | </div> |
| | | <div class="map-toolbar"> |
| | | <el-tooltip content="多边形" placement="left"> |
| | | <button class="tool-btn" type="button" @click="handleDraw('polygon')"> |
| | | <button class="tool-btn" :class="{ active: currentShapeType === 'polygon' }" type="button" |
| | | @click="handleDraw('polygon')"> |
| | | <img class="tool-icon-image" :src="polygonIcon" alt="多边形" /> |
| | | </button> |
| | | </el-tooltip> |
| | | <el-tooltip content="矩形" placement="left"> |
| | | <button class="tool-btn" type="button" @click="handleDraw('rectangle')"> |
| | | <button class="tool-btn" :class="{ active: currentShapeType === 'rectangle' }" type="button" |
| | | @click="handleDraw('rectangle')"> |
| | | <img class="tool-icon-image" :src="rectIcon" alt="矩形" /> |
| | | </button> |
| | | </el-tooltip> |
| | | <el-tooltip content="椭圆" placement="left"> |
| | | <button class="tool-btn" type="button" @click="handleDraw('ellipse')"> |
| | | <button class="tool-btn" :class="{ active: currentShapeType === 'ellipse' }" type="button" |
| | | @click="handleDraw('ellipse')"> |
| | | <img class="tool-icon-image" :src="ellipseIcon" alt="椭圆" /> |
| | | </button> |
| | | </el-tooltip> |
| | | <el-tooltip content="缓冲圆" placement="left"> |
| | | <button class="tool-btn" type="button" @click="handleDraw('buffer')"> |
| | | <button class="tool-btn" :class="{ active: currentShapeType === 'buffer' }" type="button" |
| | | @click="handleDraw('buffer')"> |
| | | <img class="tool-icon-image" :src="bufferIcon" alt="缓冲圆" /> |
| | | </button> |
| | | </el-tooltip> |
| | |
| | | } |
| | | |
| | | // 绘制完成回调 |
| | | const drawFinished = async data => { |
| | | const drawFinished = async (data, options = {}) => { |
| | | const shouldContinueDraw = options?.continueDraw || activeToolMode.value === 'draw' |
| | | const positions = Array.isArray(data?.positions) ? data.positions : data |
| | | if (!Array.isArray(positions) || positions.length < 3) { |
| | | pointList = [] |
| | |
| | | shapeList.value.splice(targetIndex, 1, shapePayload) |
| | | } |
| | | renderShapeList() |
| | | if (shouldContinueDraw && !readonly.value) { |
| | | activeShapeId.value = null |
| | | pointList = [] |
| | | clearActiveTool() |
| | | startDraw(currentShapeType.value || 'polygon') |
| | | } |
| | | } |
| | | |
| | | function getDetectAreaTypeKey () { |
| | |
| | | const positions = activeTool?.getPositions?.() |
| | | if (Array.isArray(positions) && positions.length >= 3) { |
| | | suppressTypePanelOnce.value = true |
| | | drawFinished(positions) |
| | | drawFinished(positions, { continueDraw: true }) |
| | | return |
| | | } |
| | | if (positions?.positions?.length >= 3) { |
| | | suppressTypePanelOnce.value = true |
| | | drawFinished(positions) |
| | | drawFinished(positions, { continueDraw: true }) |
| | | return |
| | | } |
| | | clearActiveTool() |
| | | } |
| | |
| | | |
| | | function handleClearShape () { |
| | | if (readonly.value) return |
| | | clearActiveTool() |
| | | viewEntity && viewer?.entities?.remove(viewEntity) |
| | | viewEntity = null |
| | | pointList = [] |
| | | shapeList.value = [] |
| | | activeShapeId.value = null |
| | | activeAreaType.value = '' |
| | | hideTypePanel() |
| | | clearShapeDisplay() |
| | | clearActiveTool() |
| | | if (viewer && currentShapeType.value) { |
| | | startDraw(currentShapeType.value) |
| | | } |
| | | } |
| | | |
| | | function handleShapeEdit (row) { |
| | |
| | | clearActiveTool() |
| | | if (dialogMode.value === 'add') { |
| | | mapRef.value?.zoomToAdminBoundary?.() |
| | | // default no draw mode |
| | | handleDraw('polygon') |
| | | } else if (dialogMode.value === 'edit') { |
| | | await loadDetail() |
| | | viewPolygon() |
| | | activeShapeId.value = null |
| | | pointList = [] |
| | | currentShapeType.value = 'polygon' |
| | | const defaultAreaType = getDetectAreaTypeKey() |
| | | if (defaultAreaType) { |
| | | activeAreaType.value = defaultAreaType |
| | | } |
| | | clearActiveTool() |
| | | startDraw('polygon') |
| | | } else { |
| | | await loadDetail() |
| | | viewPolygon() |
| | |
| | | transform: translateY(-1px); |
| | | } |
| | | |
| | | .tool-btn.active { |
| | | border-color: rgba(40, 79, 227, 0.9); |
| | | box-shadow: 0 0 0 1px rgba(40, 79, 227, 0.45), 0 6px 14px rgba(40, 79, 227, 0.35); |
| | | background: rgba(40, 79, 227, 0.18); |
| | | } |
| | | |
| | | .tool-btn:active { |
| | | transform: translateY(0); |
| | | } |