diff --git a/README.md b/README.md index 01ab14a..110ed51 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ A collection of helpers and web component for working with [CesiumJS](https://ce * [cesium-first-person-mode](packages/FirstPersonCameraMode): a first person navigation mode that uses the Pointer Lock API * [cesium-sphere-camera](packages/cesium-sphere-camera): a camera mode that allows the user to rotate the camera around a position * [cesium-binoculars](packages/cesium-binoculars): a camera mode that allows the user to use binoculars with the mouse wheel +* [cesium-flyto](packages/cesium-flyto): a camera mode that allows the user to fly to a position ## Online demos @@ -22,6 +23,7 @@ npx parcel serve demos/cesium-view-cube.html --open npx parcel serve demos/cesium-first-person-mode.html --open npx parcel serve demos/cesium-sphere-camera.html --open npx parcel serve demos/cesium-binoculars.html --open +npx parcel serve demos/cesium-flyto.html --open ``` ## Guide diff --git a/demos/cesium-flyto.html b/demos/cesium-flyto.html new file mode 100644 index 0000000..d7b2f56 --- /dev/null +++ b/demos/cesium-flyto.html @@ -0,0 +1,28 @@ + + + + + + + + + + + +
+ + + + diff --git a/demos/index.html b/demos/index.html index c8c9d53..9dfd271 100644 --- a/demos/index.html +++ b/demos/index.html @@ -13,6 +13,7 @@
  • cesium-first-person-mode: a first person navigation mode that uses the Pointer Lock API
  • cesium-sphere-camera: a camera mode that allows the user to rotate the camera around a position
  • cesium-view-cube: a view cube widget
    • +
  • cesium-flyto:
    • diff --git a/packages/cesium-flyto/LICENSE b/packages/cesium-flyto/LICENSE new file mode 100644 index 0000000..b30ba70 --- /dev/null +++ b/packages/cesium-flyto/LICENSE @@ -0,0 +1,29 @@ +BSD 3-Clause License + +Copyright (c) 2024-present, camptocamp SA +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/packages/cesium-flyto/cesium-flyto.js b/packages/cesium-flyto/cesium-flyto.js new file mode 100644 index 0000000..b293e98 --- /dev/null +++ b/packages/cesium-flyto/cesium-flyto.js @@ -0,0 +1,39 @@ +import { ScreenSpaceEventType } from "@cesium/engine"; + +export default class CesiumFlyTo { + + /** + * @param {import('@cesium/engine').Viewer} viewer + * @param {ScreenSpaceEventType} [modifier=ScreenSpaceEventType.LEFT_DOUBLE_CLICK] + * @param {number} [height=300] + * @param {number} [duration] + */ + constructor(viewer, modifier = ScreenSpaceEventType.LEFT_DOUBLE_CLICK, height = 300, duration = undefined) { + this.viewer = viewer; + this.height = height; + this.duration = duration; + this.viewer.screenSpaceEventHandler.setInputAction(this.onInputAction.bind(this), modifier); + } + + onInputAction(movement) { + const scene = this.viewer.scene; + const ray = scene.camera.getPickRay(movement.position); + const intersection = scene.globe.pick(ray, scene); + if (intersection) { + const cartographic = scene.globe.ellipsoid.cartesianToCartographic(intersection); + // FIXME: instead of adding a fixed height, follow the ray to the intersection minus the height + cartographic.height += this.height; + const destination = scene.globe.ellipsoid.cartographicToCartesian(cartographic); + scene.camera.flyTo({ + destination: destination, + duration: this.duration, + orientation: { + // FIXME: use ray heading ? + heading: scene.camera.heading, + pitch: scene.camera.pitch, + roll: scene.camera.roll, + } + }); + } + } +} diff --git a/packages/cesium-flyto/package.json b/packages/cesium-flyto/package.json new file mode 100644 index 0000000..0cedfff --- /dev/null +++ b/packages/cesium-flyto/package.json @@ -0,0 +1,18 @@ +{ + "name": "@geoblocks/cesium-flyto", + "version": "0.0.0", + "license": "BSD-3-Clause", + "repository": { + "type": "git", + "url": "https://github.com/geoblocks/cesium-helpers/", + "directory": "packages/cesium-flyto" + }, + "main": "cesium-flyto.js", + "module": "cesium-flyto.js", + "publishConfig": { + "access": "public" + }, + "peerDependencies": { + "@cesium/engine": ">=10" + } +}