Project

General

Profile

« Previous | Next » 

Revision 73fd5477

ID73fd547726440486c9a939aea6d9b4212cff7b27
Parent a9953a70
Child b5af2606

Added by Marc Souviron over 9 years ago

Amélioration du style de la page de tracé de cap
insertion de la distance du curseur au point de référence cur cette même page.

Files

  • added
  • modified
  • copied
  • renamed
  • deleted

View differences

Changesets

css/layers.css
1
#panel {
2
    position:absolute;
3
    top: 0;
4
    z-index:100000;
5
    right: 0;
6
    height: 1em; 
7
    width: 10em;
8
}
9
#panel div { 
10
    float: left;
11
    margin: 0.5em;
12
}
13

  
14
#position {
15
    z-index:100000;
16
    position:absolute;
17
    left:40%;
18
    top:0;
19
    background-color:#000;
20
    padding:0 0.5em;
21
    border-radius: 0 0 0.5em 0.5em;
22
    color:#FC0;
23
    font-size: 120%;
24
}
25

  
26
.lebouton {
27
    z-index:100000;
28
    position:absolute;
29
    left:10%;
30
    top:0;
31
    width:2em;
32
    height:2em;
33
    background-color:#F00;
34
}
35

  
36
#extra {
37
    background-color:#F00;
38
    padding:0 1em;
39
}
40

  
41
#extra input {
42
    padding:0 1em;
43
    vertical-align:middle;
44
}
45

  
46
#extra label {
47
    margin:0;
48
    padding:0;
49
    display:block;
50
    text-align:left;
51
}
52

  
53
#controls {
54
    background-color:#F0F;
55
    padding:1em;
56
}
js/pano.js
488 488
		    }
489 489
		    res.innerHTML += '</ul><p>test sur : '+tx0+','+ty0+'</p>';
490 490
		    var tst = this.get_cap_ele(tx0, ty0);
491
		    res.innerHTML += '<p>cap:'+tst.cap+', shift:'+tst.ele+'</p>';
491
		    res.innerHTML += '<p>cap:'+tst.cap+', ele:'+tst.ele+'</p>';
492 492
		    var tst2 = this.get_pos_xy(tst.cap, tst.ele);
493 493
		    res.innerHTML += '</ul><p>x:'+tst2.x+', y:'+tst2.y+'</p>';
494 494
		}
js/utils_osm.js
11 11
	    zcontrol = new OpenLayers.Control.Zoom();
12 12
	}
13 13
    } else zcontrol = new OpenLayers.Control.Zoom();
14

  
14
    
15 15
    var map = new OpenLayers.Map({
16 16
	div: "map",
17 17
        zoom: typeof zoom == 'undefined' ? 10:zoom,
......
19 19
		  new OpenLayers.Control.KeyboardDefaults(),
20 20
		  new OpenLayers.Control.Navigation()],
21 21
    });
22

  
22
    
23 23
    if (typeof scale_line != 'undefined' && scale_line == true) {
24 24
	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));
25 25
    }
26

  
26
    
27 27
    if (typeof base_layers != 'undefined') {
28
	map.addControl(new OpenLayers.Control.LayerSwitcher());
28
	var layers = new OpenLayers.Control.LayerSwitcher();
29
	map.addControl(layers);
29 30
	for (var i = 0; i < base_layers.length; i++) {
30 31
	    map.addLayer(base_layers[i]);
31
	    if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
32
		base_layers[i].mapObject.setTilt(0);
32
	}
33
	
34
	// gestion du 45° google //
35
	function update_tilt() {
36
	    for (var i = 0; i < base_layers.length; i++) {
37
		if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
38
		    base_layers[i].mapObject.setTilt(this.checked?1:0);
39
		    //alert((chkbx.checked?1:0)+'//'+i);
40
		    base_layers[i].removeMap;
41
		    base_layers[i].redraw;
42
		}
33 43
	    }
34 44
	}
45
	document.getElementById("tilt").onchange = update_tilt;
46
	// fin de gestion du 45° google //
47
	
48
	// autres tests
49
	function show_pos(e) {
50
	    alert(formatLonlats(map.getLonLatFromViewPortPx(e.xy)));
51
	}
52
	function set_pos(e) {
53
	    if(this.checked) {
54
		document.getElementById("position").style.display = 'none';
55
		map.events.register("click", map, show_pos);
56
	    } else {
57
		document.getElementById("position").style.display = 'block';
58
		map.events.unregister("click", map, show_pos);
59
	    }
60
	}
61
	var panel = new OpenLayers.Control.Panel({
62
	    div: document.getElementById("panel")
63
	});
64
	
65
	function formatLonlats(lonLat) {
66
	    lonLat.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
67
            var lat = lonLat.lat;
68
            var lon = lonLat.lon;
69
	    var dist = OpenLayers.Util.distVincenty(lonLat, new OpenLayers.LonLat(ln.lon1, ln.lat1))*1000;
70
            return lat.toFixed(5) + ', ' + lon.toFixed(5) + ' à ' + parseInt(dist) + ' mètres';
71
	}
72
	
73
	map.addControl (new OpenLayers.Control.MousePosition({
74
	    div: document.getElementById("position"),
75
	    formatOutput: formatLonlats
76
	}));
77

  
78
	var history = new OpenLayers.Control.NavigationHistory();
79
	map.addControl(history);
80
	panel.addControls([history.next, history.previous]);
81
	map.addControl(panel);
82

  
83
	document.getElementById("clic_pos").onchange = set_pos;
84
	layers.layersDiv.appendChild(document.getElementById("extra"));
85
	// fin des autres tests
35 86
    } else {
36 87
	map.addLayer(new OpenLayers.Layer.OSM());
37 88
    }
show_capline.php
2 2
  <title>Visualisation axe horizontal sur OSM</title>
3 3
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 4
  <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
5
  <link rel="stylesheet" type="text/css" href="map.css" />
5
  <link rel="stylesheet" type="text/css" href="css/layers.css" />
6 6
<?php
7 7
if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {
8 8
  $cap = $_REQUEST['cap'];
......
28 28
<script src="http://openlayers.org/api/OpenLayers.js"></script>
29 29
    <script>
30 30
    zoom = 12;
31
  var get_lon_lat = true;
31
  var get_lon_lat = false;
32 32
  var scale_line = true;
33 33

  
34 34
  var def_points_style = {
......
67 67
  {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
68 68
					       ),
69 69
		   new OpenLayers.Layer.Google(
70
					       "Google Physical",
70
					       "Google Relief",
71 71
  {type: google.maps.MapTypeId.TERRAIN, visibility: false}
72 72
					       ),
73 73
		   new OpenLayers.Layer.Google(
74
					       "Google Streets",
74
					       "Google plan",
75 75
  {numZoomLevels: 20, visibility: false}
76 76
					       ),
77 77
		   new OpenLayers.Layer.Google(
......
89 89
<?php
90 90
if ($complete) {
91 91
  echo '<div id="map"></div>'."\n";
92
  echo '<div id="panel"></div>'."\n";
93
  echo '<div id="position"></div>'."\n";
94
  echo '<div id="extra">'."\n";
95
  echo '<p>Autres contrôles'."\n";
96
  echo '<label><input type="checkbox" id="tilt" checked="checked"/>vision à 45°</label>'."\n";
97
  echo '<label><input type="checkbox" id="clic_pos"/>Position afichée sur clic</label>'."\n";
98
  echo '</div>'."\n";
92 99
} else {
93 100
  echo "<h1>Il faut indiquer des coordonnées.</h1>\n";
94 101
}