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

OpenLayers Wrapper for Vue3

import { shallowRef, inject, ref, onUnmounted, watch } from "vue";
import usePropsAsObjectProperties from "./usePropsAsObjectProperties.js";
import { useOpenLayersEvents, LAYER_EVENTS } from "./useOpenLayersEvents.js";
function useLayer(LayerClass, props, eventsToHandle = []) {
  const properties = usePropsAsObjectProperties(props);
  const layer = shallowRef(new LayerClass(properties));
  useOpenLayersEvents(layer, [...LAYER_EVENTS, ...eventsToHandle]);
  const map = inject("map");
  const layerGroup = inject("layerGroup", null);
  const overviewMap = inject(
    "overviewMap",
    null
  );
  const layerAdded = ref(false);
  function updateLayers() {
    for (const key in properties) {
      const keyInObj = key;
      if (properties[keyInObj] !== void 0) {
        layer.value.set(key, properties[keyInObj]);
      }
    }
    layer.value.setOpacity(properties.opacity ?? 1);
    layer.value.setVisible(properties.visible ?? true);
    if (!layerAdded.value) {
      if (layerGroup) {
        const layerCollection = layerGroup.getLayers();
        layerCollection.push(layer.value);
        layerGroup.setLayers(layerCollection);
      } else if (overviewMap?.value) {
        overviewMap.value?.getOverviewMap().addLayer(layer.value);
      } else {
        map?.addLayer(layer.value);
      }
      layerAdded.value = true;
    }
  }
  function removeLayer() {
    if (layerGroup) {
      layerGroup.getLayers().remove(layer.value);
    } else if (overviewMap?.value) {
      overviewMap.value?.getOverviewMap().removeLayer(layer.value);
      overviewMap.value?.changed();
    } else {
      map?.removeLayer(layer.value);
    }
    layerAdded.value = false;
  }
  onUnmounted(removeLayer);
  watch(() => properties, updateLayers, { deep: true, immediate: true });
  if (overviewMap?.value) {
    watch(overviewMap, () => {
      removeLayer();
      updateLayers();
    });
  }
  return {
    layer,
    map
  };
}
export {
  useLayer as default
};