vue3-openlayers/dist/esm/composables/useControl.js

OpenLayers Wrapper for Vue3

import { inject, computed, watch, onMounted, onUnmounted } from "vue";
import Map from "ol/Map";
import Bar from "ol-ext/control/Bar";
import { useOpenLayersEvents } from "./useOpenLayersEvents.js";
function useControl(ControlType, properties, attrs, eventsToHandle = []) {
  const map = inject("map");
  const controlBar = inject(
    "controlBar",
    null
  );
  const parent = controlBar !== null ? controlBar?.value : map;
  const control = computed(
    () => new ControlType({ ...properties })
  );
  useOpenLayersEvents(control, eventsToHandle);
  control.value.set("order", attrs.order === void 0 ? 0 : attrs.order);
  watch(control, (newVal, oldVal) => {
    if (parent) {
      if (parent instanceof Map) {
        parent.removeControl(oldVal);
        parent.addControl(newVal);
      } else if (parent instanceof Bar) {
        if (parent?.controls_) {
          const index = parent?.controls_.findIndex((a) => a === control.value);
          if (index) {
            parent?.controls_.splice(index, 1);
          }
        }
        parent.addControl(newVal);
      }
      map?.changed();
    }
  });
  onMounted(() => {
    if (parent && (parent instanceof Map || parent instanceof Bar)) {
      parent.addControl(control.value);
    }
    if (parent?.controls_ !== void 0) {
      const sortedControls = [...parent.controls_];
      sortedControls.sort(
        (a, b) => a.get("order") - b.get("order")
      );
      parent.controls_ = [];
      if (parent && (parent instanceof Map || parent instanceof Bar)) {
        sortedControls.forEach((c) => {
          parent.addControl(c);
        });
      }
      parent.changed();
    }
    map?.changed();
  });
  onUnmounted(() => {
    if (parent && parent instanceof Map) {
      parent?.getControls().getArray().forEach((c) => {
        if (c instanceof ControlType) {
          parent.removeControl(c);
        }
      });
    } else {
      if (parent?.controls_) {
        const index = parent?.controls_.findIndex((a) => a === control.value);
        if (index) {
          parent?.controls_.splice(index, 1);
        }
      }
    }
    control.value.dispose();
    map?.changed();
  });
  return {
    map,
    control
  };
}
export {
  useControl as default
};