web技术学习

切换模式

本文总阅读量 次

百度地图，高德地图，腾讯地图，天地图等坐标互转 ​

名称别名标准应用场合
WSG84地球坐标国际标准国际地图，谷歌地图
GCJ02火星坐标，国测局坐标中国标准高德、谷歌（国内）、腾讯、阿里云
BD09百度坐标百度标准百度地图
CGC2000天地图坐标天地图标准天地图

安装 ​

sh
npm i @tomiaa/coordinate-transform

示例 ​

ts
import {
  mercator2WSG84,
  WSG842Mercator,
  baiduMercator2BD09,
  BD092BaiduMercator,
} from "@tomiaa/coordinate-transform"
mercator2WSG84([12579102.459639914, 3248973.789650975]) // 墨卡托 ==> 地球坐标
WSG842Mercator([113, 28]) // 地球坐标 ==> 墨卡托
baiduMercator2BD09([12579102.459639914, 3248973.789650975]) // 百度墨卡托（baiduMercator） ==> 百度坐标（BD:09）
BD092BaiduMercator([113, 28]) // 百度坐标（BD:09） ==> 百度墨卡托（baiduMercator）

Vue Demo ​

输入坐标

输出坐标

查看代码
vue
<template>
  <div>
    <el-select
      v-model="fun"
      filterable
      :class="w50"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="space">
      <div :class="w50">
        <p>输入坐标</p>
        <el-input
          v-model="coord[0]"
          placeholder="x"
          clearable
        />
        <el-input
          v-model="coord[1]"
          placeholder="y"
          clearable
        />
      </div>
      <div :class="w50">
        <p>输出坐标</p>
        <el-input
          v-model="rest[0]"
          placeholder="x"
          clearable
        />
        <el-input
          v-model="rest[1]"
          placeholder="y"
          clearable
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue"
import { computed, ref, watch } from "vue"
import * as coordinateTransform from "@tomiaa/coordinate-transform"
import { isMobile } from "@/utils"

const coord = ref([])
const rest = ref([])
const fun = ref("mercator2WSG84")
const options = [
  {
    label: "墨卡托坐标（EPSG:3857）=> 地球坐标（EPSG:4326）",
    value: "mercator2WSG84",
  },
  {
    label: "地球坐标（EPSG:4326）=> 墨卡托坐标（EPSG:3857）",
    value: "WSG842Mercator",
  },
  {
    label: "墨卡托坐标（EPSG:3857）=> 天地图（EPSG:4490）",
    value: "mercator2CGCS2000",
  },
  {
    label: "地球坐标（EPSG:4326）=> 天地图（EPSG:4490）",
    value: "WSG842CGCS2000",
  },
  {
    label: "天地图（EPSG:4490）=> 墨卡托坐标（EPSG:3857）",
    value: "CGCS20002Mercator",
  },
  {
    label: "天地图（EPSG:4490）=> 地球坐标（EPSG:4326）",
    value: "CGCS20002WSG84",
  },
  {
    label: "火星坐标（GCJ02）=> 地球坐标（EPSG:4326）",
    value: "GCJ022WSG84",
  },
  {
    label: "地球坐标（EPSG:4326）=> 火星坐标（GCJ02）",
    value: "WSG842GCJ02",
  },
  {
    label: "墨卡托坐标（EPSG:3857）=> 火星坐标（GCJ02）",
    value: "mercator2GCJ02",
  },
  {
    label: "火星坐标（GCJ02）=> 墨卡托坐标（EPSG:3857）",
    value: "GCJ022Mercator",
  },
  {
    label: "墨卡托坐标（EPSG:3857）=> 百度墨卡托（baiduMercator）",
    value: "mercator2BaiduMercator",
  },
  {
    label: "百度墨卡托（baiduMercator）=> 墨卡托坐标（EPSG:3857）",
    value: "baiduMercator2Mercator",
  },
  {
    label: "地球坐标（EPSG:4326）=> 百度墨卡托（baiduMercator）",
    value: "WSG842BaiduMercator",
  },
  {
    label: "百度墨卡托（baiduMercator）=> 地球坐标（EPSG:4326）",
    value: "baiduMercator2WSG84",
  },
  {
    label: "地球坐标 => 百度坐标（BD:09）",
    value: "WSG842BD09",
  },
  {
    label: "百度坐标（BD:09）=> 地球坐标",
    value: "BD092WSG84",
  },
  {
    label: "百度坐标（BD:09）=> 墨卡托坐标（EPSG:3857）",
    value: "BD092Mercator",
  },
  {
    label: "百度坐标（BD:09）=> 墨卡托坐标（EPSG:3857）",
    value: "mercator2BD09",
  },
  {
    label: "百度墨卡托（baiduMercator）=> 百度坐标（BD:09）",
    value: "baiduMercator2BD09",
  },
  {
    label: "百度坐标（BD:09）=> 百度墨卡托（baiduMercator）",
    value: "BD092BaiduMercator",
  },
  {
    label: "百度坐标（BD:09）=> 火星坐标（GCJ02）",
    value: "BD092GCJ02",
  },
  {
    label: "火星坐标（GCJ02）=> 百度坐标（BD:09）",
    value: "GCJ022BD09",
  },
  {
    label: "百度坐标（BD:09）=> 天地图（EPSG:4490）",
    value: "BD092CGCS2000",
  },
  {
    label: "天地图（EPSG:4490）=> 百度坐标（BD:09）",
    value: "CGCS20002BD09",
  },
  {
    label: "火星坐标（GCJ02）=> 天地图（EPSG:4490）",
    value: "GCJ022CGC2000",
  },
  {
    label: "天地图（EPSG:4490）=> 火星坐标（GCJ02）",
    value: "CGCS20002GCJ02",
  },
  {
    label: "百度墨卡托 => 天地图（EPSG:4490）",
    value: "baiduMercator2CGC2000",
  },
  {
    label: "天地图（EPSG:4490）=> 百度墨卡托",
    value: "CGCS20002BaiduMercator",
  },
]
const w50 = computed(() => (!isMobile.value ? "w50" : "w100"))

