fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add OSM topography

Browse source
This commit is contained in:
Fuhrmann 2025-03-11 11:56:33 +01:00
parent c20b682d33
commit c414b9d2d6
10 changed files with 96 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/three/utils/build-coordinate-grid.ts
View file

@ -82,7 +82,13 @@ function createLabel(
transparent: true,
});
const sprite = new Sprite(spriteMaterial);
sprite.position.set(position.x, position.y, position.z);
// Set position according to axis orientation
if (orientation === Orientation.Horizontal) {
sprite.position.set(position.x + 1000, position.y - 1500, position.z + 500);
} else {
sprite.position.set(position.x, position.y - 500, position.z + 500);
}
sprite.scale.set(5000, 2500, 1); // Scale the sprite to make the text readable
return sprite;
}
@ -101,7 +107,8 @@ function generateTextCanvas(text: string, orientation: Orientation) {
context.fillStyle = "black";
if (orientation === Orientation.Horizontal) {
context.fillText(text, 300, 160);
//context.fillText(text, 300, 160);
context.fillText(text, 100, 90);
} else {
context.fillText(text, 100, 90);
}

11
app/three/utils/build-meshes.ts
View file

@ -6,7 +6,7 @@ import {
MeshStandardMaterial,
} from "three";
import { fetchVertices, fetchTriangleIndices } from "./utils";
import { fetchVertices, fetchTriangleIndices, transform } from "./utils";
import { TRIANGLE_INDICES_URL, VERTICES_URL } from "../config";
interface MappedFeature {
@ -38,7 +38,14 @@ async function buildMesh(layerData: MappedFeature) {
const geometry = new BufferGeometry();
const vertices = await fetchVertices(VERTICES_URL, geomId);
const positions = new BufferAttribute(vertices, 3);
// Transform coordinates to EPSG 3857
const vertices3857 = new Float32Array(vertices.length);
for (let i = 0; i < vertices.length; i += 3) {
const vertex = Array.from(vertices.slice(i, i + 3));
vertices3857.set(transform(vertex), i);
}
const positions = new BufferAttribute(vertices3857, 3);
geometry.setAttribute("position", positions);
const indexArray = await fetchTriangleIndices(TRIANGLE_INDICES_URL, geomId);

2
app/three/utils/build-scene.ts
View file

@ -64,7 +64,7 @@ export function buildScene(container: HTMLElement, extent: Extent) {
maxSize * 25
);
camera.position.set(center.x, center.y - 125000, extent.zmax + 100000);
camera.position.set(center.x, center.y - 200000, extent.zmax + 100000);
camera.up.set(0, 0, 1);
camera.lookAt(center);

0
app/three/utils/parsers.ts → app/three/utils/decoders.ts
View file

13
app/three/utils/utils.ts
View file

@ -1,6 +1,7 @@
import { Vector3 } from "three";
import { Extent } from "./build-scene";
import { unpackEdges, unpackVertices } from "./parsers";
import { unpackEdges, unpackVertices } from "./decoders";
import proj4 from "proj4";
export function getMaxSize(extent: Extent) {
return Math.max(
@ -54,3 +55,13 @@ export async function fetchVertices(pointUrl: string, geomId: string) {
const buffer = await request(url);
return unpackVertices(buffer);
}
// Transformation from EPSG 3034 to EPSG 3857
const SOURCE = "EPSG:3034";
const PROJ_STRING =
"+proj=lcc +lat_0=52 +lon_0=10 +lat_1=35 +lat_2=65 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs";
const DEST = "EPSG:3857";
proj4.defs(SOURCE, PROJ_STRING);
export function transform(p: number[]) {
return proj4(SOURCE, DEST, p);
}