距离单位

公里/海里转换

点我查看代码

<script lang="ts" setup>
import { angleToRotation, formatAngle, formatRotation, kmToNauticalMiles, nauticalMilesToKm, rotationToAngle } from '@summeruse/ol'
import { NFormItem, NInputNumber } from 'naive-ui'
import { computed, ref } from 'vue'

// 公里 ↔ 海里
const km = ref(10)
const nauticalMiles = computed(() => kmToNauticalMiles(km.value).toFixed(2))

const nauticalMiles2 = ref(5.4)
const km2 = computed(() => nauticalMilesToKm(nauticalMiles2.value).toFixed(2))

// 弧度 ↔ 角度
const rotation = ref(Math.PI)
const angle = computed(() => rotationToAngle(rotation.value).toFixed(1))

const angle2 = ref(180)
const rotation2 = computed(() => angleToRotation(angle2.value).toFixed(4))

// 格式化
const rawRotation = ref(-0.5)
const formattedRotation = computed(() => formatRotation(rawRotation.value).toFixed(4))

const rawAngle = ref(400)
const formattedAngle = computed(() => formatAngle(rawAngle.value))
</script>

<template>
  <NFormItem label="公里转海里">
    <NInputNumber v-model:value="km" :min="0" /> 公里
    <span> = {{ nauticalMiles }} 海里 </span>
  </NFormItem>
  <NFormItem label="海里转公里">
    <NInputNumber v-model:value="nauticalMiles2" :min="0" /> 海里
    <span> = {{ km2 }} 公里 </span>
  </NFormItem>
  <NFormItem label="弧度转角度">
    <NInputNumber v-model:value="rotation" :step="0.1" /> 弧度
    <span> = {{ angle }}° </span>
  </NFormItem>
  <NFormItem label="角度转弧度">
    <NInputNumber v-model:value="angle2" /> 度
    <span> = {{ rotation2 }} 弧度 </span>
  </NFormItem>
  <NFormItem label="格式化弧度">
    <NInputNumber v-model:value="rawRotation" :step="0.1" /> 原始弧度
    <span> → {{ formattedRotation }}（[0, 2π)）</span>
  </NFormItem>
  <NFormItem label="格式化角度">
    <NInputNumber v-model:value="rawAngle" /> 原始角度
    <span> → {{ formattedAngle }}°（[0, 360)）</span>
  </NFormItem>
</template>

API

单位转换

名称	类型	说明
kmToNauticalMiles	(km: number) => number	公里转海里
nauticalMilesToKm	(nauticalMiles: number) => number	海里转公里

角度/弧度转换

名称	类型	说明
rotationToAngle	(rotation: number) => number	弧度转角度
angleToRotation	(angle: number) => number	角度转弧度
formatRotation	(rotation: number) => number	格式化弧度到 [0, 2π) 范围
formatAngle	(angle: number) => number	格式化角度到 [0, 360) 范围

源代码

点我查看代码

import { ONE_NM } from '../../constants'

/** 公里转海里 */
export function kmToNauticalMiles(km: number) {
  return (km * 1000) / ONE_NM
}

/** 海里转公里 */
export function nauticalMilesToKm(nauticalMiles: number) {
  return (nauticalMiles * ONE_NM) / 1000
}

/** 弧度转角度 */
export function rotationToAngle(rotation: number): number {
  return formatRotation(rotation) * 180 / Math.PI
}

/** 角度转弧度 */
export function angleToRotation(angle: number): number {
  return formatAngle(angle) * Math.PI / 180
}

/** 格式化Rotation */
export function formatRotation(rotation: number): number {
  if (rotation < 0) {
    return formatRotation(rotation + 2 * Math.PI)
  }
  if (rotation > 2 * Math.PI) {
    return formatRotation(rotation - 2 * Math.PI)
  }
  return rotation
}

/** 格式化角度 */
export function formatAngle(angle: number): number {
  if (angle < 0) {
    return formatAngle(angle + 360)
  }
  if (angle >= 360) {
    return formatAngle(angle - 360)
  }
  return angle
}