GSREN3D-161: Station Primitives & Arcs

package.json

@@ -29,7 +29,7 @@
  "dependencies": {
  "@heroicons/vue": "^2.0.11",
  "@pinia/testing": "^0.0.14",
- "@vcmap/core": "^5.0.0-rc.23",
+ "@vcmap/core": "git://git@github.com/virtualcitySYSTEMS/map-core.git",
  "ol": "^7.1.0",
  "pinia": "^2.0.21",
  "rollup-plugin-strip-pragma": "^1.0.0",

src/components/map/MapComponent.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { useLayersStore } from '@/stores/layers'
-import { CesiumMap, Context, VcsApp } from '@vcmap/core'
-import { onMounted, provide, ref } from 'vue'
+import { useStationsStore } from '@/stores/stations'
+import { CesiumMap, Context, VcsApp, EventType } from '@vcmap/core'
+import { onMounted, onUnmounted, provide, ref } from 'vue'
 import mapConfig from '../../map.config.json'
 import UiMap from '../ui/UiMap.vue'
 import NavigationButtons from './buttons/NavigationButtons.vue'
 import HeadToolbarTrambus from '@/components/map/HeadToolbarTrambus.vue'
+import SelectStationInteraction, {
+ explodeStationPOIs,
+} from '@/interactions/selectStation'
 
 const app = new VcsApp()
 provide('vcsApp', app)
 
 const appLoaded = ref(false)
 const layerStore = useLayersStore()
+const staionStore = useStationsStore()
 
 onMounted(async () => {
  const context = new Context(mapConfig)
@@ -21,9 +26,17 @@ onMounted(async () => {
  if (cesiumMap && cesiumMap instanceof CesiumMap) {
  cesiumMap.getScene().globe.maximumScreenSpaceError = 1
  }
+ app.maps.eventHandler.featureInteraction.setActive(EventType.CLICKMOVE)
+ app.maps.eventHandler.addPersistentInteraction(
+ new SelectStationInteraction('trambusStops')
+ )
  appLoaded.value = true
 })
 
+onUnmounted(() => {
+ app.destroy()
+})
+
 function setLayerVisible(layerName: string, visible: boolean) {
  const layer = app.maps.layerCollection.getByKey(layerName)
  if (visible) {
@@ -38,6 +51,10 @@ layerStore.$subscribe(() => {
  setLayerVisible('bus', layerStore.visibilities.bus)
  setLayerVisible('bike', layerStore.visibilities.bike)
 })
+
+staionStore.$subscribe(() => {
+ explodeStationPOIs(app, 'poi', staionStore.selectedStation)
+})
 </script>
 
 <template>

src/interactions/selectStation.ts

@@ -0,0 +1,155 @@
+import {
+ AbstractInteraction,
+ vcsLayerName,
+ EventType,
+ ModificationKeyType,
+ VectorLayer,
+ type InteractionEvent,
+ type VcsApp,
+ ArcStyle,
+ GeoJSONLayer,
+ markVolatile,
+ mercatorProjection,
+} from '@vcmap/core'
+import { useStationsStore } from '@/stores/stations'
+import { Feature } from 'ol'
+import { type Point, LineString } from 'ol/geom'
+import type { StationsModel } from '@/model/stations.model'
+import { DeclarativeStyleItem } from '@vcmap/core'
+
+class SelectStationInteraction extends AbstractInteraction {
+ private readonly _stationsLayerName: string
+
+ constructor(stationsLayerName: string) {
+ super(EventType.CLICKMOVE, ModificationKeyType.NONE)
+
+ this._stationsLayerName = stationsLayerName
+ }
+
+ async pipe(event: InteractionEvent): Promise<InteractionEvent> {
+ const isLayerFeature =
+ event.feature?.[vcsLayerName] === this._stationsLayerName
+
+ if (event.type & EventType.CLICK) {
+ const store = useStationsStore()
+ if (event.feature && isLayerFeature) {
+ store.selectStation(event.feature as Feature<Point>)
+ } else if (store.selectedStation) {
+ store.selectStation()
+ }
+ } else if (isLayerFeature) {
+ document.body.style.cursor = 'pointer'
+ } else {
+ document.body.style.cursor = 'auto'
+ }
+
+ return event
+ }
+}
+
+export default SelectStationInteraction
+
+const scratchPoiLayerName = '_poiScracthLayer'
+
+const scratchArcLayerName = '_poiArcLayer'
+
+const stationToPoi: Map<number, [Feature<Point>]> = new Map()
+
+function getPoisForStation(
+ stationId: number,
+ vcsApp: VcsApp
+): [Feature<Point>] | [] {
+ if (stationToPoi.size === 0) {
+ const stationsLayer = vcsApp.layers.getByKey('trambusStops') as GeoJSONLayer
+ const poiLayer = vcsApp.layers.getByKey('poi') as GeoJSONLayer
+ const source = stationsLayer.getSource()
+ const features = poiLayer.getFeatures() as [Feature<Point>]
+ features.map((poiFeature) => {
+ const geom = poiFeature.getGeometry() as Point
+ const station = source.getClosestFeatureToCoordinate(
+ geom.getCoordinates()
+ )
+
+ const stationId = station.get('id') as number
+ if (!stationToPoi.has(stationId)) {
+ stationToPoi.set(stationId, [poiFeature])
+ } else {
+ const featuresArray = stationToPoi.get(stationId) as [Feature<Point>]
+ featuresArray.push(poiFeature)
+ }
+ })
+ }
+ return stationToPoi.get(stationId) ?? []
+}
+
+function getScratchLayer(
+ app: VcsApp,
+ layerName: string,
+ arc?: boolean
+): VectorLayer {
+ if (app.layers.hasKey(layerName)) {
+ return app.layers.getByKey(layerName) as VectorLayer
+ }
+
+ const layer = new VectorLayer({
+ name: layerName,
+ projection: mercatorProjection.toJSON(),
+ })
+ if (arc) {
+ layer.setStyle(new ArcStyle())
+ } else {
+ layer.setStyle(
+ new DeclarativeStyleItem({
+ declarativeStyle: {
+ pointOutlineColor: "color('#6B23C9')",
+ pointOutlineWidth: '2',
+ labelText: {
+ conditions: [
+ ['${ordre}===1', "'${nom_site}'"],
+ ['true', "''"],
+ ],
+ },
+ labelOutlineColor: "color('#ffffff')",
+ labelColor: "color('#6B23C9')",
+ labelOutlineWidth: '2',
+ font: "'13px sans-serif'",
+ },
+ })
+ )
+ }
+ markVolatile(layer)
+ app.layers.add(layer)
+ layer.activate()
+ return layer
+}
+
+export async function explodeStationPOIs(
+ app: VcsApp,
+ poiLayerName: string,
+ station?: StationsModel | null
+): Promise<void> {
+ const poiScratchLayer = getScratchLayer(app, scratchPoiLayerName)
+ const arcLayer = getScratchLayer(app, scratchArcLayerName, true)
+ poiScratchLayer.removeAllFeatures()
+ arcLayer.removeAllFeatures()
+ if (station) {
+ const poiLayer = app.layers.getByKey(poiLayerName) as GeoJSONLayer
+ if (poiLayer) {
+ await poiLayer.fetchData()
+ const features = getPoisForStation(station.id, app)
+ // TODO drape onto terrain
+ poiScratchLayer.addFeatures(features)
+ const arcFeatures = features.map((f) => {
+ const geometry = f.getGeometry() as Point
+ const lineString = new LineString([
+ station.position,
+ geometry.getCoordinates(),
+ ])
+ return new Feature(lineString)
+ })
+ arcLayer.addFeatures(arcFeatures)
+ } else {
+ console.warn(`Could not find POI layer with name: ${poiLayerName}`)
+ }
+ }
+}

src/map.config.json

@@ -164,7 +164,20 @@
  }
  }
  },
- "activeOnStartup": false
+ "vectorProperties": {
+ "primitiveOptions": {
+ "type": "ellipsoid",
+ "geometryOptions": {
+ "radii": [5, 5, 5],
+ "innerRadii": [0.000001, 0.000001, 0.000001],
+ "minimumCone": 1.54,
+ "maximumCone": 1.58
+ },
+ "offset": [0, 0, 0.1]
+ },
+ "modelAutoScale": true
+ },
+ "activeOnStartup": true
  },
  {
  "name": "parking",
@@ -184,7 +197,7 @@
  "name": "poi",
  "url": "https://gist.githubusercontent.com/ismailsunni/561f39f97f8e1a36491207a61224270c/raw/bb7ddd1c233760fb3cf8ce562f8a3302846ade57/POI.geojson",
  "type": "GeoJSONLayer",
- "activeOnStartup": true,
+ "activeOnStartup": false,
  "style": {
  "name": "poiStyle",
  "type": "DeclarativeStyleItem",

src/model/stations.model.ts

@@ -0,0 +1,48 @@
+import type { LineNumber } from '@/model/lines.model'
+import type { Feature } from 'ol'
+import type { Point } from 'ol/geom'
+import type { Coordinate } from 'ol/coordinate'
+
+export interface StationsModel {
+ id: number
+ version: string
+ trace_type: string // FIXME this is probably an enum
+ li_code: LineNumber
+ nom: string
+ position: Coordinate
+}
+
+function lineCodeFromString(stringLineCode: string): LineNumber {
+ if (stringLineCode === 'T1') {
+ return 1
+ }
+
+ if (stringLineCode === 'T2') {
+ return 2
+ }
+
+ if (stringLineCode === 'T3') {
+ return 3
+ }
+
+ return 4
+}
+
+export function getStationModelFromFeature(
+ feature: Feature<Point>
+): StationsModel {
+ const properties = feature.getProperties()
+ const geometry = feature.getGeometry()
+ if (!geometry) {
+ throw new Error('Cannot set station from a Feature without a geometry')
+ }
+
+ return {
+ id: properties.id,
+ version: properties.version,
+ trace_type: properties.trace_type,
+ li_code: lineCodeFromString(properties.li_code),
+ nom: properties.nom,
+ position: geometry.getCoordinates(),
+ }
+}

src/stores/stations.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Feature } from 'ol'
+import type { Point } from 'ol/geom'
+import {
+ type StationsModel,
+ getStationModelFromFeature,
+} from '@/model/stations.model'
+
+export const useStationsStore = defineStore('stores', () => {
+ const selectedStation: Ref<StationsModel | null> = ref(null)
+
+ function selectStation(stationFeature?: Feature<Point>) {
+ selectedStation.value = stationFeature
+ ? getStationModelFromFeature(stationFeature)
+ : null
+ }
+
+ return { selectStation, selectedStation }
+})