Skip to content

Commit

Permalink
Merge pull request #439 from geoadmin/feat_BGDIINF_SB-3059_location_p…
Browse files Browse the repository at this point in the history 
…opup_in_3D

BGDIINF_SB-3059 : add location popup for 3D
  • Loading branch information
@pakb
pakb authored Nov 10, 2023
2 parents b08fc84 + 470d69e commit e810ecd
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 30 deletions.
1 change: 1 addition & 0 deletions src/modules/map/MapModule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<CesiumMap v-if="is3DActive">
<!-- So that external modules can have access to the viewer instance through the provided 'getViewer' -->
<slot />
<LocationPopup />
</CesiumMap>
<OpenLayersMap v-else>
<!-- So that external modules can have access to the map instance through the provided 'getMap' -->
Expand Down
61 changes: 38 additions & 23 deletions src/modules/map/components/LocationPopup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
<template>
<OpenLayersPopover
<component
:is="mappingFrameworkSpecificPopup"
v-if="displayLocationPopup"
:title="$t('position')"
:coordinates="coordinate"
:projection="projection"
use-content-padding
class="location-popup"
data-cy="location-popup"
@close="onClose"
>
<div class="location-popup-coordinates">
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a :href="$t('contextpopup_lv95_url')" target="_blank">{{ LV95Format.label }}</a>
</div>
<div class="lp-data">
<div class="location-popup-coordinates-data">
<span data-cy="location-popup-coordinates-lv95">
{{ coordinateLV95 }}
</span>
<LocationPopupCopySlot :value="coordinateLV95" />
</div>
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a :href="$t('contextpopup_lv03_url')" target="_blank">{{ LV03Format.label }}</a>
</div>
<div class="lp-data">
<div class="location-popup-coordinates-data">
<span data-cy="location-popup-coordinates-lv03">
{{ coordinateLV03 }}
</span>
<LocationPopupCopySlot :value="coordinateLV03" />
</div>
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a href="https://epsg.io/4326" target="_blank">{{ WGS84Format.label }}</a>
</div>
<div class="lp-data">
<div class="location-popup-coordinates-data">
<span
class="location-popup-coordinates-wgs84-plain"
data-cy="location-popup-coordinates-plain-wgs84"
Expand All @@ -43,64 +45,71 @@
{{ coordinateWGS84 }}
</span>
</div>
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a href="https://epsg.io/32632" target="_blank">{{ UTMFormat.label }}</a>
</div>
<div class="lp-data">
<div class="location-popup-coordinates-data">
<span data-cy="location-popup-coordinates-utm">
{{ coordinateUTM }}
</span>
<LocationPopupCopySlot :value="coordinateUTM" />
</div>
<div class="lp-label">{{ 'MGRS' }}</div>
<div class="lp-data">
<div class="location-popup-coordinates-label">{{ 'MGRS' }}</div>
<div class="location-popup-coordinates-data">
<span data-cy="location-popup-coordinates-mgrs">
{{ coordinateMGRS }}
</span>
<LocationPopupCopySlot :value="coordinateMGRS" />
</div>
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a href="http://what3words.com/" target="_blank">what3words</a>
</div>
<div v-if="what3Words" class="lp-data what-3-words">
<div v-if="what3Words" class="location-popup-coordinates-data what-3-words">
<span v-show="what3Words" data-cy="location-popup-w3w">
{{ what3Words }}
</span>
<LocationPopupCopySlot :value="what3Words" />
</div>
<div v-else>-</div>
<div class="lp-label">
<div class="location-popup-coordinates-label">
<a :href="$t('elevation_href')" target="_blank">{{ $t('elevation') }}</a>
</div>
<div v-if="height" class="lp-data">
<div v-if="height" class="location-popup-coordinates-data">
<span data-cy="location-popup-height"> {{ heightInMeter }} m</span> /
<span>{{ heightInFeet }} ft</span>
<LocationPopupCopySlot :value="heightInMeter" />
</div>
<div v-else>-</div>
<div class="location-popup-link lp-label">
<div class="location-popup-link location-popup-coordinates-label">
{{ $t('share_link') }}
</div>
<div class="location-popup-link lp-data">
<div class="location-popup-link location-popup-coordinates-data">
<LocationPopupCopyInput
:value="shareLinkUrlDisplay"
data-cy="location-popup-link-bowl-crosshair"
/>
</div>
</div>
<div class="location-popup-qrcode">
<img v-if="qrCodeImageSrc" :src="qrCodeImageSrc" data-cy="location-popup-qr-code" />
<img
v-if="qrCodeImageSrc"
:src="qrCodeImageSrc"
alt="qrcode"
data-cy="location-popup-qr-code"
/>
</div>
</OpenLayersPopover>
</component>
</template>

