Merge pull request #40 from vue-leaflet/add-polygon-and-rectangle-components (0a30ea6e) · Commits · school / Capstone Design / 02 / vue-leaflet

src/Playground.vue

+36 −0

Original line number	Diff line number	Diff line
		@@ -35,6 +35,38 @@
		]"
		color="green"
		></l-polyline>
		<l-polygon
		:lat-lngs="[
		[46.334852, -1.509485],
		[46.342596, -1.328731],
		[46.241487, -1.190568],
		[46.234787, -1.358337],
		]"
		color="#41b782"
		:fill="true"
		:fillOpacity="0.5"
		fillColor="#41b782"
		/>
		<l-rectangle
		:lat-lngs="[
		[46.334852, -1.509485],
		[46.342596, -1.328731],
		[46.241487, -1.190568],
		[46.234787, -1.358337],
		]"
		:fill="true"
		color="#35495d"
		/>
		<l-rectangle
		:bounds="[
		[46.334852, -1.190568],
		[46.241487, -1.090357],
		]"
		>
		<l-popup>
		lol
		</l-popup>
		</l-rectangle>
		</l-map>
		<button @click="changeIcon">New kitten icon</button>
		</div>
		@@ -48,6 +80,8 @@ import LControlLayers from "./components/LControlLayers.vue";
		import LTooltip from "./components/LTooltip.vue";
		import LPopup from "./components/LPopup.vue";
		import LPolyline from "./components/LPolyline.vue";
		import LPolygon from "./components/LPolygon.vue";
		import LRectangle from "./components/LRectangle.vue";

		export default {
		components: {
		@@ -59,6 +93,8 @@ export default {
		LTooltip,
		LPopup,
		LPolyline,
		LPolygon,
		LRectangle,
		},
		data() {
		return {

0 → 100644

+48 −0

Original line number	Diff line number	Diff line
		<script>
		import { h, onMounted, ref, inject } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import { props, setup as polygonSetup } from "../functions/polygon";

		/**
		* Polygon component, lets you add and customize polygon regions on the map
		*/
		export default {
		name: "LPolygon",
		props,
		setup(props, context) {
		const leafletRef = ref({});
		const ready = ref(false);
		const addLayer = inject("addLayer");

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

		onMounted(async () => {
		const { polygon, DomEvent, setOptions } = await import(
		"leaflet/dist/leaflet-src.esm"
		);

		leafletRef.value = polygon(props.latLngs, options);

		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);

		propsBinder(methods, leafletRef.value, props, setOptions);

		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		});

		return { ready };
		},
		render() {
		if (this.ready && this.$slots.default) {
		return h("div", { style: { display: "none" } }, this.$slots.default());
		}
		return null;
		},
		};
		</script>

0 → 100644

+52 −0

Original line number	Diff line number	Diff line
		<script>
		import { h, onMounted, ref, inject } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import { props, setup as rectangleSetup } from "../functions/rectangle";

		/**
		* Rectangle component, lets you add and customize rectangular regions on the map
		*/
		export default {
		name: "LRectangle",
		props,
		setup(props, context) {
		const leafletRef = ref({});
		const ready = ref(false);
		const addLayer = inject("addLayer");

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

		onMounted(async () => {
		const { rectangle, latLngBounds, DomEvent, setOptions } = await import(
		"leaflet/dist/leaflet-src.esm"
		);

		const bounds =
		props.bounds && props.bounds.length
		? latLngBounds(props.bounds)
		: latLngBounds(props.latLngs);
		leafletRef.value = rectangle(bounds, options);

		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);

		propsBinder(methods, leafletRef.value, props, setOptions);

		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		});

		return { ready };
		},
		render() {
		if (this.ready && this.$slots.default) {
		return h("div", { style: { display: "none" } }, this.$slots.default());
		}
		return null;
		},
		};
		</script>

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		import { props as polylineProps, setup as polylineSetup } from "./polyline";

		export const props = {
		...polylineProps,
		};

		export const setup = (props, leafletRef, context) => {
		const { options: polylineOptions, methods: polylineMethods } = polylineSetup(
		props,
		leafletRef,
		context
		);
		const options = {
		...polylineOptions,
		...props,
		};

		const methods = {
		...polylineMethods,
		toGeoJSON(precision) {
		return leafletRef.value.toGeoJSON(precision);
		},
		};

		return { options, methods };
		};

0 → 100644

+37 −0

Original line number	Diff line number	Diff line
		import { props as polygonProps, setup as polygonSetup } from "./polygon";

		export const props = {
		...polygonProps,
		bounds: {
		type: Array,
		default: undefined,
		},
		};

		export const setup = (props, leafletRef, context) => {
		const { options: polygonOptions, methods: polygonMethods } = polygonSetup(
		props,
		leafletRef,
		context
		);
		const options = {
		...polygonOptions,
		...props,
		};

		const methods = {
		...polygonMethods,
		setBounds(latLngBounds) {
		leafletRef.value.setBounds(latLngBounds);
		},
		setLatLngs(latLngs) {
		// Calling setLatLngs on a Leaflet rectangle will convert it
		// to a polygon. So instead, we call setBounds here to ensure
		// that the rectangle remains a rectangle, defined by the
		// bounds of the points in the latLngs array.
		leafletRef.value.setBounds(latLngs);
		},
		};

		return { options, methods };
		};