Projet

Général

Profil

Révision 73fd5477

Ajouté par Marc Souviron il y a environ 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