三种坐标系经纬度转化小工具

最新推荐文章于 2024-09-06 22:45:39 发布

竹子js

最新推荐文章于 2024-09-06 22:45:39 发布

阅读量3.4k

点赞数 2

分类专栏： vue 地图文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/bamboozjy/article/details/122129876

版权

vue 同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

地图

2 篇文章 0 订阅

订阅专栏

国际定位标准: WGS84 公用转化的坐标系,一般保存在后端数据库
火星坐标系: GCJ-02 国测局标准,中国使用,在国际定位标准上加密生成的. 高德地图,腾讯地图以及谷歌中国区地图使用该坐标系
百度坐标系: BD-09 百度坐标系,在火星坐标系上再次加密生成的. 百度地图使用该坐标系

同一个地点在不同坐标系的经纬度是不一样的,所以需要转化坐标系

wgs84 ---》 gcj02 ---》 bd09 三种坐标系只能一层一层转化,百度和国际要通过火星坐标系转化

小工具代码如下(html文件):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经纬度转换</title>
    <!-- 引入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-button{
            margin: 5px !important;
        }
        .el-form-item{
            margin-bottom: 8px;
        }
    </style>
</head>

<body>
<div id="main">
    <el-form ref="form" :model="form" label-width="88px">
        <el-form-item label="转换前经度">
            <el-input type="number" v-model="form.lng"></el-input>
        </el-form-item>
        <el-form-item label="转换前纬度">
            <el-input type="number" v-model="form.lat"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="change(1)">百度转高德</el-button>
            <el-button type="primary" size="small" @click="change(2)">高德转百度</el-button>
            <el-button type="primary" size="small" @click="change(3)">高德转国际</el-button>
            <el-button type="primary" size="small" @click="change(4)">国际转高德</el-button>
            <el-button type="primary" size="small" @click="change(5)">百度转国际</el-button>
            <el-button type="primary" size="small" @click="change(6)">国际转百度</el-button>
        </el-form-item>
        <el-form-item label="转换后经度">
            <el-input type="number" v-model="form.rlng"></el-input>
        </el-form-item>
        <el-form-item label="转换后纬度">
            <el-input type="number" v-model="form.rlat"></el-input>
        </el-form-item>
    </el-form>
    <div class="tips">
        <br /><br />
        国际定位标准: WGS84  公用转化的坐标系,一般保存在后端数据库
        <br /><br />
        火星坐标系: GCJ-02  国测局标准,中国使用,在国际定位标准上加密生成的. 高德地图,腾讯地图以及谷歌中国区地图使用该坐标系
        <br /><br />
        百度坐标系: BD-09  百度坐标系,在火星坐标系上再次加密生成的. 百度地图使用该坐标系
    </div>
</div>
</body>
<script>
     
/**
 * Created by Wandergis on 2015/7/8.
 * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
 */

    //定义一些常量
    var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
    var PI = 3.1415926535897932384626;
    var a = 6378245.0;
    var ee = 0.00669342162296594323;
    /**
     * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
     * 即 百度 转 谷歌、高德
     * @param bd_lon
     * @param bd_lat
     * @returns {*[]}
     */
    var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
        var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        var x = bd_lon - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        var gg_lng = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return [gg_lng, gg_lat]
    };

    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
     * 即谷歌、高德 转 百度
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var gcj02tobd09 = function gcj02tobd09(lng, lat) {
        var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
        var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
        var bd_lng = z * Math.cos(theta) + 0.0065;
        var bd_lat = z * Math.sin(theta) + 0.006;
        return [bd_lng, bd_lat]
    };

    /**
     * WGS84转GCj02
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var wgs84togcj02 = function wgs84togcj02(lng, lat) {
        if (out_of_china(lng, lat)) {
            return [lng, lat]
        } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * PI;
            var magic = Math.sin(radlat);
            magic = 1 - ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return [mglng, mglat]
        }
    };

    /**
     * GCJ02 转换为 WGS84
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var gcj02towgs84 = function gcj02towgs84(lng, lat) {
        if (out_of_china(lng, lat)) {
            return [lng, lat]
        } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * PI;
            var magic = Math.sin(radlat);
            magic = 1 - ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return [lng * 2 - mglng, lat * 2 - mglat]
        }
    };

    var transformlat = function transformlat(lng, lat) {
        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
        return ret
    };

    var transformlng = function transformlng(lng, lat) {
        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
        return ret
    };

    /**
     * 判断是否在国内，不在国内则不做偏移
     * @param lng
     * @param lat
     * @returns {boolean}
     */
    var out_of_china = function out_of_china(lng, lat) {
        return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
    };



    var vm = new Vue({
        el: "#main",
        data() {
            return{
                form:{
                    lng:'',
                    lat:'',
                    rlng:'',
                    rlat:'',
                }
            }
        },
        methods: {
            change(t){
                let form=this.form
                if(t==1){
                    let arr=bd09togcj02(form.lng*1,form.lat*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }else if(t==2){
                    let arr=gcj02tobd09(form.lng*1,form.lat*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }else if(t==3){
                    let arr=gcj02towgs84(form.lng*1,form.lat*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }else if(t==4){
                    let arr=wgs84togcj02(form.lng*1,form.lat*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }else if(t==5){
                    let ary=bd09togcj02(form.lng*1,form.lat*1)
                    let arr=gcj02towgs84(ary[0]*1,ary[1]*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }else if(t==6){
                    let ary=wgs84togcj02(form.lng*1,form.lat*1)
                    let arr=gcj02tobd09(ary[0]*1,ary[1]*1)
                    form.rlng=arr[0]
                    form.rlat=arr[1]
                }
            },
        }
    })
</script>

</html>