107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
// src/composables/useCoordinatePicker.ts
|
|
import { ref, reactive } from 'vue';
|
|
import type { CoordinatePicker, PickResult } from './CoordinatePicker';
|
|
|
|
export function useCoordinatePicker(coordinatePicker: CoordinatePicker | null) {
|
|
const isPickerEnabled = ref(false);
|
|
const pickHistory = reactive<PickResult[]>([]);
|
|
const lastPickResult = ref<PickResult | null>(null);
|
|
const maxHistoryLength = 10;
|
|
|
|
// 启用坐标拾取
|
|
const enablePicker = (): void => {
|
|
if (coordinatePicker.value) {
|
|
coordinatePicker.value.enable();
|
|
isPickerEnabled.value = true;
|
|
|
|
// 添加拾取回调
|
|
coordinatePicker.value.onPick(handlePick);
|
|
}
|
|
};
|
|
|
|
// 禁用坐标拾取
|
|
const disablePicker = (): void => {
|
|
if (coordinatePicker.value) {
|
|
coordinatePicker.value.disable();
|
|
isPickerEnabled.value = false;
|
|
}
|
|
};
|
|
|
|
// 切换拾取状态
|
|
const togglePicker = (): void => {
|
|
if (isPickerEnabled.value) {
|
|
disablePicker();
|
|
} else {
|
|
enablePicker();
|
|
}
|
|
};
|
|
|
|
// 处理拾取结果
|
|
const handlePick = (result: PickResult): void => {
|
|
lastPickResult.value = result;
|
|
|
|
// 添加到历史记录
|
|
pickHistory.unshift(result);
|
|
|
|
// 限制历史记录长度
|
|
if (pickHistory.length > maxHistoryLength) {
|
|
pickHistory.pop();
|
|
}
|
|
};
|
|
|
|
// 清除历史记录
|
|
const clearHistory = (): void => {
|
|
pickHistory.splice(0, pickHistory.length);
|
|
lastPickResult.value = null;
|
|
};
|
|
|
|
// 复制坐标到剪贴板
|
|
const copyToClipboard = (result: PickResult): void => {
|
|
const text = `经度: ${result.longitude.toFixed(6)}, 纬度: ${result.latitude.toFixed(6)}, 高程: ${result.height.toFixed(2)}米`;
|
|
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
console.log('坐标已复制到剪贴板:', text);
|
|
}).catch(err => {
|
|
console.error('复制失败:', err);
|
|
});
|
|
};
|
|
|
|
// 格式化坐标显示
|
|
const formatCoordinate = (result: PickResult): string => {
|
|
return `经度: ${result.longitude.toFixed(6)}\n纬度: ${result.latitude.toFixed(6)}\n高程: ${result.height.toFixed(2)}米`;
|
|
};
|
|
|
|
// 获取WKT格式坐标
|
|
const getWKT = (result: PickResult): string => {
|
|
return `POINT(${result.longitude.toFixed(6)} ${result.latitude.toFixed(6)})`;
|
|
};
|
|
|
|
// 获取GeoJSON格式坐标
|
|
const getGeoJSON = (result: PickResult): any => {
|
|
return {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [result.longitude, result.latitude, result.height]
|
|
},
|
|
properties: {
|
|
height: result.height,
|
|
terrainHeight: result.terrainHeight
|
|
}
|
|
};
|
|
};
|
|
|
|
return {
|
|
isPickerEnabled,
|
|
pickHistory,
|
|
lastPickResult,
|
|
enablePicker,
|
|
disablePicker,
|
|
togglePicker,
|
|
clearHistory,
|
|
copyToClipboard,
|
|
formatCoordinate,
|
|
getWKT,
|
|
getGeoJSON
|
|
};
|
|
} |