Project

General

Profile

« Previous | Next » 

Revision 73fd5477

ID73fd547726440486c9a939aea6d9b4212cff7b27
Parent a9953a70
Child b5af2606

Added by Marc Souviron about 11 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
}