githubmirror/Leaflet

debug/map/simple-proj.html

59 строк1 KB

Vladimir Agafonkin

use projected coordinates in Circle, close #1465

02 янв 2014, 17:23

02 янв 2014, 17:236940b5b

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet debug page</title>

	<link rel="stylesheet" href="../../dist/leaflet.css" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="../css/screen.css" />

	<script type="text/javascript" src="../../build/deps.js"></script>
	<script src="../leaflet-include.js"></script>
</head>
<body>

	<div id="map"></div>

	<script type="text/javascript">

		var map = L.map('map', {
			crs: L.CRS.Simple
		}).setView([0, 0], 0);

		L.polygon([
			[-200, -50],
			[-40, 250],
			[200, 100]
		]).addTo(map);


		L.marker([-200, -200]).addTo(map);
		L.marker([200, -200]).addTo(map);
		L.marker([200, 200]).addTo(map);
		L.marker([-200, 200]).addTo(map);

		L.marker([0, 0]).addTo(map);

		L.imageOverlay('http://leafletjs.com/docs/images/logo.png', [[0, 0], [73, 220]]).addTo(map);

		var grid = L.gridLayer({
			attribution: 'Grid Layer'
		});

		grid.createTile = function (coords) {
			var tile = document.createElement('div');
			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
			tile.style.outline = '1px solid red';
			tile.style.background = 'white';
			return tile;
		};

		map.addLayer(grid);

		L.circle([0, 0], 100, {color: 'red'}).addTo(map);

	</script>
</body>
</html>