Function Roads

src/three/Space.tsx:315–368

({ area }: { area: any })

}

function Roads({ area }: { area: any }) {
  const [roads, setRoads] = useState<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;

  function project(lat: number, lng: number) {
    const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
    const y = (lat - refLat) * scale;
    return new THREE.Vector2(x, y);
  }

  useEffect(() => {
    const south = area[1].lat;
    const west = area[1].lng;
    const north = area[0].lat;
    const east = area[0].lng;
    const query = `[out:json][timeout:25];(way["highway"](${south},${west},${north},${east}););out body geom;`;
    fetch("https://overpass-api.de/api/interpreter", {
      method: "POST",
      body: query,
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    })
      .then((response) => response.json())
      .then((data) => {
        setRoads(data.elements);
      })
      .catch((err) => console.error(err));
  }, [area]);

  return (
    <>
      {roads.map((road, index) => {
        if (!road.geometry || road.geometry.length < 2) return null;

        const points = road.geometry.map((pt: any) => {
          const v = project(pt.lat, pt.lon);
          return new THREE.Vector3(v.x, 0.1, -v.y);
        });

        const lineGeometry: any = new THREE.BufferGeometry().setFromPoints(points);

        return (
          <Line
            points={points}
            color="#34f516"
            lineWidth={1}
            userData={{ exportToGLB: true }}
          ></Line>
        );
      })}
    </>
  );
}

export function Export() {
  const { scene } = useThree();