feat(#13): set up minimap

src/MiniMap/miniMap.js

@@ -0,0 +1,92 @@
+export function initMiniMap(viewer) {
+  const map = viewer.mapView.map
+  const layers = map.getLayers()
+
+  replaceMiniMapLayers(layers)
+
+  overrideMapViewUpdate(viewer)
+
+  // Transform minimap center [lon, lat] from EPSG:4326 to EPSG:3857
+  const center = proj4('EPSG:4326', 'EPSG:3857', [2, 69])
+  map.getView().setCenter(center)
+}
+
+function replaceMiniMapLayers(layers) {
+  // Remove the old Open Street Map layer
+  const oldOSMLayer = layers.item(0)
+  layers.remove(oldOSMLayer)
+
+  // Add new offline GeoJSON layer
+  const newGeojsonLayer = new ol.layer.Vector({
+    source: new ol.source.Vector({
+      url: '/data/geo/world_simplified.geojson',
+      format: new ol.format.GeoJSON()
+    })
+  })
+  layers.insertAt(0, newGeojsonLayer)
+
+  // Remove the extent layer
+  const extentLayer = layers.item(6)
+  layers.remove(extentLayer)
+}
+
+function overrideMapViewUpdate(viewer) {
+  const Vector3 = THREE.Vector3
+  const Vector2 = THREE.Vector2
+  viewer.mapView.update = function (delta) {
+    if (!this.sceneProjection) {
+      return
+    }
+
+    let pm = $('#potree_map')
+
+    if (!this.enabled) {
+      return
+    }
+
+    let mapSize = this.map.getSize()
+    let resized = pm.width() !== mapSize[0] || pm.height() !== mapSize[1]
+    if (resized) {
+      this.map.updateSize()
+    }
+
+    let camera = this.viewer.scene.getActiveCamera()
+
+    let scale = this.map.getView().getResolution()
+    let campos = camera.position
+    let camdir = camera.getWorldDirection(new Vector3())
+    let sceneLookAt = camdir
+      .clone()
+      .multiplyScalar(30 * scale)
+      .add(campos)
+    let geoPos = camera.position
+    let geoLookAt = sceneLookAt
+
+    // Include z-coordinate to handle EPSG:4978 properly
+    let mapPos = new Vector2().fromArray(
+      this.toMap.forward([geoPos.x, geoPos.y, geoPos.z])
+    )
+    let mapLookAt = new Vector2().fromArray(
+      this.toMap.forward([geoLookAt.x, geoLookAt.y, geoLookAt.z])
+    )
+
+    // Reverse direction so pointer faces correct way
+    let mapDir = new Vector2().subVectors(mapPos, mapLookAt).normalize()
+
+    mapLookAt = mapPos.clone().add(mapDir.clone().multiplyScalar(30 * scale))
+    let mapLength = mapPos.distanceTo(mapLookAt)
+    let mapSide = new Vector2(-mapDir.y, mapDir.x)
+
+    let p1 = mapPos.toArray()
+    let p2 = mapLookAt
+      .clone()
+      .sub(mapSide.clone().multiplyScalar(0.3 * mapLength))
+      .toArray()
+    let p3 = mapLookAt
+      .clone()
+      .add(mapSide.clone().multiplyScalar(0.3 * mapLength))
+      .toArray()
+
+    this.gCamera.setCoordinates([p1, p2, p3, p1])
+  }
+}

src/potreeViewer.js

@@ -1,5 +1,6 @@
 import { initAnnotationsPanel } from './AnnotationControl/annotationPanel.js'
 import { initMeasurementsPanel } from './MeasurementControl/measurementsPanel.js'
+import { initMiniMap } from './MiniMap/miniMap.js'
 import {
   initThreePanels,
   toggleAcceptedLegend
@@ -64,6 +65,7 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
 
     initMeasurementsPanel(viewer)
     initAnnotationsPanel(viewer)
+    initMiniMap(viewer)
   })
 
   const e = await Potree.loadPointCloud(pointcloudUrl)
@@ -89,7 +91,7 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
 
   // Initialize camera position and target point (manually chosen)
   viewer.scene.view.setView(
-    [3961574.044, 1494736.334, 8348318.575], // Initial camera position
+    [4094989.813, 59057.337, 8363694.681], // Initial camera position
     [1500922.651, 510673.03, 5427934.722] // Initial target point
   )