utm to lonAndLat

原创已于 2024-11-15 16:35:05 修改 · 191 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

于 2023-06-01 18:37:15 首次发布

该网页应用提供了一个界面，用户可以输入UTM坐标，点击按钮进行转换，将坐标转化为LatLng格式。应用使用proj4js库进行坐标系统转换，并能从本地存储中加载和保存坐标值。此外，还提供了复制转换结果的功能。

该文章已生成可运行项目，

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

<head>
    <title>UTM to LatLng Conversion</title>
    <meta charset="utf-8" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        p {
            font-size: 18px;
            margin-bottom: 10px;
        }

        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        button {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #result {
            font-weight: bold;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        #saveButton {
            margin-top: 20px;
            background-color: #28a745;
        }
    </style>
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.9.0/proj4-src.js"></script>
</head>

<body>
    <h1>UTM to LatLng Conversion</h1>
    <form>
        <p>
            <label for="utmZone">UTM Zone:</label>
            <input type="number" id="utmZone" />
        </p>
        <p>
            <label for="utmX">UTM X-coordinate:</label>
            <input type="number" id="utmX" step="any" />
        </p>
        <p>
            <label for="utmY">UTM Y-coordinate:</label>
            <input type="number" id="utmY" step="any" />
        </p>
        <button type="button" onclick="convertUTMToLatLng()">Convert</button>
    </form>

    <p>Converted LatLng:</p>
    <p id="result"></p>

    <button id="saveButton" type="button" onclick="saveToLocalStorage()">Save Coordinates</button>

    <script>
        const utmXInput = document.getElementById('utmX');
        const utmYInput = document.getElementById('utmY');
        const utmZoneInput = document.getElementById('utmZone');
        const resultElement = document.getElementById('result');

        // Load coordinates from local storage if available
        window.onload = function () {
            if (localStorage.getItem('utmX') && localStorage.getItem('utmY') && localStorage.getItem('utmZone')) {
                utmXInput.value = localStorage.getItem('utmX');
                utmYInput.value = localStorage.getItem('utmY');
                utmZoneInput.value = localStorage.getItem('utmZone');
            }
        }

        let latLngRes = ''
        const convertUTMToLatLng = () => {
            const utmZone = parseInt(utmZoneInput.value);
            const utmX = parseFloat(utmXInput.value);
            const utmY = parseFloat(utmYInput.value);

            if (isNaN(utmZone) || isNaN(utmX) || isNaN(utmY)) {
                alert('Please enter valid UTM zone and coordinates.');
                return;
            }

            // Define UTM projection object with dynamic zone
            const utmProjection = `+proj=utm +zone=${utmZone} +datum=WGS84 +units=m +no_defs`;
            const utm = proj4(utmProjection);

            // Perform projection conversion
            const latLng = utm.inverse([utmX, utmY]);
            latLngRes = `${latLng[0]}, ${latLng[1]}`;

            // Update the displayed result
            resultElement.textContent = latLngRes;

            // Save coordinates and zone to local storage
            localStorage.setItem('utmX', utmX);
            localStorage.setItem('utmY', utmY);
            localStorage.setItem('utmZone', utmZone);
        };

        const saveToLocalStorage = () => {
            const utmZone = parseInt(utmZoneInput.value);
            const utmX = parseFloat(utmXInput.value);
            const utmY = parseFloat(utmYInput.value);

            if (isNaN(utmZone) || isNaN(utmX) || isNaN(utmY)) {
                alert('Please enter valid UTM zone and coordinates.');
                return;
            }

            // Save coordinates and zone to local storage
            localStorage.setItem('utmX', utmX);
            localStorage.setItem('utmY', utmY);
            localStorage.setItem('utmZone', utmZone);

            // Create a temporary element to copy text
            var tempElement = document.createElement("textarea");
            tempElement.value = latLngRes;
            document.body.appendChild(tempElement);

            // Select and copy text
            tempElement.select();
            document.execCommand("copy");

            // Remove the temporary element
            document.body.removeChild(tempElement);
            alert("Text copied!");
        };
    </script>
</body>

</html>

本文章已经生成可运行项目