debug/vector/vector2.html - main - githubmirror/Leaflet

debug/vector/vector2.html

57 строк2 KB

Simon Legner

Control: stop exposing modules on other classes (#10054)

07 янв 2026, 18:01

07 янв 2026, 18:0135e4ac2

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Leaflet debug page - Vector 2</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>
		<script type="module">
			import {TileLayer, SVG, LeafletMap, Marker, Canvas, Polyline, Circle, CircleMarker, LayersControl} from 'leaflet';
			import route from './route.js';

			const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18});
			const svg = new SVG();
			const map = new LeafletMap('map', {layers: [osm], renderer: svg});

			map.addLayer(new Marker(route[0]));
			map.addLayer(new Marker(route[route.length - 1]));

			const canvas = new Canvas();
			const poly = new Polyline([
				[[60, 30], [60, 50], [40, 50]],
				[[20, 50], [20, 70], [0, 70]]
			], {color: 'red'}).addTo(map).bindPopup('Hello SVG');

			const path = new Polyline([
				[route, [[50.5, 30.5], [50.5, 40], [40, 40]]],
				[[[20, 0], [20, 40], [0, 40]]]
			], {renderer: canvas}).addTo(map).bindPopup('Hello Canvas');

			const circle = new Circle([35, 0], 700000, {color: 'green', renderer: canvas}).addTo(map).bindPopup('Hello Circle');
			const circleMarker = new CircleMarker([35, 30], {color: 'magenta', radius: 30}).addTo(map).bindPopup('Happy New Year!');

			map.setView([36, 52], 3);

			const layersControl = new LayersControl({}, {
				poly,
				path,
				circle,
				circleMarker,
				canvas,
				svg,
			}, {collapsed: false});
			map.addControl(layersControl);
		</script>
	</body>
</html>