[UNI-215] fix : 구글 구면좌표계 제거 및 interpolate 함수 및 distance 함수 구현 (#118)

Author: dgfh0450

uniro_frontend/src/hooks/useMap.tsx

@@ -7,21 +7,19 @@ const useMap = (mapOptions?: google.maps.MapOptions) => {
 	const [overlay, setOverlay] = useState<google.maps.OverlayView | null>(null);
 	const [AdvancedMarker, setAdvancedMarker] = useState<typeof google.maps.marker.AdvancedMarkerElement | null>(null);
 	const [Polyline, setPolyline] = useState<typeof google.maps.Polyline | null>(null);
-	const [spherical, setSpherical] = useState<typeof google.maps.geometry.spherical | null>(null);
 	const [mapLoaded, setMapLoaded] = useState<boolean>(false);
 
 	useEffect(() => {
 		if (!mapRef.current) return;
 
 		const initMap = async () => {
 			try {
-				const { map, overlay, AdvancedMarkerElement, Polyline, spherical } = await initializeMap(
+				const { map, overlay, AdvancedMarkerElement, Polyline } = await initializeMap(
 					mapRef.current,
 					mapOptions,
 				);
 				setMap(map);
 				setOverlay(overlay);
-				setSpherical(() => spherical);
 				setAdvancedMarker(() => AdvancedMarkerElement);
 				setPolyline(() => Polyline);
 				setMapLoaded(true);
@@ -39,7 +37,7 @@ const useMap = (mapOptions?: google.maps.MapOptions) => {
 		};
 	}, []);
 
-	return { mapRef, map, overlay, AdvancedMarker, Polyline, spherical, mapLoaded };
+	return { mapRef, map, overlay, AdvancedMarker, Polyline, mapLoaded };
 };
 
 export default useMap;

uniro_frontend/src/map/initializer/googleMapInitializer.ts

@@ -7,14 +7,13 @@ interface MapWithOverlay {
 	overlay: google.maps.OverlayView | null;
 	AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement;
 	Polyline: typeof google.maps.Polyline;
-	spherical: typeof google.maps.geometry.spherical;
 }
 
 export const initializeMap = async (
 	mapElement: HTMLElement | null,
 	mapOptions?: google.maps.MapOptions,
 ): Promise<MapWithOverlay> => {
-	const { Map, OverlayView, AdvancedMarkerElement, Polyline, spherical } = await loadGoogleMapsLibraries();
+	const { Map, OverlayView, AdvancedMarkerElement, Polyline } = await loadGoogleMapsLibraries();
 
 	if (!mapElement) {
 		throw new Error("Map Element is not provided");
@@ -45,5 +44,5 @@ export const initializeMap = async (
 	overlay.onRemove = function () {};
 	overlay.setMap(map);
 
-	return { map, overlay, AdvancedMarkerElement, Polyline, spherical };
+	return { map, overlay, AdvancedMarkerElement, Polyline };
 };

uniro_frontend/src/map/loader/googleMapLoader.ts

@@ -9,9 +9,8 @@ const GoogleMapsLoader = new Loader({
 const loadGoogleMapsLibraries = async () => {
 	const { Map, OverlayView, Polyline } = await GoogleMapsLoader.importLibrary("maps");
 	const { AdvancedMarkerElement } = await GoogleMapsLoader.importLibrary("marker");
-	const { spherical } = await GoogleMapsLoader.importLibrary("geometry");
 
-	return { Map, OverlayView, AdvancedMarkerElement, Polyline, spherical };
+	return { Map, OverlayView, AdvancedMarkerElement, Polyline };
 };
 
 export default loadGoogleMapsLibraries;

uniro_frontend/src/pages/reportRisk.tsx

@@ -33,7 +33,7 @@ interface reportMarkerTypes extends MarkerTypesWithElement {
 }
 
 export default function ReportRiskPage() {
-	const { map, mapRef, AdvancedMarker, Polyline, spherical } = useMap({ zoom: 18, minZoom: 17 });
+	const { map, mapRef, AdvancedMarker, Polyline } = useMap({ zoom: 18, minZoom: 17 });
 
 	const [reportMarker, setReportMarker] = useState<reportMarkerTypes>();
 
@@ -166,12 +166,12 @@ export default function ReportRiskPage() {
 				});
 
 				const point = LatLngToLiteral(e.latLng);
-				const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(spherical, edges, point);
+				const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
 
 				const newReportMarker = createAdvancedMarker(
 					AdvancedMarker,
 					map,
-					centerCoordinate(spherical, nearestEdge.node1, nearestEdge.node2),
+					centerCoordinate(nearestEdge.node1, nearestEdge.node2),
 					createMarkerElement({
 						type: Markers.REPORT,
 						className: "translate-routemarker",

uniro_frontend/src/pages/reportRoute.tsx

@@ -38,7 +38,7 @@ type SelectedMarkerTypes = {
 export default function ReportRoutePage() {
 	const navigate = useNavigate();
 	const queryClient = useQueryClient();
-	const { map, mapRef, AdvancedMarker, Polyline, spherical } = useMap({ zoom: 18, minZoom: 17 });
+	const { map, mapRef, AdvancedMarker, Polyline } = useMap({ zoom: 18, minZoom: 17 });
 	const originPoint = useRef<{ point: Node; element: AdvancedMarker } | undefined>();
 	const [newPoints, setNewPoints] = useState<{ element: AdvancedMarker | null; coords: (Coord | Node)[] }>({
 		element: null,
@@ -241,7 +241,7 @@ export default function ReportRoutePage() {
 		const lastPoint = newPoints.coords[newPoints.coords.length - 1] as Node | Coord;
 
 		for (const edge of edges) {
-			const subNode = createSubNodes(spherical, new Polyline({ path: edge })).slice(0, -1);
+			const subNode = createSubNodes(new Polyline({ path: edge })).slice(0, -1);
 			subNodes.push(...subNode);
 		}
 
@@ -288,7 +288,7 @@ export default function ReportRoutePage() {
 				});
 
 				const point = LatLngToLiteral(e.latLng);
-				const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(spherical, edges, point);
+				const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
 
 				const tempWaypointMarker = createAdvancedMarker(
 					AdvancedMarker,

uniro_frontend/src/utils/coordinates/centerCoordinate.ts

@@ -1,17 +1,6 @@
 import { Coord } from "../../data/types/coord";
-import { LatLngToLiteral } from "./coordinateTransform";
+import { interpolate } from "../interpolate";
 
-export default function centerCoordinate(
-	spherical: typeof google.maps.geometry.spherical | null,
-	point1: Coord,
-	point2: Coord,
-): Coord {
-	if (spherical === null) {
-		return {
-			lat: (point1.lat + point2.lat) / 2,
-			lng: (point1.lng + point2.lng) / 2,
-		};
-	} else {
-		return LatLngToLiteral(spherical.interpolate(point1, point2, 0.5));
-	}
+export default function centerCoordinate(point1: Coord, point2: Coord): Coord {
+	return interpolate(point1, point2, 0.5);
 }

uniro_frontend/src/utils/coordinates/distance.ts

@@ -1,23 +1,26 @@
-/** 하버사인 공식 */
-export default function distance(
-	spherical: typeof google.maps.geometry.spherical | null,
-	point1: google.maps.LatLngLiteral,
-	point2: google.maps.LatLngLiteral,
-): number {
-	const { lat: lat1, lng: lng1 } = point1;
-	const { lat: lat2, lng: lng2 } = point2;
-
-	if (spherical === null) {
-		const R = 6371000;
-		const toRad = (angle: number) => (angle * Math.PI) / 180;
+import { Coord } from "../../data/types/coord";
 
-		const dLat = toRad(lat2 - lat1);
-		const dLon = toRad(lng2 - lng1);
+/** 하버사인 공식 */
+export default function distance(point1: Coord, point2: Coord): number {
+	const R = 6378137;
+	const { lat: lat_a, lng: lng_a } = point1;
+	const { lat: lat_b, lng: lng_b } = point2;
 
-		const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
-		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+	const rad_lat_a = toRad(lat_a);
+	const rad_lng_a = toRad(lng_a);
+	const rad_lat_b = toRad(lat_b);
+	const rad_lng_b = toRad(lng_b);
 
-		return R * c;
-	}
-	return spherical.computeLength([point1, point2]);
+	return (
+		R *
+		2 *
+		Math.asin(
+			Math.sqrt(
+				Math.pow(Math.sin((rad_lat_a - rad_lat_b) / 2), 2) +
+					Math.cos(rad_lat_a) * Math.cos(rad_lat_b) * Math.pow(Math.sin((rad_lng_a - rad_lng_b) / 2), 2),
+			),
+		)
+	);
 }
+
+const toRad = (angle: number) => (angle * Math.PI) / 180;

uniro_frontend/src/utils/interpolate.ts

@@ -0,0 +1,35 @@
+import { Coord } from "../data/types/coord";
+
+function toRad(deg: number) {
+	return (deg * Math.PI) / 180;
+}
+function toDeg(rad: number) {
+	return (rad * 180) / Math.PI;
+}
+
+export function interpolate(point1: Coord, point2: Coord, fraction: number): Coord {
+	const lat1 = toRad(point1.lat);
+	const lng1 = toRad(point1.lng);
+
+	const lat2 = toRad(point2.lat);
+	const lng2 = toRad(point2.lng);
+
+	const angle = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1));
+
+	const sinAngle = Math.sin(angle);
+
+	const A = Math.sin((1 - fraction) * angle) / sinAngle;
+	const B = Math.sin(fraction * angle) / sinAngle;
+
+	const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2);
+	const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2);
+	const z = A * Math.sin(lat1) + B * Math.sin(lat2);
+
+	const interpolatedLat = Math.atan2(z, Math.sqrt(x * x + y * y));
+	const interpolatedLng = Math.atan2(y, x);
+
+	return {
+		lat: toDeg(interpolatedLat),
+		lng: toDeg(interpolatedLng),
+	};
+}

uniro_frontend/src/utils/polylines/createSubnodes.ts

@@ -2,43 +2,22 @@ import { EDGE_LENGTH } from "../../constant/edge";
 import { Coord } from "../../data/types/coord";
 import { LatLngToLiteral } from "../coordinates/coordinateTransform";
 import distance from "../coordinates/distance";
+import { interpolate } from "../interpolate";
 
 /** 구면 보간 없이 계산한 결과 */
-export default function createSubNodes(
-	spherical: typeof google.maps.geometry.spherical | null,
-	polyLine: google.maps.Polyline,
-): Coord[] {
+export default function createSubNodes(polyLine: google.maps.Polyline): Coord[] {
 	const paths = polyLine.getPath();
 	const [startNode, endNode] = paths.getArray().map((el) => LatLngToLiteral(el));
 
-	const length = distance(spherical, startNode, endNode);
-	console.log("구면 보간", length);
+	const length = distance(startNode, endNode);
 
 	const subEdgesCount = Math.ceil(length / EDGE_LENGTH);
 
 	const subNodes: Coord[] = [startNode];
 
-	if (spherical === null || !spherical) {
-		const interval = {
-			lat: (endNode.lat - startNode.lat) / subEdgesCount,
-			lng: (endNode.lng - startNode.lng) / subEdgesCount,
-		};
-
-		for (let i = 1; i < subEdgesCount; i++) {
-			const subNode: Coord = {
-				lat: startNode.lat + interval.lat * i,
-				lng: startNode.lng + interval.lng * i,
-			};
-			subNodes.push(subNode);
-		}
-
-		subNodes.push(endNode);
-		return subNodes;
-	}
-
 	for (let i = 1; i < subEdgesCount; i++) {
 		const fraction = i / subEdgesCount;
-		subNodes.push(LatLngToLiteral(spherical.interpolate(startNode, endNode, fraction)));
+		subNodes.push(interpolate(startNode, endNode, fraction));
 	}
 
 	subNodes.push(endNode);

uniro_frontend/src/utils/polylines/findNearestEdge.ts

@@ -5,7 +5,6 @@ import centerCoordinate from "../coordinates/centerCoordinate";
 import distance from "../coordinates/distance";
 
 export default function findNearestSubEdge(
-	spherical: typeof google.maps.geometry.spherical | null,
 	edges: CoreRoute[],
 	point: Coord,
 ): {
@@ -16,7 +15,7 @@ export default function findNearestSubEdge(
 		.map((edge) => {
 			return {
 				edge,
-				distance: distance(spherical, point, centerCoordinate(spherical, edge.node1, edge.node2)),
+				distance: distance(point, centerCoordinate(edge.node1, edge.node2)),
 			};
 		})
 		.sort((a, b) => {
@@ -26,8 +25,8 @@ export default function findNearestSubEdge(
 	const nearestEdge = edgesWithDistance[0].edge;
 
 	const { node1, node2 } = nearestEdge;
-	const distance0 = distance(spherical, node1, point);
-	const distance1 = distance(spherical, node2, point);
+	const distance0 = distance(node1, point);
+	const distance1 = distance(node2, point);
 	const nearestPoint = distance0 > distance1 ? node2 : node1;
 
 	return {