utm 转经纬度坐标 cesium Ue4 CityEngine

utm 转经纬度坐标|
html 复制代码
<!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="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 utmProjection = '+proj=utm +zone=49 +datum=WGS84 +units=m +no_defs';

        const utmXInput = document.getElementById('utmX');
        const utmYInput = document.getElementById('utmY');
        const resultElement = document.getElementById('result');

        // Load coordinates from local storage if available
        window.onload = function () {
            if (localStorage.getItem('utmX') && localStorage.getItem('utmY')) {
                utmXInput.value = localStorage.getItem('utmX');
                utmYInput.value = localStorage.getItem('utmY');
            }
        }
        let latLngRes = ''
        const convertUTMToLatLng = () => {
            const utmX = parseFloat(utmXInput.value);
            const utmY = parseFloat(utmYInput.value);

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

            // Define UTM projection object
            const utm = proj4(utmProjection);

            // Perform projection conversion
            const latLng = utm.inverse([utmX, utmY]);
            console.log(latLng,'latLng');
            latLngRes = `${latLng[0]}, ${latLng[1]}`
            // Update the displayed result
            resultElement.textContent = `${latLng[0]}, ${latLng[1]}`;

            // Save coordinates to local storage
            localStorage.setItem('utmX', utmX);
            localStorage.setItem('utmY', utmY);
        };
        const saveToLocalStorage = () => {
            const utmX = parseFloat(utmXInput.value);
            const utmY = parseFloat(utmYInput.value);

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

            // Save coordinates to local storage
            localStorage.setItem('utmX', utmX);
            localStorage.setItem('utmY', utmY);
            // 创建一个辅助元素用于复制文本
            var tempElement = document.createElement("textarea");
            tempElement.value = latLngRes;
            document.body.appendChild(tempElement);

            // 选择辅助元素的文本并复制
            tempElement.select();
            document.execCommand("copy");

            // 移除辅助元素
            document.body.removeChild(tempElement);
            alert("Text copied!");
        };
    </script>
utm 转 经纬度坐标 cesium Ue4 CityEngine

utm 转经纬度坐标 cesium Ue4 CityEngine
