Revision 73fd5477
ID | 73fd547726440486c9a939aea6d9b4212cff7b27 |
Parent | a9953a70 |
Child | b5af2606 |
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
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 |
} |