投影

坐标系转换

点我查看代码

<script lang="ts" setup>
import { mercatorToWgs84, wgs84ToMercator } from '@summeruse/ol'
import { NFormItem, NInputNumber } from 'naive-ui'
import { computed, ref } from 'vue'

const coord = ref([116.404, 39.915])

const mercator = computed(() => wgs84ToMercator(coord.value))

const mercator2 = ref([12959638.8957, 4855982.5492])
const coord2 = computed(() => mercatorToWgs84(mercator2.value))
</script>

<template>
  <NFormItem label="WGS84坐标转墨卡托">
    <NInputNumber v-model:value="coord[0]" :step="0.1" /> 经度
    <NInputNumber v-model:value="coord[1]" :step="0.1" /> 纬度
  </NFormItem>
  <NFormItem label="=">
    <span> {{ mercator[0] }} , {{ mercator[1] }} </span>
  </NFormItem>
  <NFormItem label="墨卡托转WGS84">
    <NInputNumber v-model:value="mercator2[0]" :step="0.1" /> x
    <NInputNumber v-model:value="mercator2[1]" :step="0.1" /> y
  </NFormItem>
  <NFormItem label="=">
    <span> {{ coord2[0] }} , {{ coord2[1] }} </span>
  </NFormItem>
</template>

源代码

点我查看代码

import type { Coordinate } from 'ol/coordinate'
import type { Extent } from 'ol/extent'
import { transform, transformExtent } from 'ol/proj'
import { EPSG_3857, EPSG_4326 } from '../../constants'

/** WGS84坐标转墨卡托  */
export function wgs84ToMercator(coordinate: Coordinate) {
  return transform(coordinate, EPSG_4326, EPSG_3857)
}
/** WGS84坐标转墨卡托  */
export const EPSG_4326ToEPSG_3857 = wgs84ToMercator

/** 墨卡托坐标转WGS84 */
export function mercatorToWgs84(coordinate: Coordinate) {
  return transform(coordinate, EPSG_3857, EPSG_4326)
}
/** 墨卡托坐标转WGS84 */
export const EPSG_3857ToEPSG_4326 = mercatorToWgs84

/** WGS84范围转墨卡托 */
export function wgs84ExtentToMercator(extent: Extent) {
  return transformExtent(extent, EPSG_4326, EPSG_3857)
}
/** WGS84范围转墨卡托 */
export const EPSG_4326ExtentToEPSG_3857 = wgs84ExtentToMercator

/** 墨卡托范围转WGS84 */
export function mercatorExtentToWgs84(extent: Extent) {
  return transformExtent(extent, EPSG_3857, EPSG_4326)
}

/** 墨卡托范围转WGS84 */
export const EPSG_3857ExtentToEPSG_4326 = mercatorExtentToWgs84