vue3-openlayers
Version:
OpenLayers Wrapper for Vue3
69 lines (68 loc) • 2.33 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const composables_usePropsAsObjectProperties = require("./usePropsAsObjectProperties.js");
const composables_useOpenLayersEvents = require("./useOpenLayersEvents.js");
const helpers_projection = require("../helpers/projection.js");
const TileSource = require("ol/source/Tile");
const VectorSource = require("ol/source/Vector");
const ImageSource = require("ol/source/Image");
function useSource(SourceClass, layer, props, eventsToHandle = [], sourceUpdateActions) {
function getProperties() {
return composables_usePropsAsObjectProperties.default({
...props,
...props.projection ? {
projection: helpers_projection.default(
props.projection
)
} : {}
});
}
const source = vue.shallowRef(new SourceClass(getProperties()));
updateSource();
function updateSource() {
layer?.value?.setSource(null);
const properties = getProperties();
source.value.setProperties(properties);
for (const key in properties) {
const keyInObj = key;
if (properties[keyInObj] !== void 0) {
source.value.set(key, properties[keyInObj]);
}
}
if (sourceUpdateActions) {
sourceUpdateActions(source.value);
}
layer?.value?.setSource(source.value);
composables_useOpenLayersEvents.useOpenLayersEvents(source, [
...composables_useOpenLayersEvents.COMMON_EVENTS,
...getSourceEvents(),
...eventsToHandle
]);
return source;
}
function getSourceEvents() {
const src = source.value;
if (src instanceof VectorSource) {
return composables_useOpenLayersEvents.VECTOR_SOURCE_EVENTS;
} else if (src instanceof TileSource) {
return composables_useOpenLayersEvents.TILE_SOURCE_EVENTS;
} else if (src instanceof ImageSource) {
return composables_useOpenLayersEvents.IMAGE_SOURCE_EVENTS;
}
return [];
}
function removeSource() {
layer?.value?.setSource(null);
}
vue.onUnmounted(removeSource);
vue.watch(source, updateSource);
vue.watch(() => layer, updateSource);
vue.watch(() => props, updateSource, { deep: true });
return {
source,
updateSource,
removeSource
};
}
exports.default = useSource;