10 show coordinates on screen

index.html

@@ -23,12 +23,17 @@
       type="text/css"
       href="/libs/jstree/themes/mixed/style.css"
     />
+    <link rel="stylesheet" type="text/css" href="src/style.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="src/coordinateShowing/coordinateShowing.css"
+    />
     <link
       rel="stylesheet"
       type="text/css"
       href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
     />
-    <link rel="stylesheet" type="text/css" href="src/style.css" />
   </head>
 
   <body>
@@ -45,8 +50,10 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
     <script src="/libs/Cesium/Cesium.js"></script>
 
+
     <div
       class="potree_container"
       style="
@@ -60,6 +67,8 @@
     >
       <div id="potree_render_area">
         <div id="cesiumContainer"></div>
+        <canvas id="posCanvas" width="200" height="30"></canvas>
+        <canvas id="elevationCanvas" width="200" height="30"></canvas>
       </div>
       <div id="potree_sidebar_container"></div>
     </div>

src/coordinateShowing/coordinateShowing.css

@@ -0,0 +1,23 @@
+#posCanvas {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  width: 300px;
+  height: 50px;
+  pointer-events: none;
+  background-color: #19282c;
+  z-index: 10;
+  border-radius: 5px;
+}
+
+#elevationCanvas {
+  position: absolute;
+  right: 100px;
+  top: 15px;
+  width: 300px;
+  height: 50px;
+  pointer-events: none;
+  background-color: #19282c;
+  z-index: 10;
+  border-radius: 5px;
+}

src/coordinateShowing/coordinateShowing.js

@@ -0,0 +1,80 @@
+const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates)
+const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates)
+
+const posCanvas = document.getElementById('posCanvas') // lat/lon
+const elevationCanvas = document.getElementById('elevationCanvas')
+
+export let posCtx
+export let elevationCtx
+
+/**
+ * Initializes the canvases and their contexts.
+ */
+export function initCanvases() {
+  posCtx = resizeCanvas(posCanvas)
+  elevationCtx = resizeCanvas(elevationCanvas)
+}
+
+/**
+ * Resizes the canvas and its context to account for device pixel ratio.
+ * @param {*} canvas - The canvas element to resize.
+ * @returns {*} - The resized canvas context.
+ */
+function resizeCanvas(canvas) {
+  const dpr = window.devicePixelRatio || 1
+  const ctx = canvas.getContext('2d')
+
+  canvas.width = canvas.clientWidth * dpr
+  canvas.height = canvas.clientHeight * dpr
+
+  // Scale context so drawing uses CSS pixels
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return ctx
+}
+
+/**
+ * Draw the text on a given canvas.
+ */
+function drawText(ctx, text, canvas) {
+  const centerX = canvas.clientWidth / 2
+  const centerY = canvas.clientHeight / 2
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = '#cccccc'
+  ctx.font = '20px Arial'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(text, centerX, centerY)
+}
+
+/**
+ * Updates the lat/lon position.
+ */
+export function updatePosition() {
+  const cam = window.potreeViewer.scene.view.position
+  const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z])
+  drawText(
+    posCtx,
+    `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`,
+    posCanvas
+  )
+}
+
+/**
+ * Shows target elevations if camera is in orbit mode.
+ */
+export function updateTargetElevation() {
+  const pivot = window.potreeViewer.scene.view.getPivot()
+  const controls = window.potreeViewer.getControls()
+  const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]
+
+  if (controls === window.potreeViewer.orbitControls) {
+    elevationCanvas.style.display = 'inline'
+    drawText(
+      elevationCtx,
+      `Target elevation = ${height.toFixed(4)}m`,
+      elevationCanvas
+    )
+  } else {
+    elevationCanvas.style.display = 'none'
+  }
+}

src/main.js

@@ -2,6 +2,11 @@ import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js'
 import { createCesiumViewer } from './cesiumViewer.js'
 import { createPotreeViewer } from './potreeViewer.js'
 import { syncCameras } from './cameraSync.js'
+import {
+  initCanvases,
+  updatePosition,
+  updateTargetElevation
+} from './coordinateShowing/coordinateShowing.js'
 
 async function init() {
   window.cesiumViewer = createCesiumViewer('cesiumContainer')
@@ -12,6 +17,13 @@ async function init() {
     POTREE_SETTINGS
   )
 
+  initCanvases()
+
+  potreeViewer.addEventListener('update', updatePosition)
+  potreeViewer.addEventListener('update', updateTargetElevation)
+
+  window.addEventListener('resize', initCanvases)
+
   function loop(timestamp) {
     requestAnimationFrame(loop)
     potreeViewer.update(potreeViewer.clock.getDelta(), timestamp)