debug/vector/bounds-extend.html - main - githubmirror/Leaflet

debug/vector/bounds-extend.html
98 строк3 KB
Simon Legner
Rename `Map` to `LeafletMap` and keep `Map` as alias (#9892)
11 ноя 2025, 21:28
11 ноя 2025, 21:282e9b617
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Bounds Extend</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
		<link rel="stylesheet" href="../../dist/leaflet.css" />
		<link rel="stylesheet" href="../css/screen.css" />
		<script type="importmap">
			{
				"imports": {
					"leaflet": "../../dist/leaflet-src.js"
				}
			}
		</script>
	</head>
	<body>
		<div id="map"></div>
		<button type="button" id="extendBounds">Extend the bounds of the center rectangle with the upper right rectangle</button>
		<button type="button" id="extendLatLng">Extend the bounds of the center rectangle with the lower left marker</button>
		<script type="module">
			import {TileLayer, LatLngBounds, LatLng, LeafletMap, Rectangle, Marker} from 'leaflet';

			const bounds1 = new LatLngBounds(
				new LatLng(54.559322, -5.767822),
				new LatLng(56.1210604, -3.021240)
			);

			const bounds2 = new LatLngBounds(
				new LatLng(56.56023925701561, -2.076416015625),
				new LatLng(57.01158038001565, -0.9777832031250001)
			);

			let bounds3 = null;

			const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18});
			const map = new LeafletMap('map', {
				layers: [osm],
				center: bounds1.getCenter(),
				zoom: 7
			});

			const rectangle1 = new Rectangle(bounds1);
			const rectangle2 = new Rectangle(bounds2);
			let rectangle3 = null;

			const marker = new Marker(new LatLng(54.18815548107151, -7.657470703124999));

			map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);

			const extendBoundsBtn = document.getElementById('extendBounds');
			const extendLatLngBtn = document.getElementById('extendLatLng');

			extendBoundsBtn.addEventListener('click', boundsExtendBounds);
			extendLatLngBtn.addEventListener('click', boundsExtendLatLng);

			function boundsExtendBounds() {
				if  (rectangle3) {
					map.removeLayer(rectangle3);
					rectangle3 = null;
				}
				if (bounds3) {
					bounds3 = null;
				}
				bounds3 = new LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
				bounds3.extend(bounds2);
				rectangle3 = new Rectangle(bounds3, {
					color: '#ff0000',
					weight: 1,
					opacity: 1,
					fillOpacity: 0
				});

				map.addLayer(rectangle3);
			}

			function boundsExtendLatLng() {
				if  (rectangle3) {
					map.removeLayer(rectangle3);
					rectangle3 = null;
				}
				if (bounds3) {
					bounds3 = null;
				}
				bounds3 = new LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
				bounds3.extend(marker.getLatLng());
				rectangle3 = new Rectangle(bounds3, {
					color: '#ff0000',
					weight: 1,
					opacity: 1,
					fillOpacity: 0
				});

				map.addLayer(rectangle3);
			}
		</script>
	</body>
</html>