syncMaps!

fdq09eca · Nov 15, 2023 · 59962a1 · 59962a1
1 parent 902092f
commit 59962a1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/demo/src/components/Map.vue b/demo/src/components/Map.vue
@@ -11,6 +11,7 @@ import { useMapStore } from "../stores/MapStore";
 import Logo from "./Logo.vue";
 import LonLatBox from "./LonLatBox.vue";
 import ScaleBox from "./ScaleBox.vue";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
 
 export default {
   components: {
@@ -42,10 +43,27 @@ export default {
 
   beforeMount() {
     this.mapObject = this.mapStore.init_mapObject();
+    reactiveUtils.on(
+      () => this.view,
+      "drag",
+      (event) => {
+        const dragState = event.action;
+        if (dragState === "update") {
+          useMapStore().syncMaps(this.mapObject);
+        }
+      }
+    );
+
+    reactiveUtils.watch(
+      () => this.view?.zoom,
+      (zoom) => {
+        useMapStore().syncMaps(this.mapObject);
+      }
+    );
   },
 
   mounted() {
-    this.mapStore.onMount(this.$el, this.mapObj_id);
+    this.mapObject.view.container = this.$el;
   },
 };
 </script>

diff --git a/demo/src/stores/MapStore.js b/demo/src/stores/MapStore.js
@@ -43,19 +43,13 @@ export const useMapStore = defineStore("mapStore", {
       return mapObj;
     },
 
-    onMount(container_, id) {
-      const v = this.get_mapObject(id)?.view;
-
-      if (v == null) {
-        throw new Error(`view is null`);
-      }
-
-      v.container = container_;
-      this.doSomething();
-    },
-
-    doSomething() {
-      // console.log("mapStore::doSomething");
+    syncMaps(targetMapObj) {
+      this.mapObjects
+        .filter((mo) => mo !== targetMapObj)
+        .forEach((mo) => {
+          mo.view.extent = targetMapObj.view.extent;
+          mo.view.zoom = targetMapObj.view.zoom;
+        });
     },
   },
 });