-
-
-
+
+
+
Latitude:
+
Longitude:
+
Elevation:
diff --git a/src/CoordinateShowing/coordinateShowing.css b/src/CoordinateShowing/coordinateShowing.css
new file mode 100644
index 0000000..64dedf3
--- /dev/null
+++ b/src/CoordinateShowing/coordinateShowing.css
@@ -0,0 +1,34 @@
+#coordinatesContainer {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ right: 10px;
+ bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ z-index: 10;
+ background-color: #19282c;
+ width: auto;
+ height: auto;
+}
+
+#coordinatesHeader {
+ color: #cccccc;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ line-height: 0.75;
+ position: relative;
+ height: min-content;
+ margin: 0;
+ padding-bottom: 20px;
+ font-weight: bold;
+}
+#latitude,
+#longitude,
+#elevation {
+ color: #cccccc;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 18px;
+ position: relative;
+ margin: 0;
+}
diff --git a/src/CoordinateShowing/coordinateShowing.js b/src/CoordinateShowing/coordinateShowing.js
new file mode 100644
index 0000000..9845bd3
--- /dev/null
+++ b/src/CoordinateShowing/coordinateShowing.js
@@ -0,0 +1,53 @@
+import { ecef } from '../config.js'
+import { wgs84 } from '../config.js'
+
+const latitudeText = document.getElementById('latitude')
+const longitudeText = document.getElementById('longitude')
+const elevationText = document.getElementById('elevation')
+const coordinatesContainer = document.getElementById('coordinatesContainer')
+
+let isRightClick = false
+
+/** Sets up a right-click listener on the Potree viewer to toggle updates of coordinate display.
+ * Makes sure coordinates are only updated when not right-clicking.
+ * @param potreeViewer - The Potree viewer instance
+ */
+export function setupRightClickListener(potreeViewer) {
+ const viewerElement = potreeViewer.renderer.domElement
+
+ viewerElement.addEventListener('mousedown', (event) => {
+ if (event.button === 2) {
+ isRightClick = true
+ }
+ })
+
+ viewerElement.addEventListener('dblclick', (event) => {
+ if (event.button === 0) {
+ isRightClick = false
+ }
+ })
+}
+
+/**
+ * Updates the displayed target point coordinates based on the point
+ */
+export function updateText() {
+ if (!isRightClick) {
+ const pivot = window.potreeViewer.scene.view.getPivot()
+ const controls = window.potreeViewer.getControls()
+ const [lon, lat, elevation] = proj4(ecef, wgs84, [
+ pivot.x,
+ pivot.y,
+ pivot.z
+ ])
+
+ if (controls === window.potreeViewer.orbitControls) {
+ coordinatesContainer.style.display = 'inline'
+ latitudeText.textContent = `Latitude = ${lat.toFixed(4)}˚`
+ longitudeText.textContent = `Longitude = ${lon.toFixed(4)}˚`
+ elevationText.textContent = `Elevation = ${elevation.toFixed(4)}m`
+ } else {
+ coordinatesContainer.style.display = 'none'
+ }
+ }
+}
diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css
deleted file mode 100644
index 0a8ac75..0000000
--- a/src/coordinateShowing/coordinateShowing.css
+++ /dev/null
@@ -1,26 +0,0 @@
-#canvasContainer {
- display: flex;
- flex-direction: column;
- position: absolute;
- right: 10px;
- bottom: 10px;
-}
-
-#posCanvas {
- position: relative;
- width: 300px;
- height: 50px;
- background-color: #19282c;
- z-index: 10;
- border-radius: 5px;
-}
-
-#elevationCanvas {
- position: relative;
- width: 300px;
- height: 50px;
- background-color: #19282c;
- z-index: 10;
- margin-bottom: 10px;
- border-radius: 5px;
-}
diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js
deleted file mode 100644
index 8045cd0..0000000
--- a/src/coordinateShowing/coordinateShowing.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ecef } from '../config.js'
-import { wgs84 } from '../config.js'
-
-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 initCoordinateCanvases() {
- 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 coordinates.
- */
-export function updateCoordinateText() {
- 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'
- }
-}
diff --git a/src/main.js b/src/main.js
index aaa415a..462edd4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,8 @@ import { createCesiumViewer } from './cesiumViewer.js'
import { createPotreeViewer } from './potreeViewer.js'
import { syncCameras } from './cameraSync.js'
import {
- initCoordinateCanvases,
- updateCoordinateText,
- updateTargetElevation
+ updateText,
+ setupRightClickListener
} from './CoordinateShowing/coordinateShowing.js'
async function init() {
@@ -17,12 +16,8 @@ async function init() {
POTREE_SETTINGS
)
- initCoordinateCanvases()
-
- potreeViewer.addEventListener('update', updateCoordinateText)
- potreeViewer.addEventListener('update', updateTargetElevation)
-
- window.addEventListener('resize', initCoordinateCanvases)
+ potreeViewer.addEventListener('camera_changed', updateText)
+ setupRightClickListener(potreeViewer)
function loop(timestamp) {
requestAnimationFrame(loop)