debug/vector/feature-group-bounds.html - main - githubmirror/Leaflet

debug/vector/feature-group-bounds.html
95 строк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 - Feature Group Bounds</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 id="geojsonLayerBounds" type="button">Show GeoJSON layer bounds</button>
		<button id="featureGroupBounds" type="button">Show feature group bounds</button>
		<script src="geojson-sample.js"></script>
		<script type="module">
			import {TileLayer, LeafletMap, GeoJSON, LatLng, Marker, Polyline, FeatureGroup, Rectangle} from 'leaflet';
			import geojsonSample from './geojson-sample.js';

			const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18});
			let rectangle;

			const map = new LeafletMap('map', {
				center: new LatLng(0.78, 102.37),
				zoom: 7,
				layers: [osm]
			});

			const geojson = new GeoJSON(geojsonSample, {
				style(feature) {
					return {color: feature.properties.color};
				},

				onEachFeature(feature, layer) {
					let popupText = `geometry type: ${feature.geometry.type}`;

					if (feature.properties.color) {
						popupText += `<br/>color: ${feature.properties.color}`;
					}

					layer.bindPopup(popupText);
				}
			});

			geojson.addLayer(new Marker(new LatLng(2.745530718801952, 105.194091796875)));

			const eye1 = new Marker(new LatLng(-0.7250783020332547, 101.8212890625));
			const eye2 = new Marker(new LatLng(-0.7360637370492077, 103.2275390625));
			const nose = new Marker(new LatLng(-1.3292264529974207, 102.5463867187));
			const mouth = new Polyline([
				new LatLng(-1.3841426927920029, 101.7333984375),
				new LatLng(-1.6037944300589726, 101.964111328125),
				new LatLng(-1.6806671337507222, 102.249755859375),
				new LatLng(-1.7355743631421197, 102.67822265625),
				new LatLng(-1.5928123762763, 103.0078125),
				new LatLng(-1.3292264529974207, 103.3154296875)
			]);
			map.addLayer(eye1).addLayer(eye2).addLayer(nose).addLayer(mouth);
			const featureGroup = new FeatureGroup([eye1, eye2, nose, mouth]);

			map.addLayer(geojson);
			map.addLayer(featureGroup);

			const geojsonLayerBoundsBtn = document.getElementById('geojsonLayerBounds');
			const featureGroupBoundsBtn = document.getElementById('featureGroupBounds');

			geojsonLayerBoundsBtn.addEventListener('click', geojsonLayerBounds);
			featureGroupBoundsBtn.addEventListener('click', featureGroupBounds);

			function geojsonLayerBounds() {
				if (rectangle) {
					rectangle.setBounds(geojson.getBounds());
				} else {
					rectangle = new Rectangle(geojson.getBounds());
					map.addLayer(rectangle);
				}
			}

			function featureGroupBounds() {
				if (rectangle) {
					rectangle.setBounds(featureGroup.getBounds());
				} else {
					rectangle = new Rectangle(featureGroup.getBounds());
					map.addLayer(rectangle);
				}
			}
		</script>
	</body>
</html>