forked from viamrobotics/prime
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
@prime/blocks: adapt navigation map components into generic maplibre …
…tools (viamrobotics#543)
- Loading branch information
1 parent
66a98b0
commit ea44009
Showing
32 changed files
with
1,701 additions
and
618 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!-- | ||
| @component | ||
| Adds controls for following a lat, lng point on a map. | ||
| --> | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| import { Button, Icon } from '@viamrobotics/prime-core'; | ||
| import { useMapLibre } from '../hooks'; | ||
| /** The map point to follow */ | ||
| export let lng: number | undefined = undefined; | ||
| export let lat: number | undefined = undefined; | ||
| export let onChange: ((following: boolean) => void) | undefined = undefined; | ||
| let following = false; | ||
| const { map } = useMapLibre(); | ||
| let rafID = 0; | ||
| const follow = () => { | ||
| if (lng && lat && following) { | ||
| map.setCenter([lng, lat]); | ||
| rafID = requestAnimationFrame(follow); | ||
| } | ||
| }; | ||
| const stop = () => { | ||
| cancelAnimationFrame(rafID); | ||
| following = false; | ||
| }; | ||
| $: if (following) { | ||
| requestAnimationFrame(follow); | ||
| } | ||
| onMount(() => { | ||
| map.on('wheel', stop); | ||
| map.on('mousedown', stop); | ||
| return () => { | ||
| cancelAnimationFrame(rafID); | ||
| map.off('wheel', stop); | ||
| map.off('mousedown', stop); | ||
| }; | ||
| }); | ||
| </script> | ||
|
|
||
| <Button | ||
| disabled={lng === undefined || lat === undefined} | ||
| on:click={(event) => { | ||
| event.stopPropagation(); | ||
| following = !following; | ||
| onChange?.(following); | ||
| }} | ||
| > | ||
| <Icon | ||
| name={following ? 'navigation-variant' : 'navigation-variant-outline'} | ||
| /> | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/blocks/src/lib/maplibre/controls/satellite.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!-- | ||
| @component | ||
| Adds controls for toggling between a satellite and map view. | ||
| --> | ||
| <script lang="ts"> | ||
| import { Button } from '@viamrobotics/prime-core'; | ||
| import { useMapLibre } from '../hooks'; | ||
| export let satellite = false; | ||
| const { map } = useMapLibre(); | ||
| const onClick = () => { | ||
| satellite = !satellite; | ||
| map.setLayoutProperty( | ||
| 'satellite', | ||
| 'visibility', | ||
| satellite ? 'visible' : 'none' | ||
| ); | ||
| }; | ||
| </script> | ||
|
|
||
| <Button on:click={onClick}> | ||
| {satellite ? 'Map' : 'Satellite'} | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
8 changes: 1 addition & 7 deletions
8
...blocks/src/lib/navigation-map/lib/math.ts → packages/blocks/src/lib/maplibre/math.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { onMount } from 'svelte'; | ||
| import { type Camera, type Raycaster, Vector2, Vector3, Matrix4 } from 'three'; | ||
| import type { MapMouseEvent } from 'maplibre-gl'; | ||
| import { useMapLibre } from '../hooks'; | ||
|
|
||
| /** | ||
| * Provides raycasting against THREE objects projected on to a maplibre map. | ||
| */ | ||
| export const useMapLibreThreeRaycast = (cameraSignal: { current: Camera }) => { | ||
| const { map } = useMapLibre(); | ||
| const pointer = new Vector2(); | ||
|
|
||
| const handleMouseMove = (event: MapMouseEvent) => { | ||
| pointer.set( | ||
| (event.point.x / map.transform.width) * 2 - 1, | ||
| -(event.point.y / map.transform.height) * 2 + 1 | ||
| ); | ||
| }; | ||
|
|
||
| onMount(() => { | ||
| map.on('mousemove', handleMouseMove); | ||
| return () => map.off('mousemove', handleMouseMove); | ||
| }); | ||
|
|
||
| const cameraPosition = new Vector3(); | ||
| const mousePosition = new Vector3(); | ||
| const viewDirection = new Vector3(); | ||
| const camInverseProjection = new Matrix4(); | ||
|
|
||
| const compute = (raycaster: Raycaster) => { | ||
| camInverseProjection.copy(cameraSignal.current.projectionMatrix).invert(); | ||
| cameraPosition.set(0, 0, 0).applyMatrix4(camInverseProjection); | ||
| mousePosition | ||
| .set(pointer.x, pointer.y, 1) | ||
| .applyMatrix4(camInverseProjection); | ||
| viewDirection.copy(mousePosition).sub(cameraPosition).normalize(); | ||
|
|
||
| raycaster.set(cameraPosition, viewDirection); | ||
| }; | ||
|
|
||
| return { compute, pointer }; | ||
| }; |
Oops, something went wrong.