From 72166932f0b5967dd243faed1092aaaabbc6afa7 Mon Sep 17 00:00:00 2001
From: Ben Kuster <bkuster@virtualcitysystems.de>
Date: Wed, 19 Oct 2022 12:33:59 +0200
Subject: [PATCH] scale by distance POC

---
 src/components/map/MapComponent.vue           | 11 ++-
 .../vcmap/setDistanceDisplayCondition.ts      | 77 +++++++++++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/services/vcmap/setDistanceDisplayCondition.ts

diff --git a/src/components/map/MapComponent.vue b/src/components/map/MapComponent.vue
index 9bdda952..b3320a94 100644
--- a/src/components/map/MapComponent.vue
+++ b/src/components/map/MapComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useLayersStore } from '@/stores/layers'
 import { usePanelsStore } from '@/stores/panels'
-import { Context, VcsApp } from '@vcmap/core'
+import { Context, OpenlayersMap, VcsApp, VectorLayer } from '@vcmap/core'
 import { onMounted, provide, ref } from 'vue'
 import mapConfig from '../../map.config.json'
 import IconPlanning from '../ui/icons/IconPlanning.vue'
@@ -9,6 +9,7 @@ import UiButton from '../ui/UiButton.vue'
 import UiMap from '../ui/UiMap.vue'
 import NavigationButtons from './NavigationButtons.vue'
 import TransportButtons from './TransportButtons.vue'
+import setDistanceDisplayCondition from '@/services/vcmap/setDistanceDisplayCondition'
 
 const app = new VcsApp()
 provide('vcsApp', app)
@@ -20,6 +21,14 @@ const panelStore = usePanelsStore()
 onMounted(async () => {
   const context = new Context(mapConfig)
   await app.addContext(context)
+  const distanceLayer = app.layers.getByKey('poi')
+  const olMaps = app.maps.getByType('OpenlayersMap')
+  if (
+    distanceLayer instanceof VectorLayer &&
+    olMaps[0] instanceof OpenlayersMap
+  ) {
+    setDistanceDisplayCondition(distanceLayer, olMaps[0], 1200)
+  }
   appLoaded.value = true
 })
 
diff --git a/src/services/vcmap/setDistanceDisplayCondition.ts b/src/services/vcmap/setDistanceDisplayCondition.ts
new file mode 100644
index 00000000..cdad6b23
--- /dev/null
+++ b/src/services/vcmap/setDistanceDisplayCondition.ts
@@ -0,0 +1,77 @@
+import type { VectorLayer, OpenlayersMap } from '@vcmap/core'
+import { Projection } from '@vcmap/core'
+import type { Feature, Map as olMap } from 'ol'
+import { NearFarScalar, Math as CesiumMath } from '@vcmap/cesium'
+
+/**
+ * Calculates the camera distance based on the current viewport, view and resolution
+ * @param {number} resolution
+ * @param {import("ol").Map} map
+ */
+function getDistanceFromResolution(resolution: number, map: olMap): number {
+  const viewport = map.getViewport()
+  const size = {
+    height: viewport.offsetHeight || 1,
+    width: viewport.offsetWidth || 1,
+  }
+  const fov = Math.PI / 3.0
+  const aspectRatio = size.width / size.height
+  const fovy = Math.atan(Math.tan(fov * 0.5) / aspectRatio) * 2.0
+  const view = map.getView()
+  const metersPerUnit = view.getProjection().getMetersPerUnit() ?? 1
+
+  const visibleMapUnits = resolution * size.height
+  const wgs84Center = Projection.mercatorToWgs84(view.getCenter() ?? [0, 0])
+  const relativeCircumference = Math.cos(
+    Math.abs(CesiumMath.toRadians(wgs84Center[1]))
+  )
+  const visibleMeters = visibleMapUnits * metersPerUnit * relativeCircumference
+  return Math.abs(visibleMeters / 2 / Math.tan(fovy / 2))
+}
+
+/**
+ * Patches the layers style & sets the layers scaleByDistance so that the features in this layer
+ * are only shown based on a given distance. You can also set the property olcs_scaleByDistance on the
+ * feature to provide feature specific distances. if no distance is provided, only
+ * feature specific scaling will be applied
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {import("@vcmap/core").OpenlayersMap} map
+ * @param {number=} [distance]
+ */
+export default function setDistanceDisplayCondition(
+  layer: VectorLayer,
+  map: OpenlayersMap,
+  distance: number
+): void {
+  if (distance != null) {
+    layer.vectorProperties.scaleByDistance = new NearFarScalar(
+      distance - 1,
+      1,
+      distance,
+      0
+    )
+  }
+
+  const currentStyle = layer.style.style
+
+  layer.style.style = (feature: Feature, resolution: number) => {
+    let featureDistance = distance
+    const featureNearFar = feature.get('olcs_scaleByDistance') as
+      | NearFarScalar
+      | undefined
+    if (featureNearFar) {
+      featureDistance = featureNearFar.far
+    }
+    if (
+      featureDistance != null &&
+      getDistanceFromResolution(resolution, map.olMap) > featureDistance
+    ) {
+      return undefined
+    }
+
+    if (typeof currentStyle === 'function') {
+      return currentStyle(feature, resolution)
+    }
+    return currentStyle
+  }
+}