SOURCE

window.onload = function () {
    function commonStr2wkt(el) {
        var input = el.value;
        var eLen = input.length;
        //let input = '116.35947859881483,39.884858698667486;116.36596828556245,39.878544775863425;116.36664416260929,39.88363705443705;116.35947859881483,39.884858698667486';
        //let input = document.getElementById('input').innerText();
        input = input.replaceAll(' ', '');
        console.log(input);

        input = input.split(';');
        console.log(input);

        let output = '';
        for (let i = 0; i < input.length; i++) {
            console.log(input[i]);
            let one = input[i].split(',');
            output += one[0] + ' ' + one[1] + ',';
        }

        console.log(output);
        output = output.replace(/.$/, '');
        console.log(output);

        output = 'LINESTRING(' + output + ')';
        console.log(output);

        return output;
    }

    function routeStr2wkt(el) {
        var input = el.value;
        var eLen = input.length;
        //let input = '116.35947859881483,39.884858698667486;116.36596828556245,39.878544775863425;116.36664416260929,39.88363705443705;116.35947859881483,39.884858698667486';
        //let input = document.getElementById('input').innerText();
        //input = input.replaceAll(' ', '');
        console.log(input);
        var routeObj = JSON.parse(input);
        //input = input.split(';');
        //console.log(input);

        input= routeObj.data.detail.poiList;
        let output = '';
        for (let i = 0; i < input.length; i++) {
            //console.log(input[i].lon);
            //let one = input[i].split(',');
            let one = input[i];
            one.lon = one.lon / 10000000;
            one.lat = one.lat / 10000000;
            output += one.lon + ' ' + one.lat + ',';
        }

        console.log(output);
        output = output.replace(/.$/, '');
        console.log(output);

        output = 'LINESTRING(' + output + ')';
        console.log(output);

        return output;
    }

    function corrStr2wkt(el) {
        var input = el.value;
        var eLen = input.length;
        //let input = '116.35947859881483,39.884858698667486;116.36596828556245,39.878544775863425;116.36664416260929,39.88363705443705;116.35947859881483,39.884858698667486';
        //let input = document.getElementById('input').innerText();
        //input = input.replaceAll(' ', '');
        console.log(input);
        var routeArr = JSON.parse(input);
        //input = input.split(';');
        console.log(routeArr.length);

        input= routeArr;
        let output = '';
        for (let i = 0; i < input.length; i++) {
            //console.log(input[i].lon);
            //let one = input[i].split(',');
            let one = input[i];
            one.lon = one.coord.lo;
            one.lat = one.coord.la;
            output += one.lon + ' ' + one.lat + ',';
        }

        console.log(output);
        output = output.replace(/.$/, '');
        console.log(output);

        output = 'LINESTRING(' + output + ')';
        console.log(output);

        return output;
    }


    function strCommon2wkt(input) {
        //let input = '116.35947859881483,39.884858698667486;116.36596828556245,39.878544775863425;116.36664416260929,39.88363705443705;116.35947859881483,39.884858698667486';
        //let input = document.getElementById('input').innerText();
        input = input.replaceAll(' ', '');
        console.log(input);

        input = input.split(',');
        console.log(input);

        let output = '';
        for (let i = 0; i < input.length - 1; i++) {
            if (i % 2 == 1) {
                continue;
            }
            console.log(input[i]);
            output += input[i] + ' ' + input[i+1] + ',';
        }

        console.log(output);
        output = output.replace(/.$/, '');
        console.log(output);

        output = 'LINESTRING(' + output + ')';
        console.log(output);

        return output;
    }

    function bspCorrStr2wkt(el) {
        var input = el.value;
        var eLen = input.length;
        //let input = '2024-03-12 09:45:57 [receiveData-0d]: 路线纠偏bsp-to-app,data_len:172, struct_size:86, 纠偏类型:导航至终点, 是否是目的地导航模式:是, 是否纠偏模式:否, 原轨迹ID:1934998572496397928, 版本号:0, 原轨迹终点:113.88947009965645, 22.960867881624427, 纠偏轨迹ID:0,当前GPS点:113.8915597,22.9618368, 之前的4个点:113.891761,22.9617224,113.8918786,22.9616546,113.8919893,22.9615871,113.8920946,22.9615208, 在轨迹上的点的下标:23, 在轨迹上的点的下标的level:2, 在轨迹上的点:113.89056444093451, 22.96164035782071, 运动模式:31, 运动类型:砾石路骑行, 开始时间:2024-03-12 09:40:27.301,';
        //let input = document.getElementById('input').innerText();
        //input = input.replaceAll(' ', '');

        let a = "当前GPS点:";
        let b = " 之前的4个点:";
        let c = " 在轨迹上的点的下标";
        let pos_a = input.indexOf(a);
        let pos_b = input.indexOf(b);
        let pos_c = input.indexOf(c);

        console.log(input.slice(pos_a + a.length, pos_b));  // 输出 "ello"
        console.log(input.slice(pos_b + b.length, pos_c));  // 输出 "ello"

        return strCommon2wkt(input.slice(pos_a + a.length, pos_b) + input.slice(pos_b + b.length, pos_c));
    }

    // 转换为GPX格式
    function convertToGPX(json) {

        console.log(json);
        const gpxHeader = `<?xml version="1.0" encoding="UTF-8"?>
        <gpx version="1.1" creator="Your Application" xmlns="http://www.topografix.com/GPX/1/1">
        <trk>
            <name>Track Name</name>
            <trkseg>`;
        const gpxFooter = `    </trkseg>
        </trk>
        </gpx>`;

        let gpxTrackPoints = "";
        const records = json.record;
        for (const record of records) {
            if (!record.position_lat || !record.position_lat) {
                continue;
            }
            const lat = record.position_lat.toFixed(9);
            const lon = record.position_long.toFixed(9);
            const ele = record.altitude || 0;
            const time = new Date(record.timestamp * 1000).toISOString();

            const gpxPoint = `
                <trkpt lat="${lat}" lon="${lon}">
                <ele>${ele}</ele>
                <time>${time}</time>
            </trkpt>
            `;
            gpxTrackPoints += gpxPoint;
        }

        return gpxHeader + gpxTrackPoints + gpxFooter;
    }

    function sportRecordStr2gpx(el) {
        var input = el.value;
        var eLen = input.length;
        //console.log(input);

        const gpxText = convertToGPX(JSON.parse(input));
        return gpxText;
    }

    var el = document.getElementById('common_str');
    el.addEventListener('input', function () {
        var wkt = commonStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });

    el.addEventListener('propertychange', function () {//兼容IE
        var wkt = commonStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });


    var el = document.getElementById('route_str');
    el.addEventListener('input', function () {
        var wkt = routeStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });

    el.addEventListener('propertychange', function () {//兼容IE
        var wkt = routeStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });


    el = document.getElementById('corr_str');
    el.addEventListener('input', function () {
        var wkt = corrStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });

    el.addEventListener('propertychange', function () {//兼容IE
        var wkt = corrStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });


    el = document.getElementById('bsp_to_app_str');
    el.addEventListener('input', function () {
        var wkt = bspCorrStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });

    el.addEventListener('propertychange', function () {//兼容IE
        var wkt = bspCorrStr2wkt(this); //   调用函数 
        document.getElementById('wkt').innerHTML = wkt;
    });

    el = document.getElementById('sport_record_str');
    el.addEventListener('input', function () {
        var gpx = sportRecordStr2gpx(this); //   调用函数 
        document.getElementById('gpx').innerHTML = gpx;
    });

    el.addEventListener('propertychange', function () {//兼容IE
        var gpx = sportRecordStr2gpx(this); //   调用函数 
        document.getElementById('gpx').innerHTML = gpx;
    });
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>str2wkt</title>
	<!--link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"-->  
	<!--script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script-->
	<!--script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script-->
<style>
.full-width-div {
    width: 100%;
    background-color: lightgrey; /* 这一行是为了让 div 可见 */
}

.full-width-inner {
    width: 100%;
    box-sizing: border-box; /* 加入 box-sizing 属性 */
    padding: 10px;
    border: 1px solid black;
}
</style>

</head>
<body>
<!--div><textarea rows="10" cols="80" placeholder="paste path" id="str" ></textarea></div-->

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="paste common str" id="common_str" ></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="paste route path" id="route_str" ></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="paste corr route path" id="corr_str" ></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="paste bsp to app" id="bsp_to_app_str" ></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="show wkt" id="wkt"></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="paste sport record" id="sport_record_str" ></textarea></div>

<div class="full-width-div"><textarea class="full-width-inner" rows="10" cols="80" placeholder="show gpx" id="gpx"></textarea></div>



</body>
</html>