2016-02-16 01:41:59 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Leaflet CRS.Simple Example</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map" style="width: 600px; height: 400px"></div>
|
|
|
|
|
|
|
|
|
|
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var map = L.map('map', {
|
|
|
|
|
crs: L.CRS.Simple,
|
|
|
|
|
minZoom: -3
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var yx = L.latLng;
|
|
|
|
|
|
|
|
|
|
var xy = function(x, y) {
|
|
|
|
|
if (L.Util.isArray(x)) { // When doing xy([x, y]);
|
|
|
|
|
return yx(x[1], x[0]);
|
|
|
|
|
}
|
|
|
|
|
return yx(y, x); // When doing xy(x, y);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var bounds = [xy(-25, -26.5), xy(1023, 1021.5)];
|
|
|
|
|
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
|
|
|
|
|
|
|
|
|
|
var sol = xy(175.2, 145.0);
|
|
|
|
|
var mizar = xy( 41.6, 130.1);
|
|
|
|
|
var kruegerZ = xy( 13.4, 56.5);
|
|
|
|
|
var deneb = xy(218.7, 8.3);
|
|
|
|
|
|
|
|
|
|
L.marker( sol).addTo(map).bindPopup( 'Sol');
|
|
|
|
|
L.marker( mizar).addTo(map).bindPopup( 'Mizar');
|
|
|
|
|
L.marker(kruegerZ).addTo(map).bindPopup('Krueger-Z');
|
|
|
|
|
L.marker( deneb).addTo(map).bindPopup( 'Deneb');
|
|
|
|
|
|
|
|
|
|
var travel = L.polyline([sol, deneb]).addTo(map);
|
|
|
|
|
|
2016-02-16 18:26:43 +08:00
|
|
|
map.setView(xy(120, 70), 1);
|
2016-02-16 01:41:59 +08:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
