Calculadora de \u00c1ngulo Geod\u00e9sico Interactiva<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n <style>\n body { font-family: 'Inter', sans-serif; }\n .input-group { transition: all 0.3s ease; }\n .input-field { transition: border-color 0.3s ease, box-shadow 0.3s ease; }\n .input-field:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n outline: none;\n }\n @keyframes fadeInScale {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n }\n .result-animate { animation: fadeInScale 0.5s ease-out forwards; }\n #map { z-index: 1; cursor: grab; }\n .leaflet-marker-draggable { cursor: move; }\n \/* Estilo para el bot\u00f3n de la perpendicular *\/\n .toggle-btn.active {\n background-color: #16a34a; \/* green-600 *\/\n color: white;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-2xl bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 md:p-8\">\n \n <header class=\"text-center mb-6\">\n <h1 class=\"text-3xl font-bold text-gray-900 dark:text-white\">Calculadora de \u00c1ngulo Geod\u00e9sico<\/h1>\n <p class=\"text-gray-600 dark:text-gray-400 mt-2\">Introduce las coordenadas o arrastra los puntos en el mapa para calcular el \u00e1ngulo.<\/p>\n <\/header>\n\n <main>\n <div class=\"space-y-6\">\n \n <div id=\"point-a-group\" class=\"input-group bg-gray-50 dark:bg-gray-700\/50 p-4 rounded-xl border border-gray-200 dark:border-gray-700\">\n <h3 class=\"text-lg font-semibold mb-3 text-blue-600 dark:text-blue-400\">Punto de Referencia A<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"latA\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Latitud A (\u00b0)<\/label>\n <input type=\"number\" id=\"latA\" placeholder=\"Ej: 40.7128\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <div>\n <label for=\"lonA\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Longitud A (\u00b0)<\/label>\n <input type=\"number\" id=\"lonA\" placeholder=\"Ej: -74.0060\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"point-b-group\" class=\"input-group bg-gray-50 dark:bg-gray-700\/50 p-4 rounded-xl border-2 border-blue-500 dark:border-blue-400 shadow-lg\">\n <h3 class=\"text-lg font-semibold mb-3 text-blue-600 dark:text-blue-400\">Punto B (V\u00e9rtice del \u00e1ngulo)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"latB\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Latitud B (\u00b0)<\/label>\n <input type=\"number\" id=\"latB\" placeholder=\"Ej: 34.0522\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <div>\n <label for=\"lonB\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Longitud B (\u00b0)<\/label>\n <input type=\"number\" id=\"lonB\" placeholder=\"Ej: -118.2437\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"point-c-group\" class=\"input-group bg-gray-50 dark:bg-gray-700\/50 p-4 rounded-xl border border-gray-200 dark:border-gray-700\">\n <h3 class=\"text-lg font-semibold mb-3 text-blue-600 dark:text-blue-400\">Punto de Referencia C<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"latC\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Latitud C (\u00b0)<\/label>\n <input type=\"number\" id=\"latC\" placeholder=\"Ej: 41.8781\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <div>\n <label for=\"lonC\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Longitud C (\u00b0)<\/label>\n <input type=\"number\" id=\"lonC\" placeholder=\"Ej: -87.6298\" class=\"input-field w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8 flex flex-col md:flex-row justify-center items-center gap-4\">\n <button id=\"calculateBtn\" class=\"w-full md:w-auto bg-blue-600 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-transform transform hover:scale-105\">\n Calcular y Visualizar\n <\/button>\n <button id=\"togglePerpendicularBtn\" style=\"display: none;\" class=\"toggle-btn w-full md:w-auto bg-gray-500 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:bg-gray-600 transition-colors\">\n Perpendicular A-C\n <\/button>\n <\/div>\n\n <div id=\"result-container\" class=\"mt-8 text-center\" style=\"display: none;\"><\/div>\n <div id=\"map\" class=\"mt-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700\" style=\"height: 450px; display: none;\"><\/div>\n \n <\/main>\n <\/div>\n\n <script>\n \/\/ DOM Elements\n const calculateBtn = document.getElementById('calculateBtn');\n const resultContainer = document.getElementById('result-container');\n const mapContainer = document.getElementById('map');\n const togglePerpendicularBtn = document.getElementById('togglePerpendicularBtn');\n\n \/\/ Map State\n let map;\n let featureGroup, perpendicularLayer;\n let isPerpendicularVisible = false;\n\n \/\/ --- Helper Functions ---\n const toRad = (deg) => deg * Math.PI \/ 180;\n const toDeg = (rad) => rad * 180 \/ Math.PI;\n const EARTH_RADIUS_KM = 6371;\n\n \/\/ Central function to perform calculation and update the UI\n function calculateAndDisplay() {\n document.querySelectorAll('.input-group').forEach(el => el.classList.remove('border-red-500', 'border-2'));\n \n const coords = {\n latA: parseFloat(document.getElementById('latA').value), lonA: parseFloat(document.getElementById('lonA').value),\n latB: parseFloat(document.getElementById('latB').value), lonB: parseFloat(document.getElementById('lonB').value),\n latC: parseFloat(document.getElementById('latC').value), lonC: parseFloat(document.getElementById('lonC').value),\n };\n\n const isAValid = validateCoordinate(coords.latA, coords.lonA, document.getElementById('point-a-group'));\n const isBValid = validateCoordinate(coords.latB, coords.lonB, document.getElementById('point-b-group'));\n const isCValid = validateCoordinate(coords.latC, coords.lonC, document.getElementById('point-c-group'));\n\n if (!isAValid || !isBValid || !isCValid) {\n showResult('Por favor, introduce coordenadas v\u00e1lidas para todos los puntos.', 'error');\n mapContainer.style.display = 'none';\n togglePerpendicularBtn.style.display = 'none';\n return;\n }\n\n const side_c = getAngularDistance(coords.latA, coords.lonA, coords.latB, coords.lonB);\n const side_a = getAngularDistance(coords.latB, coords.lonB, coords.latC, coords.lonC);\n const side_b = getAngularDistance(coords.latA, coords.lonA, coords.latC, coords.lonC);\n\n if (side_a === 0 || side_c === 0) {\n showResult('Los puntos no pueden ser coincidentes. La distancia entre A-B o B-C es cero.', 'error');\n mapContainer.style.display = 'none';\n togglePerpendicularBtn.style.display = 'none';\n return;\n }\n\n let cosB = (Math.cos(side_b) - Math.cos(side_a) * Math.cos(side_c)) \/ (Math.sin(side_a) * Math.sin(side_c));\n if (cosB > 1) cosB = 1; if (cosB < -1) cosB = -1;\n\n const angleDeg = toDeg(Math.acos(cosB));\n\n showResult(`El \u00e1ngulo geod\u00e9sico en el Punto B es:<br><strong class=\"text-4xl font-bold text-blue-500 dark:text-blue-400 mt-2 block\">${angleDeg.toFixed(4)}\u00b0<\/strong>`, 'success');\n togglePerpendicularBtn.style.display = 'inline-block';\n updateMap(coords, angleDeg);\n }\n \n \/\/ --- Geodetic Calculation Functions ---\n function getAngularDistance(lat1, lon1, lat2, lon2) {\n const phi1 = toRad(lat1); const phi2 = toRad(lat2);\n const deltaPhi = toRad(lat2 - lat1); const deltaLambda = toRad(lon2 - lon1);\n const a = Math.sin(deltaPhi \/ 2)**2 + Math.cos(phi1) * Math.cos(phi2) * Math.sin(deltaLambda \/ 2)**2;\n return 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n }\n\n function getBearing(lat1, lon1, lat2, lon2) {\n const phi1 = toRad(lat1); const phi2 = toRad(lat2);\n const deltaL = toRad(lon2 - lon1);\n const y = Math.sin(deltaL) * Math.cos(phi2);\n const x = Math.cos(phi1) * Math.sin(phi2) - Math.sin(phi1) * Math.cos(phi2) * Math.cos(deltaL);\n return toDeg(Math.atan2(y, x));\n }\n\n function getDestination(lat, lon, bearing, distance) {\n const phi1 = toRad(lat);\n const lambda1 = toRad(lon);\n const brng = toRad(bearing);\n const dR = distance \/ EARTH_RADIUS_KM; \/\/ Angular distance\n\n const phi2 = Math.asin(Math.sin(phi1) * Math.cos(dR) + Math.cos(phi1) * Math.sin(dR) * Math.cos(brng));\n let lambda2 = lambda1 + Math.atan2(Math.sin(brng) * Math.sin(dR) * Math.cos(phi1), Math.cos(dR) - Math.sin(phi1) * Math.sin(phi2));\n return [toDeg(phi2), toDeg(lambda2)];\n }\n\n\n \/\/ --- Map Functions ---\n function initMap() {\n mapContainer.style.display = 'block';\n map = L.map('map').setView([20, 0], 2);\n\n const openStreetMap = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);\n const satellite = L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', { maxZoom: 19, attribution: 'Tiles © Esri' });\n \n const baseMaps = { \"Mapa\": openStreetMap, \"Sat\u00e9lite\": satellite };\n L.control.layers(baseMaps).addTo(map);\n\n featureGroup = L.featureGroup().addTo(map);\n perpendicularLayer = L.layerGroup();\n }\n\n function updateMap(coords, angle) {\n if (!map) initMap();\n \n map.invalidateSize();\n featureGroup.clearLayers();\n perpendicularLayer.clearLayers();\n\n const { latA, lonA, latB, lonB, latC, lonC } = coords;\n const pointA = [latA, lonA], pointB = [latB, lonB], pointC = [latC, lonC];\n \n const markerA = L.marker(pointA, { draggable: true }).addTo(featureGroup).bindPopup(`<b>Punto A<\/b><br>${latA.toFixed(4)}, ${lonA.toFixed(4)}`);\n markerA.on('dragend', (e) => {\n const pos = e.target.getLatLng();\n document.getElementById('latA').value = pos.lat.toFixed(6);\n document.getElementById('lonA').value = pos.lng.toFixed(6);\n calculateAndDisplay();\n });\n\n const markerB = L.marker(pointB, { draggable: true }).addTo(featureGroup).bindPopup(`<b>Punto B (V\u00e9rtice)<\/b><br>\u00c1ngulo: ${angle.toFixed(4)}\u00b0`).openPopup();\n markerB.on('dragend', (e) => {\n const pos = e.target.getLatLng();\n document.getElementById('latB').value = pos.lat.toFixed(6);\n document.getElementById('lonB').value = pos.lng.toFixed(6);\n calculateAndDisplay();\n });\n\n const markerC = L.marker(pointC, { draggable: true }).addTo(featureGroup).bindPopup(`<b>Punto C<\/b><br>${latC.toFixed(4)}, ${lonC.toFixed(4)}`);\n markerC.on('dragend', (e) => {\n const pos = e.target.getLatLng();\n document.getElementById('latC').value = pos.lat.toFixed(6);\n document.getElementById('lonC').value = pos.lng.toFixed(6);\n calculateAndDisplay();\n });\n \n L.polyline([pointA, pointB], { color: '#3b82f6', weight: 4, opacity: 0.8 }).addTo(featureGroup);\n L.polyline([pointB, pointC], { color: '#3b82f6', weight: 4, opacity: 0.8 }).addTo(featureGroup);\n\n if (isPerpendicularVisible) drawPerpendicularLine(coords);\n \n const bounds = L.latLngBounds([pointA, pointB, pointC]);\n map.fitBounds(bounds, { padding: [50, 50] });\n }\n\n function drawPerpendicularLine(coords) {\n perpendicularLayer.clearLayers();\n const { latA, lonA, latB, lonB, latC, lonC } = coords;\n\n \/\/ Calculate bearing from A to C to find the orientation of the line AC\n const bearingAC = getBearing(latA, lonA, latC, lonC);\n const perpendicularBearing = (bearingAC + 90 + 360) % 360;\n\n \/\/ Calculate a reasonable length for the line (e.g., half the distance from A to C)\n const distanceAC_km = getAngularDistance(latA, lonA, latC, lonC) * EARTH_RADIUS_KM;\n const lineLength = distanceAC_km > 0 ? distanceAC_km : 1000; \/\/ a default length if A and C are same\n \n \/\/ Calculate two points from B to form the perpendicular line\n const p1 = getDestination(latB, lonB, perpendicularBearing, lineLength);\n const p2 = getDestination(latB, lonB, (perpendicularBearing + 180) % 360, lineLength);\n\n \/\/ Draw the perpendicular line through B\n L.polyline([p1, [latB, lonB], p2], { color: '#eab308', weight: 3, opacity: 0.9, dashArray: '5, 10' }).addTo(perpendicularLayer);\n perpendicularLayer.addTo(map);\n }\n\n togglePerpendicularBtn.addEventListener('click', () => {\n isPerpendicularVisible = !isPerpendicularVisible;\n togglePerpendicularBtn.classList.toggle('active', isPerpendicularVisible);\n \n if (isPerpendicularVisible) {\n const coords = {\n latA: parseFloat(document.getElementById('latA').value), lonA: parseFloat(document.getElementById('lonA').value),\n latB: parseFloat(document.getElementById('latB').value), lonB: parseFloat(document.getElementById('lonB').value),\n latC: parseFloat(document.getElementById('latC').value), lonC: parseFloat(document.getElementById('lonC').value),\n };\n if (!isNaN(coords.latA) && !isNaN(coords.latB) && !isNaN(coords.latC)) {\n drawPerpendicularLine(coords);\n }\n } else {\n perpendicularLayer.clearLayers();\n }\n });\n\n \/\/ --- UI Functions ---\n function validateCoordinate(lat, lon, groupElement) {\n let isValid = !(isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180);\n groupElement.classList.toggle('border-red-500', !isValid);\n groupElement.classList.toggle('border-2', !isValid);\n return isValid;\n }\n\n function showResult(message, type) {\n resultContainer.style.display = 'block';\n let content = '';\n const baseClasses = 'result-animate px-4 py-3 rounded-lg';\n if (type === 'error') {\n content = `<div class=\"${baseClasses} bg-red-100 dark:bg-red-900\/50 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300\" role=\"alert\">\n <strong class=\"font-bold\">Error:<\/strong> <span class=\"block sm:inline\">${message}<\/span>\n <\/div>`;\n } else {\n content = `<div class=\"${baseClasses} bg-green-100 dark:bg-green-900\/50 border border-green-400 dark:border-green-600 text-green-800 dark:text-green-200\">\n <p class=\"text-lg\">${message}<\/p>\n <\/div>`;\n }\n resultContainer.innerHTML = content;\n }\n\n \/\/ Initial setup\n calculateBtn.addEventListener('click', calculateAndDisplay);\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Calculadora de \u00c1ngulo Geod\u00e9sico Interactiva Calculadora de \u00c1ngulo Geod\u00e9sico Introduce las coordenadas o arrastra los puntos en el mapa para calcular el \u00e1ngulo. Punto de Referencia A Latitud A (\u00b0) Longitud A (\u00b0) Punto B (V\u00e9rtice del \u00e1ngulo) Latitud B (\u00b0) Longitud B (\u00b0) Punto de Referencia C Latitud C (\u00b0) Longitud C (\u00b0) Calcular…<\/p>\n","protected":false},"author":1,"featured_media":469,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":25,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/pages\/2\/revisions\/493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"https:\/\/chilemosaico.cl\/acusgrafia\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2024-08-27T21:31:31","date_gmt":"2024-08-27T21:31:31","guid":{"rendered":"http:\/\/chilemosaico.cl\/acusgrafia\/?page_id=2"},"modified":"2025-09-19T02:58:30","modified_gmt":"2025-09-19T05:58:30","slug":"calculadora-de-angulo-geodesico","status":"publish","type":"page","link":"https:\/\/chilemosaico.cl\/acusgrafia\/calculadora-de-angulo-geodesico\/","title":{"rendered":"Calculadora de \u00e1ngulo geod\u00e9sico"},"content":{"rendered":"\n\n\n