chore: setup working case (ce4e5e61) · Commits · school / Capstone Design / 02 / vue-leaflet

dist/assets/app.js

+12 −14270

File changed.

Preview size limit exceeded, changes collapsed.

dist/assets/app.js.map

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

dist/index.html

+2 −5

Original line number	Diff line number	Diff line
		@@ -10,11 +10,8 @@
		<link rel="stylesheet" href="assets/app.css" />
		</head>
		<body>
		<div id="app" style="width: 500px; height:500px;">
		<l-map :zoom="3" :center="[47.413220, -1.219482]">
		<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">
		</l-tile-layer>
		</l-map>
		<div id="app">
		<foo></foo>
		</div>
		<script src="assets/app.js"></script>
		</body>

src/components/LMap.js

deleted100644 → 0

+0 −176

Original line number	Diff line number	Diff line
		import { map, CRS } from 'leaflet/dist/leaflet-src.esm';

		const { onMounted, ref, computed, provide } = window.Vue;

		export default {
		props: {
		/**
		* The center of the map, supports .sync modifier
		*/
		center: {
		type: [Object, Array],
		custom: true,
		default: () => [0, 0]
		},
		/**
		* The bounds of the map, supports .sync modifier
		*/
		bounds: {
		type: [Array, Object],
		custom: true,
		default: null
		},
		/**
		* The max bounds of the map
		*/
		maxBounds: {
		type: [Array, Object],
		default: null
		},
		/**
		* The zoom of the map, supports .sync modifier
		*/
		zoom: {
		type: Number,
		custom: true,
		default: 0
		},
		/**
		* The minZoom of the map
		*/
		minZoom: {
		type: Number,
		default: null
		},
		/**
		* The maxZoom of the map
		*/
		maxZoom: {
		type: Number,
		default: null
		},
		/**
		* The paddingBottomRight of the map
		*/
		paddingBottomRight: {
		type: Array,
		custom: true,
		default: null
		},
		/**
		* The paddingTopLeft of the map
		*/
		paddingTopLeft: {
		type: Array,
		custom: true,
		default: null
		},
		/**
		* The padding of the map
		*/
		padding: {
		type: Array,
		custom: true,
		default: null
		},
		/**
		* The worldCopyJump option for the map
		*/
		worldCopyJump: {
		type: Boolean,
		default: false
		},
		/**
		* The crs option for the map
		* @values CRS.EPSG3857
		*/
		crs: {
		type: Object,
		custom: true,
		default: () => CRS.EPSG3857
		},
		maxBoundsViscosity: {
		type: Number,
		default: null
		},
		inertia: {
		type: Boolean,
		default: null
		},
		inertiaDeceleration: {
		type: Number,
		default: null
		},
		inertiaMaxSpeed: {
		type: Number,
		default: null
		},
		easeLinearity: {
		type: Number,
		default: null
		},
		zoomAnimation: {
		type: Boolean,
		default: null
		},
		zoomAnimationThreshold: {
		type: Number,
		default: null
		},
		fadeAnimation: {
		type: Boolean,
		default: null
		},
		markerZoomAnimation: {
		type: Boolean,
		default: null
		},
		noBlockingAnimations: {
		type: Boolean,
		default: false
		}
		},
		setup(props) {
		const root = ref(null);
		const ready = ref(false);
		const mapRef = ref(null);

		const options = {
		minZoom: props.minZoom,
		maxZoom: props.maxZoom,
		maxBounds: props.maxBounds,
		maxBoundsViscosity: props.maxBoundsViscosity,
		worldCopyJump: props.worldCopyJump,
		crs: props.crs,
		center: props.center,
		zoom: props.zoom,
		inertia: props.inertia,
		inertiaDeceleration: props.inertiaDeceleration,
		inertiaMaxSpeed: props.inertiaMaxSpeed,
		easeLinearity: props.easeLinearity,
		zoomAnimation: props.zoomAnimation,
		zoomAnimationThreshold: props.zoomAnimationThreshold,
		fadeAnimation: props.fadeAnimation,
		markerZoomAnimation: props.markerZoomAnimation
		};

		const addLayer = layer => {
		mapRef.value.addLayer(layer);
		};
		const removeLayer = layer => {
		mapRef.value.removeLayer(layer);
		};
		provide('addLayer', addLayer);
		provide('removeLayer', removeLayer);

		onMounted(() => {
		mapRef.value = map(root.value, options);
		ready.value = true;
		});

		const mapObject = computed(() => mapRef.value);
		return { root, ready, mapObject };
		},
		template:
		'<div style="width:100%; height: 100%" ref="root"><slot v-if="ready"></slot></div>'
		};

src/components/LTileLayer.js

deleted100644 → 0

+0 −42

Original line number	Diff line number	Diff line
		import { tileLayer } from 'leaflet/dist/leaflet-src.esm';
		import { props as layerProps, setup as layerSetup } from '../functions/layer';
		import {
		props as gridLayerProps,
		setup as gridLayerSetup
		} from '../functions/gridLayer';
		import {
		props as tileLayerProps,
		setup as tileLayerSetup
		} from '../functions/tileLayer';

		const { onMounted, ref, computed, inject } = window.Vue;

		export default {
		props: {
		...layerProps,
		...gridLayerProps,
		...tileLayerProps,
		url: {
		type: String,
		default: null
		}
		},
		setup(props) {
		const mapRef = ref({});
		const addLayer = inject('addLayer');
		const options = {
		...layerSetup(props).options,
		...gridLayerSetup(props).options,
		...tileLayerSetup(props).options
		};
		onMounted(() => {
		mapRef.value = tileLayer(props.url, options);
		addLayer(mapRef.value);
		});
		const mapObject = computed(() => mapRef.value);
		return { mapObject };
		},
		render() {
		return null;
		}
		};