import { reactive } from 'vue' import pin2d8cf0 from '/@/assets/icons/pin-2d8cf0.svg' import { MapDoodleType } from '/@/constants/map' import { getRoot } from '/@/root' import { MapDoodleEnum } from '/@/types/map-enum' import { EFlightAreaType } from '../types/flight-area' import { message } from 'ant-design-vue' import { ELocalStorageKey } from '../types' export function useMouseTool() { const root = getRoot() const userName = localStorage.getItem(ELocalStorageKey.Username) || '' const state = reactive({ serial: 1, currentType: '', }) const flightAreaColorMap = { [EFlightAreaType.DFENCE]: '#19be6b', [EFlightAreaType.NFZ]: '#ff0000', } function drawPin(type: MapDoodleType, getDrawCallback: Function) { root?.$mouseTool.marker({ title: userName + state.serial, icon: pin2d8cf0, }) state.serial++ root?.$mouseTool.on('draw', getDrawCallback) } function drawPolyline(type: MapDoodleType, getDrawCallback: Function) { root?.$mouseTool.polyline({ title: userName + state.serial, strokeColor: '#2d8cf0', strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', }) state.serial++ root?.$mouseTool.on('draw', getDrawCallback) } function drawPolygon(type: MapDoodleType, getDrawCallback: Function) { root?.$mouseTool.polygon({ title: userName + state.serial, strokeColor: '#2d8cf0', strokeOpacity: 1, strokeWeight: 2, fillColor: '#1791fc', fillOpacity: 0.4, }) state.serial++ root?.$mouseTool.on('draw', getDrawCallback) } function drawOff(type: MapDoodleType) { root?.$mouseTool.close() root?.$mouseTool.off('draw') } function drawFlightAreaPolygon(type: EFlightAreaType, getDrawFlightAreaCallback: Function) { root?.$mouseTool.polygon({ strokeColor: flightAreaColorMap[type], strokeOpacity: 1, strokeWeight: 4, extData: { type: type, mapType: 'polygon', }, strokeStyle: 'dashed', strokeDasharray: EFlightAreaType.NFZ === type ? [10, 2] : [10, 1, 2], fillColor: flightAreaColorMap[type], fillOpacity: EFlightAreaType.NFZ === type ? 0.3 : 0, }) root?.$mouseTool.on('draw', getDrawFlightAreaCallback) } function drawFlightAreaCircle(type: EFlightAreaType, getDrawFlightAreaCallback: Function) { root?.$mouseTool.circle({ strokeColor: flightAreaColorMap[type], strokeOpacity: 1, strokeWeight: 6, extData: { type: type, mapType: 'circle', }, strokeStyle: 'dashed', strokeDasharray: EFlightAreaType.NFZ === type ? [10, 2] : [10, 1, 2], fillColor: flightAreaColorMap[type], fillOpacity: EFlightAreaType.NFZ === type ? 0.3 : 0, }) root?.$mouseTool.on('draw', getDrawFlightAreaCallback) } function mouseTool(type: MapDoodleType, getDrawCallback: Function, flightAreaType?: EFlightAreaType) { state.currentType = type if (flightAreaType) { switch (type) { case MapDoodleEnum.POLYGON: drawFlightAreaPolygon(flightAreaType, getDrawCallback) return case MapDoodleEnum.CIRCLE: drawFlightAreaCircle(flightAreaType, getDrawCallback) return default: message.error(`Invalid type: ${flightAreaType}`) return } } switch (type) { case MapDoodleEnum.PIN: drawPin(type, getDrawCallback) break case MapDoodleEnum.POLYLINE: drawPolyline(type, getDrawCallback) break case MapDoodleEnum.POLYGON: drawPolygon(type, getDrawCallback) break case MapDoodleEnum.Close: drawOff(type) break } } return { mouseTool } }