diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 095ce3c..49b0a5f 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -404,6 +404,10 @@ export const config: UserConfig = { text: "ol-interaction-snap", link: "/componentsguide/interactions/snap/", }, + { + text: "ol-interaction-synchronize", + link: "/componentsguide/interactions/synchronize/", + }, { text: "ol-interaction-transform", link: "/componentsguide/interactions/transform/", diff --git a/docs/componentsguide/interactions/synchronize/index.md b/docs/componentsguide/interactions/synchronize/index.md new file mode 100644 index 0000000..474154e --- /dev/null +++ b/docs/componentsguide/interactions/synchronize/index.md @@ -0,0 +1,45 @@ +# ol-interaction-synchronize + +> Synchronize interaction from ol-ext that allows synchronizing multiple maps + +[[toc]] + +## Demo + + + + + + + +## Setup + + + +## Usage + +| Plugin Usage | Explicit Import | +| ----------------------------- | :--------------------------------------: | +| `` | `` | + +::: code-group + +<<< ../../../../src/demos/SynchronizeDemo.vue + +::: + +## Properties + +### maps + +- **Type**: `Array` +- **Default**: `[]` +- **Description**: Array of maps to synchronize with the current map + +## Features + +- Synchronizes view center, zoom level, and rotation between maps +- Shows cursor position on all synchronized maps +- Automatically handles map interactions and updates diff --git a/src/components/interaction/OlInteractionSynchronize.vue b/src/components/interaction/OlInteractionSynchronize.vue new file mode 100644 index 0000000..6a0e662 --- /dev/null +++ b/src/components/interaction/OlInteractionSynchronize.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/components/interaction/index.ts b/src/components/interaction/index.ts index 8d52de7..5182bd6 100644 --- a/src/components/interaction/index.ts +++ b/src/components/interaction/index.ts @@ -11,6 +11,7 @@ import OlInteractionPointer from "./OlInteractionPointer.vue"; import OlInteractionSnap from "./OlInteractionSnap.vue"; import OlInteractionTransform from "./OlInteractionTransform.vue"; import OlInteractionMouseWheelZoom from "./OlInteractionMouseWheelZoom.vue"; +import OlInteractionSynchronize from "./OlInteractionSynchronize.vue"; import type { Vue3OpenlayersGlobalOptions } from "@/types"; function install(app: App, options?: Vue3OpenlayersGlobalOptions) { @@ -29,6 +30,7 @@ function install(app: App, options?: Vue3OpenlayersGlobalOptions) { app.component("OlInteractionSnap", OlInteractionSnap); app.component("OlInteractionTransform", OlInteractionTransform); app.component("OlInteractionMouseWheelZoom", OlInteractionMouseWheelZoom); + app.component("OlInteractionSynchronize", OlInteractionSynchronize); if (options) { app.provide("ol-options", options); @@ -55,4 +57,5 @@ export { OlInteractionSnap, OlInteractionTransform, OlInteractionMouseWheelZoom, + OlInteractionSynchronize, }; diff --git a/src/demos/SynchronizeDemo.vue b/src/demos/SynchronizeDemo.vue new file mode 100644 index 0000000..61fc405 --- /dev/null +++ b/src/demos/SynchronizeDemo.vue @@ -0,0 +1,36 @@ + + + diff --git a/vite.umd.config.ts b/vite.umd.config.ts index 97a2d1e..13bb515 100644 --- a/vite.umd.config.ts +++ b/vite.umd.config.ts @@ -139,6 +139,7 @@ export default defineConfig({ "ol-ext/featureanimation/Teleport": "Teleport", "ol-ext/featureanimation/Zoom": "Zoom$1", "ol-ext/interaction/SelectCluster": "SelectCluster", + "ol-ext/interaction/Synchronize": "Synchronize", "ol-ext/interaction/Transform": "Transform$1", "ol-ext/layer/AnimatedCluster": "AnimatedCluster", "ol-ext/style/FlowLine": "FlowLine",