Merge pull request #41 from vue-leaflet/lwms-tile-layer (d20a8341) · Commits · school / Capstone Design / 02 / vue-leaflet

src/Playground.vue

+111 −66

Original line number	Diff line number	Diff line
		<template>
		<div style="display: flex;">
		<div style="height: 75vh; width: 50vw;">
		<l-map
		v-model="zoom"
		@@ -67,9 +68,40 @@
		lol
		</l-popup>
		</l-rectangle>

		<l-polyline
		:lat-lngs="[
		[47.334852, -1.509485],
		[47.342596, -1.328731],
		[47.241487, -1.190568],
		[47.234787, -1.358337],
		]"
		color="green"
		></l-polyline>
		</l-map>
		<button @click="changeIcon">New kitten icon</button>
		</div>
		<div style="height: 75vh; width: 50vw;">
		<l-map
		v-model="zoom"
		v-model:zoom="zoom"
		:center="[47.41322, -1.219482]"
		@move="log('move')"
		>
		<l-wms-tile-layer
		v-for="layer in wmsLayers"
		:key="layer.name"
		:base-url="baseUrl"
		:layers="layer.layers"
		:visible="layer.visible"
		:format="layer.format"
		:transparent="layer.transparent"
		:name="layer.name"
		layer-type="base"
		></l-wms-tile-layer>
		</l-map>
		</div>
		</div>
		</template>
		<script>
		import LMap from "./components/LMap.vue";
		@@ -82,6 +114,7 @@ import LPopup from "./components/LPopup.vue";
		import LPolyline from "./components/LPolyline.vue";
		import LPolygon from "./components/LPolygon.vue";
		import LRectangle from "./components/LRectangle.vue";
		import LWmsTileLayer from "./components/LWmsTileLayer.vue";

		export default {
		components: {
		@@ -95,12 +128,24 @@ export default {
		LPolyline,
		LPolygon,
		LRectangle,
		LWmsTileLayer,
		},
		data() {
		return {
		zoom: 2,
		iconWidth: 25,
		iconHeight: 40,
		baseUrl: "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
		wmsLayers: [
		{
		name: "Weather Data",
		visible: true,
		format: "image/png",
		layers: "nexrad-n0r-900913",
		transparent: true,
		attribution: "Weather data © 2012 IEM Nexrad",
		},
		],
		};
		},
		computed: {

src/components/LWmsTileLayer.vue

0 → 100644

+39 −0

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

		console.log(props);

		export default {
		props,
		setup(props, context) {
		const leafletRef = ref({});

		const addLayer = inject("addLayer");

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

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

		leafletRef.value = tileLayer.wms(props.baseUrl, options);

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

		propsBinder(methods, leafletRef.value, props, setOptions);
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		});
		},
		render() {
		return null;
		},
		};
		</script>

src/components/index.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -8,3 +8,4 @@ export { default as LTooltip } from "./LTooltip.vue";
		export { default as LPopup } from "./LPopup.vue";
		export { default as LPolygon } from "./LPolygon.vue";
		export { default as LRectangle } from "./LRectangle.vue";
		export { default as LWmsTileLayer } from "./LWmsTileLayer.vue";

src/functions/wmsTileLayer.js

0 → 100644

+60 −0

Original line number	Diff line number	Diff line
		import { props as tileLayerProps, setup as tileLayerSetup } from "./tileLayer";

		export const props = {
		...tileLayerProps,
		baseUrl: {
		type: String,
		default: null,
		required: true,
		},
		layers: {
		type: String,
		default: "",
		},
		styles: {
		type: String,
		default: "",
		},
		format: {
		type: String,
		default: "image/jpeg",
		},
		transparent: {
		type: Boolean,
		custom: false,
		},
		version: {
		type: String,
		default: "1.1.1",
		},
		crs: {
		default: null,
		},
		upperCase: {
		type: Boolean,
		default: false,
		},
		};

		export const setup = (props, leafletRef) => {
		const {
		options: tileLayerOptions,
		methods: tileLayerMethods,
		} = tileLayerSetup(props, leafletRef);
		const options = {
		...tileLayerOptions,
		layers: props.layers,
		styles: props.styles,
		format: props.format,
		transparent: props.transparent,
		version: props.version,
		crs: props.crs,
		upperCase: props.upperCase,
		};
		return {
		options,
		methods: {
		...tileLayerMethods,
		},
		};
		};