LIMageOverlay support with playground demo #13 (e271189c) · Commits · school / Capstone Design / 02 / vue-leaflet

README.md

+1 −0

Original line number	Diff line number	Diff line
		@@ -17,6 +17,7 @@ This is a Beta version! And may yet be instable! If you want to help, please rea
		- LFeatureGroup
		- LGeoJson
		- LIcon
		- LImageOverlay
		- LMap
		- LMarker
		- LPolygon

src/components/LImageOverlay.vue

0 → 100644

+48 −0

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject, nextTick } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import {
		props as imageOverlayProps,
		setup as imageOverlaySetup,
		} from "../functions/imageOverlay";
		import { render } from "../functions/layer";

		/**
		* ImageOverlay component, render a plain image instead of a geospatial map.
		*/
		export default {
		name: "LImageOverlay",
		props: imageOverlayProps,
		setup(props, context) {
		const leafletRef = ref({});
		const ready = ref(false);

		const addLayer = inject("addLayer");

		const { options, methods } = imageOverlaySetup(props, leafletRef, context);

		onMounted(async () => {
		const { imageOverlay, DomEvent } = await import(
		"leaflet/dist/leaflet-src.esm"
		);
		leafletRef.value = imageOverlay(props.url, props.bounds, options);

		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);
		propsBinder(methods, leafletRef.value, props);
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		nextTick(() => context.emit("ready", leafletRef.value));
		});

		return { ready, leafletObject: leafletRef };
		},
		render() {
		return render(this.ready, this.$slots);
		},
		};
		</script>

src/components/index.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -9,6 +9,7 @@ export { default as LFeatureGroup } from "./LFeatureGroup.vue";
		export { default as LGeoJson } from "./LGeoJson.vue";
		export { default as LGridLayer } from "./LGridLayer.vue";
		export { default as LIcon } from "./LIcon.vue";
		export { default as LImageOverlay } from "./LImageOverlay.vue";
		export { default as LLayerGroup } from "./LLayerGroup.vue";
		export { default as LMap } from "./LMap.vue";
		export { default as LMarker } from "./LMarker.vue";

src/functions/imageOverlay.js

0 → 100644

+119 −0

Original line number	Diff line number	Diff line
		import { props as layerProps, setup as layerSetup } from "./layer";
		/**
		* @typedef {import('leaflet/dist/leaflet-src.esm.js').LatLngBounds} LatLngBounds
		*/

		export const props = {
		...layerProps,
		url: {
		type: String,
		required: true,
		},
		bounds: {
		type: Array,
		required: true,
		},
		opacity: {
		type: Number,
		custom: true,
		default: 1.0,
		},
		alt: {
		type: String,
		default: "",
		},
		interactive: {
		type: Boolean,
		default: false,
		},
		crossOrigin: {
		type: Boolean,
		default: false,
		},
		errorOverlayUrl: {
		type: String,
		custom: true,
		default: "",
		},
		zIndex: {
		type: Number,
		custom: true,
		default: 1,
		},
		className: {
		type: String,
		default: "",
		},
		};

		export const setup = (setupProps, LeafletRef, context) => {
		const { options: layerOptions, methods: layerMethods } = layerSetup(
		setupProps,
		LeafletRef,
		context
		);
		const options = {
		...layerOptions,
		...setupProps,
		};

		const methods = {
		...layerMethods,
		/**
		* Sets the opacity of the overlay.
		* @param {number} opacity
		*/
		setOpacity(opacity) {
		return LeafletRef.value.setOpacity(opacity);
		},
		/**
		* Changes the URL of the image.
		* @param {string} url
		*/
		setUrl(url) {
		return LeafletRef.value.setUrl(url);
		},
		/**
		* Update the bounds that this ImageOverlay covers
		* @param {LatLngBounds \| Array<Array<number>>} bounds
		*/
		setBounds(bounds) {
		return LeafletRef.value.setBounds(bounds);
		},
		/**
		* Get the bounds that this ImageOverlay covers
		* @returns {LatLngBounds}
		*/
		getBounds() {
		return LeafletRef.value.getBounds();
		},
		/**
		* Returns the instance of HTMLImageElement used by this overlay.
		* @returns {HTMLElement}
		*/
		getElement() {
		return LeafletRef.value.getElement();
		},
		/**
		* Brings the layer to the top of all overlays.
		*/
		bringToFront() {
		return LeafletRef.value.bringToFront();
		},
		/**
		* Brings the layer to the bottom of all overlays.
		*/
		bringToBack() {
		return LeafletRef.value.bringToBack();
		},
		/**
		* Changes the zIndex of the image overlay.
		* @param {number} zIndex
		*/
		setZIndex(zIndex) {
		return LeafletRef.value.setZIndex(zIndex);
		},
		};

		return { options, methods };
		};

src/playground/App.vue

+1 −0

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@
		<router-link to="/">Home</router-link>
		<router-link to="/grid-layer">GridLayer</router-link>
		<router-link to="/tile-layer">TileLayer</router-link>
		<router-link to="/image-overlay">ImageOverlay</router-link>
		<router-link to="/feature-group">Feature Group</router-link>
		<router-link to="/circle">Circle</router-link>
		<router-link to="/circle-marker">CircleMarker</router-link>