Merge pull request #4 from cartesiancs/develop

Develop

src/components/map/SelectMap.tsx

@@ -17,16 +17,30 @@ const IconSize = css({
 
 function RectangleSelector({
   isDrag = true,
+
   bounds,
+  drawBounds,
+
   onChange,
+  onDrawChange,
 }: {
   isDrag: boolean;
+
   bounds: LatLngBounds | null;
+  drawBounds: LatLngBounds | null;
+
   onChange: (bounds: LatLngBounds) => void;
+  onDrawChange: (bounds: LatLngBounds) => void;
 }) {
   const [firstPoint, setFirstPoint] = useState<LatLng | null>(null);
+
   const lastLatlngRef = useRef<LatLng | null>(null);
 
+  const adjustLng = (latlng: LatLng): LatLng => {
+    const adjustedLng = ((((latlng.lng + 180) % 360) + 360) % 360) - 180;
+    return new L.LatLng(latlng.lat, adjustedLng);
+  };
+
   const map = useMapEvents({
     mousedown(e) {
       if (!isDrag) {
@@ -35,13 +49,19 @@ function RectangleSelector({
     },
     mousemove(e) {
       if (firstPoint) {
-        lastLatlngRef.current = e.latlng;
+        lastLatlngRef.current = adjustLng(e.latlng);
-        onChange(new L.LatLngBounds(firstPoint, e.latlng));
+        onDrawChange(new L.LatLngBounds(firstPoint, e.latlng));
+        onChange(
+          new L.LatLngBounds(adjustLng(firstPoint), adjustLng(e.latlng))
+        );
       }
     },
     mouseup(e) {
       if (firstPoint) {
-        onChange(new L.LatLngBounds(firstPoint, e.latlng));
+        onDrawChange(new L.LatLngBounds(firstPoint, e.latlng));
+        onChange(
+          new L.LatLngBounds(adjustLng(firstPoint), adjustLng(e.latlng))
+        );
         setFirstPoint(null);
       }
     },
@@ -62,14 +82,18 @@ function RectangleSelector({
         const touch = e.touches[0];
         const latlng = map.mouseEventToLatLng(touch as any);
         lastLatlngRef.current = latlng;
-        onChange(new L.LatLngBounds(firstPoint, latlng));
+
+        onDrawChange(new L.LatLngBounds(firstPoint, latlng));
+        onChange(new L.LatLngBounds(adjustLng(firstPoint), adjustLng(latlng)));
       }
     };
 
     const handleTouchEnd = (e: TouchEvent) => {
       if (firstPoint) {
         const latlng = lastLatlngRef.current || firstPoint;
-        onChange(new L.LatLngBounds(firstPoint, latlng));
+
+        onDrawChange(new L.LatLngBounds(firstPoint, latlng));
+        onChange(new L.LatLngBounds(adjustLng(firstPoint), adjustLng(latlng)));
         setFirstPoint(null);
       }
     };
@@ -91,8 +115,8 @@ function RectangleSelector({
     }
   }, [isDrag, map]);
 
-  return bounds ? (
+  return drawBounds ? (
-    <Rectangle bounds={bounds} pathOptions={{ color: "blue" }} />
+    <Rectangle bounds={drawBounds} pathOptions={{ color: "blue" }} />
   ) : null;
 }
 
@@ -105,6 +129,7 @@ export function MapComponent({
 }) {
   const [isDrag, setIsDrag] = useState(true);
   const [bounds, setBounds] = useState<LatLngBounds | null>(null);
+  const [drawBounds, setDrawBounds] = useState<LatLngBounds | null>(null);
 
   const handleClickSwitchDrag = () => {
     setIsDrag(!isDrag);
@@ -113,6 +138,7 @@ export function MapComponent({
   const handleClickRemoveBox = () => {
     onRemove();
     setBounds(null);
+    setDrawBounds(null);
     setIsDrag(true);
   };
 
@@ -121,6 +147,11 @@ export function MapComponent({
     onDone([e._northEast, e._southWest]);
   };
 
+  const handleChangeDraw = (e) => {
+    setDrawBounds(e);
+    onDone([e._northEast, e._southWest]);
+  };
+
   return (
     <div
       css={css({
@@ -203,8 +234,10 @@ export function MapComponent({
         />
         <RectangleSelector
           bounds={bounds}
+          drawBounds={drawBounds}
           isDrag={isDrag}
           onChange={handleChangeDone}
+          onDrawChange={handleChangeDraw}
         />
       </MapContainer>
     </div>

src/three/Space.tsx

@@ -8,6 +8,8 @@ import { GLTFExporter } from "three/examples/jsm/Addons.js";
 import Car from "./Car";
 import instanceFleet from "@/api/axios";
 
+const scale = 51000;
+
 function Building({
   shape,
   extrudeSettings,
@@ -79,10 +81,9 @@ function Roads({ area }: { area: any }) {
   if (!area || area.length < 2) return null;
   const refLat = (area[1].lat + area[0].lat) / 2;
   const refLng = (area[1].lng + area[0].lng) / 2;
-  const scale = 51000;
 
   function project(lat: number, lng: number) {
-    const x = (lng - refLng) * scale;
+    const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
     const y = (lat - refLat) * scale;
     return new THREE.Vector2(x, y);
   }
@@ -203,18 +204,13 @@ export function Space() {
   const center = useAreaStore((state) => state.center);
   const refLat = (center[1].lat + center[0].lat) / 2;
   const refLng = (center[1].lng + center[0].lng) / 2;
-  const scale = 51000;
 
   function project(lat: number, lng: number) {
-    const x = (lng - refLng) * scale;
+    const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
     const y = (lat - refLat) * scale;
     return new THREE.Vector2(x, y);
   }
 
-  useEffect(() => {
-    setRealCenter(center);
-  }, [areas]);
-
   const areaData = () => {
     const result: Array<{
       shape: THREE.Shape;
@@ -243,6 +239,10 @@ export function Space() {
     return result;
   };
 
+  useEffect(() => {
+    setRealCenter(center);
+  }, [areas]);
+
   const buildingsData = areaData();
 
   return (

src/ui/App.tsx

@@ -137,7 +137,8 @@ function App() {
           <Column gap="0.5rem">
             <Title>Generate 3d map</Title>
             <Description>
-              Tools to create 3D maps based on maps and export them in 3D format
+              Tools to create 3D maps based on maps and export them in GLB
+              format
             </Description>
           </Column>
           <MapComponent