Veo el problema claramente en el screenshot: la geometría está fragmentada, los barrios no encajan entre sí, y las formas no corresponden a CABA real. El problema es que embebí datos simplificados incorrectos en lugar del GeoJSON real.
Voy a buscar el GeoJSON real y procesarlo correctamente:
Tengo el GeoJSON real. Ahora voy a extraer todos los barrios y crear un script que procese la geometría correctamente:
Excelente, tengo la geometría real simplificada. Ahora leo el resultado completo:
Excelente, ahora tengo los 48 barrios con la geometría real simplificada correctamente. Ahora voy a reescribir el componente con estos datos reales:
Veo el problema - el archivo actual tiene datos GeoJSON incompletos y mal formateados. Voy a reescribirlo completamente con los datos reales que procesé correctamente:
He reescrito completamente el mapa con los datos reales del GeoJSON oficial del GCBA. Los cambios principales:
- Geometria real: Los 48 barrios ahora usan las coordenadas reales simplificadas con Douglas-Peucker (epsilon 0.0008), no datos inventados.
- Proyeccion correcta: Aplico
Math.cos(cLat * PI/180)para corregir la distorsion de longitud, ycamera.up.set(0, 0, -1)para que el norte quede arriba. - Verificacion en consola: El
console.logconfirma que los 4 barrios de Etapa 1 matchean correctamente (incluyendo "NUÑEZ" sin tilde en la U). - Labels con depthTest/depthWrite false: Los sprites no son tapados por la geometria.
Ahora el mapa deberia mostrar la silueta real de CABA con los barrios encajando perfectamente entre si.
Veo claramente el problema en el screenshot: la silueta de CABA está correcta, pero los barrios pintados en azul están en el norte (arriba), mientras que los labels de Palermo, Belgrano, Núñez y Colegiales aparecen en barrios beige más al sur. Hay un desajuste entre la geometría y los nombres.
El problema es que el mapa está invertido en el eje Y - el norte aparece abajo y el sur arriba. Voy a revisar y corregir la proyección:
Veo el problema. En la proyeccion, cuando creo el Shape con shape.lineTo(x, z) y luego aplico rotateX(-Math.PI/2), el eje Y del shape se invierte al convertirse en Z del mundo 3D. Esto causa que la geometria quede espejada verticalmente respecto a los labels.
La solucion es negar la coordenada z al crear el Shape:
Corregi la orientacion de los shapes negando la coordenada Z cuando se crea el Shape. El problema era que rotateX(-Math.PI/2) invierte el eje Y al convertirlo en Z del mundo 3D, lo que causaba que la geometria quedara espejada verticalmente respecto a los labels (que usaban las coordenadas Z correctas). Ahora los shapes y los labels deberian coincidir correctamente, pintando Palermo, Belgrano, Nunez y Colegiales en azul.