Skip to content

Commit

Permalink
BGDIINF_SB-3060 : persistence of selected feature when going 3D
Browse files Browse the repository at this point in the history 
and also when going from 3D to 2D, the selected features stay selected, and the popup now shows directly at OL or Cesium startup
  • Loading branch information
@pakb
pakb committed Aug 21, 2023
1 parent f3dc6ca commit 20d077a
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 48 deletions.
10 changes: 5 additions & 5 deletions src/modules/map/components/MapPopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,16 @@
<slot />
</div>
</div>
<OpenLayersPopover v-if="!is3DActive" :coordinates="coordinates"></OpenLayersPopover>
<CesiumPopover v-if="is3DActive" :coordinates="coordinates"></CesiumPopover>
</div>
<OpenLayersPopover v-if="!is3DActive" :coordinates="coordinates"></OpenLayersPopover>
<CesiumPopover v-if="is3DActive" :coordinates="coordinates"></CesiumPopover>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import promptUserToPrintHtmlContent from '@/utils/print'
import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
import promptUserToPrintHtmlContent from '@/utils/print'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { mapState } from 'vuex'
/** Map popover content and styles. Position handling is done in corresponding library components */
Expand Down
113 changes: 76 additions & 37 deletions src/modules/map/components/cesium/CesiumMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
/>
</div>
<MapPopover
v-if="showFeaturesPopover"
v-if="viewerCreated && showFeaturesPopover"
:coordinates="popoverCoordinates"
authorize-print
:use-content-padding="!!editFeature"
Expand Down Expand Up @@ -78,10 +78,13 @@ import log from '@/utils/logging'
import '@geoblocks/cesium-compass'
import * as cesium from 'cesium'
import {
Cartesian2,
Cartesian3,
Cartographic,
CesiumTerrainProvider,
Color,
defined,
Ellipsoid,
Math as CesiumMath,
RequestScheduler,
ScreenSpaceEventType,
Expand Down Expand Up @@ -139,6 +142,8 @@ export default {
previewYear: (state) => state.layers.previewYear,
isFeatureTooltipInFooter: (state) => !state.ui.floatingTooltip,
selectedFeatures: (state) => state.features.selectedFeatures,
viewportWidth: (state) => state.ui.width,
viewportHeight: (state) => state.ui.height,
}),
...mapGetters(['centerEpsg4326', 'resolution', 'hasDevSiteWarning', 'visibleLayers']),
isDesktopMode() {
Expand Down Expand Up @@ -170,41 +175,7 @@ export default {
// coordinates are changed (but only when one feature is added/removed)
handler(newSelectedFeatures) {
if (newSelectedFeatures.length > 0) {
const [firstFeature] = newSelectedFeatures
const geometries = newSelectedFeatures.map((f) => {
// GeoJSON and KML layers have different geometry structure
if (!f.geometry.type) {
let type = undefined
if (f.geometry instanceof Polygon) {
type = 'Polygon'
} else if (f.geometry instanceof LineString) {
type = 'LineString'
} else if (f.geometry instanceof Point) {
type = 'Point'
}
const coordinates = f.geometry.getCoordinates()
const getCoordinates = (c) =>
isInBounds(c[0], c[1], LV95_BOUNDS)
? proj4(LV95.epsg, WEBMERCATOR.epsg, c)
: c
return {
type,
coordinates:
typeof coordinates[0] === 'number'
? getCoordinates(coordinates)
: coordinates.map(getCoordinates),
}
}
return f.geometry
})
highlightGroup(this.viewer, geometries)
const featureCoords = Array.isArray(firstFeature.coordinates[0])
? firstFeature.coordinates[firstFeature.coordinates.length - 1]
: firstFeature.coordinates
this.popoverCoordinates = reprojectUnknownSrsCoordsToWebMercator(
featureCoords[0],
featureCoords[1]
)
this.highlightSelectedFeatures()
}
},
deep: true,
Expand Down Expand Up @@ -274,6 +245,10 @@ export default {
this.onClick,
ScreenSpaceEventType.LEFT_CLICK
)
this.viewer.screenSpaceEventHandler.setInputAction(
this.onRightClick,
ScreenSpaceEventType.RIGHT_CLICK
)
const globe = scene.globe
globe.baseColor = Color.TRANSPARENT
Expand All @@ -294,14 +269,41 @@ export default {
this.flyToPosition()
if (this.selectedFeatures.length > 0) {
this.highlightSelectedFeatures()
}
if (IS_TESTING_WITH_CYPRESS) {
window.cesiumViewer = this.viewer
// reduce screen space error to downgrade visual quality but speed up tests
globe.maximumScreenSpaceError = 30
}
},
beforeUnmount() {
this.clearAllSelectedFeatures()
const ray = this.viewer.camera.getPickRay(
new Cartesian2(
Math.round(this.viewer.scene.canvas.clientWidth / 2),
Math.round(this.viewer.scene.canvas.clientHeight / 2)
)
)
const cameraTarget = this.viewer.scene.globe.pick(ray, this.viewer.scene)
if (defined(cameraTarget)) {
const cartographic = Ellipsoid.WGS84.cartesianToCartographic(cameraTarget)
const height = cartographic.height
const range = Cartesian3.distance(cameraTarget, this.viewer.camera.position)
console.log(
'camera is looking at',
CesiumMath.toDegrees(cartographic.latitude).toFixed(2),
CesiumMath.toDegrees(cartographic.longitude).toFixed(2),
'height:',
height.toFixed(2),
'range:',
range.toFixed(2)
)
} else {
console.log('Looking at space?')
}
},
unmounted() {
this.setCameraPosition(null)
Expand All @@ -315,6 +317,43 @@ export default {
'click',
'toggleFloatingTooltip',
]),
highlightSelectedFeatures() {
const [firstFeature] = this.selectedFeatures
const geometries = this.selectedFeatures.map((f) => {
// GeoJSON and KML layers have different geometry structure
if (!f.geometry.type) {
let type = undefined
if (f.geometry instanceof Polygon) {
type = 'Polygon'
} else if (f.geometry instanceof LineString) {
type = 'LineString'
} else if (f.geometry instanceof Point) {
type = 'Point'
}
const coordinates = f.geometry.getCoordinates()
const getCoordinates = (c) =>
isInBounds(c[0], c[1], LV95_BOUNDS)
? proj4(LV95.epsg, WEBMERCATOR.epsg, c)
: c
return {
type,
coordinates:
typeof coordinates[0] === 'number'
? getCoordinates(coordinates)
: coordinates.map(getCoordinates),
}
}
return f.geometry
})
highlightGroup(this.viewer, geometries)
const featureCoords = Array.isArray(firstFeature.coordinates[0])
? firstFeature.coordinates[firstFeature.coordinates.length - 1]
: firstFeature.coordinates
this.popoverCoordinates = reprojectUnknownSrsCoordsToWebMercator(
featureCoords[0],
featureCoords[1]
)
},
flyToPosition() {
const x = this.camera ? this.camera.x : this.centerEpsg4326[0]
const y = this.camera ? this.camera.y : this.centerEpsg4326[1]
Expand Down
3 changes: 3 additions & 0 deletions src/modules/map/components/cesium/CesiumPopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
</template>

<script>
import log from '@/utils/logging'
import { Cartesian3, Cartographic, defined, Ellipsoid, SceneTransforms } from 'cesium'
// Cesium will create an instance of Cartesian3 or Cartographic each time a calculation is made if
Expand Down Expand Up @@ -54,6 +55,8 @@ export default {
// there will be a gap between the tooltip and the selected feature
this.updateCoordinateHeight()
this.updatePosition()
} else {
log.error('Cesium viewer unavailable, could not hook up popover to Cesium')
}
},
unmounted() {
Expand Down
19 changes: 13 additions & 6 deletions src/modules/map/components/openlayers/OpenLayersMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,11 @@ import {
import { extractOlFeatureGeodesicCoordinates } from '@/modules/drawing/lib/drawingUtils'
import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
import FeatureList from '@/modules/infobox/components/FeatureList.vue'
import MapPopover from '@/modules/map/components/MapPopover.vue'
import OpenLayersVectorLayer from '@/modules/map/components/openlayers/OpenLayersVectorLayer.vue'
import { ClickInfo, ClickType } from '@/store/modules/map.store'
import { CrossHairs } from '@/store/modules/position.store'
import { createGeoJSONFeature } from '@/utils/layerUtils'
import log from '@/utils/logging'
import { round } from '@/utils/numberUtils'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Expand All @@ -139,8 +141,6 @@ import OpenLayersAccuracyCircle from './OpenLayersAccuracyCircle.vue'
import OpenLayersHighlightedFeature from './OpenLayersHighlightedFeature.vue'
import OpenLayersInternalLayer from './OpenLayersInternalLayer.vue'
import OpenLayersMarker, { markerStyles } from './OpenLayersMarker.vue'
import { createGeoJSONFeature } from '@/utils/layerUtils'
import MapPopover from '@/modules/map/components/MapPopover.vue'
/**
* Main OpenLayers map component responsible for building the OL map instance and telling the view
Expand Down Expand Up @@ -325,10 +325,7 @@ export default {
// coordinates are changed (but only when one feature is added/removed)
handler(newSelectedFeatures) {
if (newSelectedFeatures.length > 0) {
const [firstFeature] = newSelectedFeatures
this.popoverCoordinates = Array.isArray(firstFeature.coordinates[0])
? firstFeature.coordinates[firstFeature.coordinates.length - 1]
: firstFeature.coordinates
this.highlightSelectedFeatures()
}
},
deep: true,
Expand Down Expand Up @@ -379,6 +376,10 @@ export default {
this.map.on('singleclick', this.onMapSingleClick)
this.map.on('pointerdrag', this.onMapPointerDrag)
this.map.on('moveend', this.onMapMoveEnd)
if (this.selectedFeatures.length > 0) {
this.highlightSelectedFeatures()
}
},
unmounted() {
this.map.un('pointerdown', this.onMapPointerDown)
Expand All @@ -403,6 +404,12 @@ export default {
'toggleFloatingTooltip',
'clearAllSelectedFeatures',
]),
highlightSelectedFeatures() {
const [firstFeature] = this.selectedFeatures
this.popoverCoordinates = Array.isArray(firstFeature.coordinates[0])
? firstFeature.coordinates[firstFeature.coordinates.length - 1]
: firstFeature.coordinates
},
// Pointer down and up are triggered by both left and right clicks.
onMapPointerDown() {
/* Flag that inhibits multiple actions for the same mouse down event. So if on mobile,
Expand Down

0 comments on commit 20d077a

Please sign in to comment.