| 453 | } |
| 454 | |
| 455 | const areaData = () => { |
| 456 | const result: Array<{ |
| 457 | shape: THREE.Shape; |
| 458 | extrudeSettings: any; |
| 459 | tags: any; |
| 460 | }> = []; |
| 461 | areas.forEach((bld: any) => { |
| 462 | if (!bld.geometry || bld.geometry.length < 3) return; |
| 463 | const shapePoints = bld.geometry.map((pt: any) => project(pt.lat, pt.lng)); |
| 464 | if (!shapePoints[0].equals(shapePoints[shapePoints.length - 1])) |
| 465 | shapePoints.push(shapePoints[0]); |
| 466 | const shape = new THREE.Shape(shapePoints); |
| 467 | let heightValue = parseFloat(bld.tags.height || ""); |
| 468 | const heightLevels = parseFloat(bld.tags["building:levels"] || ""); |
| 469 | if (isNaN(heightValue)) heightValue = 10; |
| 470 | if (!isNaN(heightLevels)) heightValue = heightLevels * 2.2; |
| 471 | const extrudeSettings = { |
| 472 | steps: 1, |
| 473 | depth: heightValue, |
| 474 | bevelEnabled: false, |
| 475 | }; |
| 476 | result.push({ shape, extrudeSettings, tags: bld.tags }); |
| 477 | }); |
| 478 | return result; |
| 479 | }; |
| 480 | |
| 481 | useEffect(() => { |
| 482 | setRealCenter(center); |