Incorrect display of geoJSON map

Questions
1

I’m trying to render a geoJSON map through Three.js, but it appears quite messy.
It should be the map of Italy with its regions, but turned upside down (I still don’t get why it doesn’t appear in the right orientation, but this is a minor problem)

Screenshot (50)
Screenshot (50)1671×937 28.3 KB

The question is: How do I fix those obviously wrong lines?

These are the (simplified) rendering scripts

// Function to render the GeoJSON data
export async function renderGeoJSON(geojsonUrl) {
const geojsonData = await fetchGeoJSON(geojsonUrl);

const coordinates = convertToWebMercator(geojsonData);

const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(coordinates);

// Material and Mesh Definition
const material = new THREE.MeshBasicMaterial({
color: 0x0000ff, // Blue color
opacity: 0.7, // Semi-transparent
transparent: true // Enable transparency
});

// Create a Mesh object from the geometry and material
const mesh = new THREE.Mesh(geometry, material);

// Bounding box
const bbox = new THREE.Box3().setFromObject(mesh);
const bboxCenter = new THREE.Vector3();

console.log(“Mesh bounding box center:”, bbox.getCenter(bboxCenter));
return mesh;

}

function convertToWebMercator(geojsonData, mapWidth=100, mapHeight=100) {
const points = ;

geojsonData.features.forEach((feature) => {
feature.geometry.coordinates.forEach((ring, ringIndex) => {
ring.forEach(coordinate => {
const { x, y } = projectCoordinate(coordinate, mapWidth, mapHeight);
points.push(new THREE.Vector3(x, y, 0));
});
});
}
});

return points;
}

2

Welcome to the forum.

Usually, when there is a bug, it could be because:

  • the data are wrong
  • their interpretation is wrong
  • the algorithm is wrong

As I have no idea what are the data, the following is just a speculation. Thus, it could be spectacularly wrong.

I expect, that your data defines polygons as sequences of points, as displayed in the left image. However, meshes are made of triangles, so the same points, when used by a mesh, correspond to a herd of very thin triangles (that look like lines). The right image illustrates this phenomena. If this hypothesis is correct, you could add intermediate step: your data → 2D shape → shape geometry → mesh.

image
image1015×323 17.1 KB

4 Likes
3

I fixed my issue. It was probably a “wrong interpretation” issue.

I incorrectly assumed that I had to build a mesh, when what I actually needed were lines.

This is what my current script looks like

export async function renderGeoJSONLines(geojsonUrl) {
console.log(“Fetching GeoJSON data from:”, geojsonUrl);
const geojsonData = await fetchGeoJSON(geojsonUrl);
if (!geojsonData) {
console.error(“Failed to load GeoJSON data”);
return null;
}

console.log(“Converting GeoJSON data to coordinates”);
const vectorLines = convertToVector3(geojsonData);
const lineObjects = ;

vectorLines.forEach(lineLoop => {
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(lineLoop);

// Material and Mesh Definition
const material = new THREE.LineBasicMaterial({
    //color: 0x00ff00, // Green color
    color: 0x0000ff, // Blue color
});


const line = new THREE.LineLoop(geometry, material);
lineObjects.push(line);

});

return lineObjects;

}