watch(
  [coord,fun],
  () => {
    rest.value = (coordinateTransform as any)[fun.value]([+coord.value[0],+coord.value[1]])
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.w50 {
  width: 50%;
  padding: 1em;
}
.w100 {
  width: 100%;
}
.space {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.el-input {
  margin-bottom: 1em;
}
</style>

TypeScript ​

ts
export type Transform = (coods: number[]) => number[]
/**
 * 墨卡托坐标（EPSG:3857）转=> 地球坐标（EPSG:4326）
 */
export declare const mercator2WSG84: Transform
/**
 * 地球坐标（EPSG:4326）转=> 墨卡托坐标（EPSG:3857）
 */
export declare const WSG842Mercator: Transform
/**
 * 墨卡托坐标（EPSG:3857）=> 天地图（EPSG:4490）
 */
export declare const mercator2CGCS2000: Transform
/**
 * 地球坐标（EPSG:4326）=> 天地图（EPSG:4490）
 */
export declare const WSG842CGCS2000: Transform
/**
 * 天地图（EPSG:4490）=> 墨卡托坐标（EPSG:3857）
 */
export declare const CGCS20002Mercator: Transform
/**
 * 天地图（EPSG:4490）=> 地球坐标（EPSG:4326）
 */
export declare const CGCS20002WSG84: Transform
/**
 * 火星坐标（GCJ02）=> 地球坐标（EPSG:4326）
 */
export declare const GCJ022WSG84: Transform
/**
 * 地球坐标（EPSG:4326）=> 火星坐标（GCJ02）
 */
export declare const WSG842GCJ02: Transform
/**
 * 墨卡托坐标（EPSG:3857）=> 火星坐标（GCJ02）
 */
export declare const mercator2GCJ02: Transform
/**
 * 火星坐标（GCJ02）=> 墨卡托坐标（EPSG:3857）
 */
export declare const GCJ022Mercator: Transform
/**
 * 墨卡托坐标（EPSG:3857）=> 百度墨卡托（baiduMercator）
 */
export declare const mercator2BaiduMercator: Transform
/**
 * 百度墨卡托（baiduMercator）=> 墨卡托坐标（EPSG:3857）
 */
export declare const baiduMercator2Mercator: Transform
/**
 * 地球坐标（EPSG:4326）=> 百度墨卡托（baiduMercator）
 */
export declare const WSG842BaiduMercator: Transform
/**
 * 百度墨卡托（baiduMercator）=> 地球坐标（EPSG:4326）
 */
export declare const baiduMercator2WSG84: Transform
/**
 * 地球坐标 => 百度坐标（BD:09）
 */
export declare const WSG842BD09: Transform
/**
 * 百度坐标（BD:09）=> 地球坐标
 */
export declare const BD092WSG84: Transform
/**
 * 百度坐标（BD:09）=> 墨卡托坐标（EPSG:3857）
 */
export declare const BD092Mercator: Transform
/**
 * 百度坐标（BD:09）=> 墨卡托坐标（EPSG:3857）
 */
export declare const mercator2BD09: Transform
/**
 * 百度墨卡托（baiduMercator）=> 百度坐标（BD:09）
 */
export declare const baiduMercator2BD09: Transform
/**
 * 百度坐标（BD:09）=> 百度墨卡托（baiduMercator）
 */
export declare const BD092BaiduMercator: Transform
/**
 * 百度坐标（BD:09）=> 火星坐标（GCJ02）
 */
export declare const BD092GCJ02: Transform
/**
 * 火星坐标（GCJ02）=> 百度坐标（BD:09）
 */
export declare const GCJ022BD09: Transform
/**
 * 百度坐标（BD:09）=> 天地图（EPSG:4490）
 */
export declare const BD092CGCS2000: Transform
/**
 * 天地图（EPSG:4490）=> 百度坐标（BD:09）
 */
export declare const CGCS20002BD09: Transform
/**
 * 火星坐标（GCJ02）=> 天地图（EPSG:4490）
 */
export declare const GCJ022CGC2000: Transform
/**
 * 天地图（EPSG:4490）=> 火星坐标（GCJ02）
 */
export declare const CGCS20002GCJ02: Transform
/**
 * 百度墨卡托 => 天地图（EPSG:4490）
 */
export declare const baiduMercator2CGC2000: Transform
/**
 * 天地图（EPSG:4490）=> 百度墨卡托
 */
export declare const CGCS20002BaiduMercator: Transform

评论