Projet

Général

Profil

Révision 73fd5477

Ajouté par Marc Souviron il y a plus de 11 ans

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.

Voir les différences:

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
  
    
}


  		












Formats disponibles :  Unified diff