<script>
import { requestHeight } from '@/api/height.api'
import { generateQrCode } from '@/api/qrcode.api'
import { createShortLink } from '@/api/shortlink.api'
import { registerWhat3WordsLocation } from '@/api/what3words.api'
import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
import LocationPopupCopyInput from '@/modules/map/components/LocationPopupCopyInput.vue'
import LocationPopupCopySlot from '@/modules/map/components/LocationPopupCopySlot.vue'
import MapPopover from '@/modules/map/components/MapPopover.vue'
import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
import {
LV03Format,
Expand All @@ -118,11 +127,10 @@ import { mapActions, mapState } from 'vuex'
/** Right click pop up which shows the coordinates of the position under the cursor. */
export default {
components: {
OpenLayersPopover,
MapPopover,
LocationPopupCopyInput,
LocationPopupCopySlot,
},
inject: ['getMap'],
data() {
return {
what3Words: '',
Expand All @@ -142,7 +150,14 @@ export default {
currentLang: (state) => state.i18n.lang,
displayLocationPopup: (state) => state.map.displayLocationPopup,
projection: (state) => state.position.projection,
showIn3d: (state) => state.ui.showIn3d,
}),
mappingFrameworkSpecificPopup() {
if (this.showIn3d) {
return CesiumPopover
}
return OpenLayersPopover
},
coordinate() {
return this.clickInfo?.coordinate
},
Expand Down Expand Up @@ -271,10 +286,10 @@ export default {
grid-column-gap: 8px;
font-size: 0.75rem;
grid-row-gap: 2px;
.lp-label {
&-label {
white-space: nowrap;
}
.lp-data.what-3-words {
&-data.what-3-words {
display: grid;
grid-template-columns: auto min-content;
span {
Expand Down
25 changes: 22 additions & 3 deletions src/modules/map/components/cesium/CesiumMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,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 Down Expand Up @@ -407,9 +411,7 @@ export default {
roll: CesiumMath.toDegrees(camera.roll).toFixed(0),
})
},
onClick(event) {
unhighlightGroup(this.viewer)
const features = []
getCoordinateAtMouseEvent(event) {
let coordinates = []
const cartesian = this.viewer.scene.pickPosition(event.position)
if (cartesian) {
Expand All @@ -421,6 +423,12 @@ export default {
} else {
log.error('no coordinate found under the mouse cursor', event)
}
return coordinates
},
onClick(event) {
unhighlightGroup(this.viewer)
const features = []
let coordinates = this.getCoordinateAtMouseEvent(event)
let objects = this.viewer.scene.drillPick(event.position)
const geoJsonFeatures = {}
Expand Down Expand Up @@ -482,6 +490,17 @@ export default {
)
)
},
onRightClick(event) {
const coordinates = this.getCoordinateAtMouseEvent(event)
this.click(
new ClickInfo(
coordinates,
[event.position.x, event.position.y],
[],
ClickType.CONTEXTMENU
)
)
},
onPopupClose() {
unhighlightGroup(this.viewer)
this.clearAllSelectedFeatures()
Expand Down
20 changes: 16 additions & 4 deletions src/modules/map/components/cesium/CesiumPopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@

<script>
import MapPopover from '@/modules/map/components/MapPopover.vue'
import CoordinateSystem from '@/utils/coordinates/CoordinateSystem.class'
import { WGS84 } from '@/utils/coordinates/coordinateSystems'
import log from '@/utils/logging'
import { Cartesian3, Cartographic, defined, Ellipsoid, SceneTransforms } from 'cesium'
import proj4 from 'proj4'
// Cesium will create an instance of Cartesian3 or Cartographic each time a calculation is made if
// we do not provide one, so here we declare two "buffer" instances that will be used throughout this component
Expand All @@ -37,6 +40,10 @@ export default {
type: Array,
required: true,
},
projection: {
type: CoordinateSystem,
required: true,
},
authorizePrint: {
type: Boolean,
default: false,
Expand All @@ -59,6 +66,11 @@ export default {
},
}
},
computed: {
wgs84Coordinates() {
return proj4(this.projection.epsg, WGS84.epsg, this.coordinates)
},
},
watch: {
coordinates() {
this.updateCoordinateHeight()
Expand Down Expand Up @@ -104,8 +116,8 @@ export default {
updateCoordinateHeight() {
this.coordinatesHeight = this.getViewer()?.scene.globe.getHeight(
Cartographic.fromDegrees(
this.coordinates[0],
this.coordinates[1],
this.wgs84Coordinates[0],
this.wgs84Coordinates[1],
0,
tempCartographic
)
Expand All @@ -119,8 +131,8 @@ export default {
const cartesianCoords = SceneTransforms.wgs84ToWindowCoordinates(
this.getViewer().scene,
Cartesian3.fromDegrees(
this.coordinates[0],
this.coordinates[1],
this.wgs84Coordinates[0],
this.wgs84Coordinates[1],
this.coordinatesHeight,
Ellipsoid.WGS84,
tempCartesian3
Expand Down

0 comments on commit e810ecd

Please sign in to comment.