-
diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css
index 0a8ac75..7cb0148 100644
--- a/src/coordinateShowing/coordinateShowing.css
+++ b/src/coordinateShowing/coordinateShowing.css
@@ -1,26 +1,33 @@
-#canvasContainer {
+#coordinatesContainer {
+ position: absolute;
display: flex;
flex-direction: column;
- position: absolute;
right: 10px;
bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ z-index: 10;
+ background-color: #19282c;
+ width: auto;
+ height: auto;
}
-#posCanvas {
+#coordinatesHeader {
+ color: #cccccc;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ line-height: 0.75;
position: relative;
- width: 300px;
- height: 50px;
- background-color: #19282c;
- z-index: 10;
- border-radius: 5px;
+ height: min-content;
+ margin: 0;
+ padding-bottom: 20px;
+ font-weight: bold;
}
-
-#elevationCanvas {
+#coordinates {
+ color: #cccccc;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 18px;
+ line-height: 0.75;
position: relative;
- width: 300px;
- height: 50px;
- background-color: #19282c;
- z-index: 10;
- margin-bottom: 10px;
- border-radius: 5px;
+ margin: 0;
}
diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js
index 8045cd0..81bf6ba 100644
--- a/src/coordinateShowing/coordinateShowing.js
+++ b/src/coordinateShowing/coordinateShowing.js
@@ -1,80 +1,51 @@
import { ecef } from '../config.js'
import { wgs84 } from '../config.js'
-const posCanvas = document.getElementById('posCanvas') // lat/lon
-const elevationCanvas = document.getElementById('elevationCanvas')
+const coordinatesText = document.getElementById('coordinates')
+const coordinatesContainer = document.getElementById('coordinatesContainer')
-export let posCtx
-export let elevationCtx
+let isRightClick = false
-/**
- * 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.
+/** 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 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
- )
+export function setupRightClickListener(potreeViewer) {
+ const viewerElement = potreeViewer.renderer.domElement
+
+ viewerElement.addEventListener('mousedown', (event) => {
+ if (event.button === 2) {
+ isRightClick = true
+ }
+ })
+
+ viewerElement.addEventListener('mousedown', (event) => {
+ if (event.button === 0) {
+ isRightClick = false
+ }
+ })
}
/**
- * Shows target elevations if camera is in orbit mode.
+ * Updates the displayed target point coordinates based on the point
*/
-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'
+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'
+ coordinatesText.innerText = `Latitude = ${lat.toFixed(4)}˚
+ \n Longitude = ${lon.toFixed(4)}˚
+ \n Elevation = ${elevation.toFixed(4)}m`
+ } else {
+ coordinatesContainer.style.display = 'none'
+ }
}
}
diff --git a/src/main.js b/src/main.js
index aaa415a..b72a825 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,7 @@ async function init() {
POTREE_SETTINGS
)
- initCoordinateCanvases()
-
- potreeViewer.addEventListener('update', updateCoordinateText)
- potreeViewer.addEventListener('update', updateTargetElevation)
-
- window.addEventListener('resize', initCoordinateCanvases)
+ setupRightClickListener(potreeViewer)
function loop(timestamp) {
requestAnimationFrame(loop)
@@ -30,6 +24,7 @@ async function init() {
potreeViewer.render()
syncCameras(potreeViewer, cesiumViewer)
cesiumViewer.render()
+ updateText()
}
requestAnimationFrame(loop)