Projet

Général

Profil

« Précédent | Suivant » 

Révision f524783f

IDf524783f735489c888ed04308ff5824029a8af43
Parent a752b78b
Enfant 72ecbd21

Ajouté par Marc Souviron il y a environ 11 ans

permet la visualisation d'axes horizontaux via OSM

Fichiers

  • ajouté
  • modifié
  • copié
  • renommé
  • supprimé

Voir les différences

Révisions

js/pano.js
8 8 
if (ref_points == undefined) var ref_points = new Array();
9 9 
if (image_loop == undefined) var image_loop = true;
10 10 

  		




  
  11
  
    
var pt_alt;


  		




  
  12
  
    
var pt_lat;


  		




  
  13
  
    
var pt_lon;


  		




  11
  14
  
    

  		




  12
  15
  
    
var debug_mode = false;


  		




  13
  16
  
    
var canvas;


  		




  ......




  173
  176
  
    

  		




  174
  177
  
    
function insert_drawn_point(lat, lon, alt) {


  		




  175
  178
  
    
    var rt = 6371;  // Rayon de la terre


  		




  176
  
  
    
    var alt1 = document.getElementById('pos_alt').childNodes[0].nodeValue;


  		




  177
  
  
    
    var lat1 = document.getElementById('pos_lat').childNodes[0].nodeValue*Math.PI/180;


  		




  178
  
  
    
    var lon1 = document.getElementById('pos_lon').childNodes[0].nodeValue*Math.PI/180;


  		




  
  179
  
    
    var alt1 = pt_alt;


  		




  
  180
  
    
    var lat1 = pt_lat*Math.PI/180;


  		




  
  181
  
    
    var lon1 = pt_lon*Math.PI/180;


  		




  179
  182
  
    
    var alt2 = alt;


  		




  180
  183
  
    
    var lat2 = lat*Math.PI/180;


  		




  181
  184
  
    
    var lon2 = lon*Math.PI/180;


  		




  ......




  713
  716
  
    
    var sel_pt = document.getElementById('sel_point');


  		




  714
  717
  
    
    var do_insert = document.getElementById('do-insert');


  		




  715
  718
  
    
    var do_delete = document.getElementById('do-delete');


  		




  
  719
  
    
    var show_cap = document.getElementById('show-cap');


  		




  716
  720
  
    
    var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);


  		




  717
  721
  
    
    var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;


  		




  718
  722
  
    
    for(var i = 0; i < zm.pt_list.length; i++) {


  		




  ......




  724
  728
  
    
    }


  		




  725
  729
  
    
    do_delete.onclick = function() {delete_ref_point(insrt)};


  		




  726
  730
  
    
    do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};


  		




  
  731
  
    
    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);


  		




  
  732
  
    
    show_cap.onclick = function() {window.open("show_capline.php?cap="+res.cap+'&org_lat='+pt_lat+'&org_lon='+pt_lon)};


  		




  727
  733
  
    
    return false;


  		




  728
  734
  
    
}


  		




  729
  735
  
    

  		




  ......




  815
  821
  
    
}


  		




  816
  822
  
    

  		




  817
  823
  
    
window.onload = function() {	


  		




  
  824
  
    
    pt_alt = document.getElementById('pos_alt').childNodes[0].nodeValue;


  		




  
  825
  
    
    pt_lat = document.getElementById('pos_lat').childNodes[0].nodeValue;


  		




  
  826
  
    
    pt_lon = document.getElementById('pos_lon').childNodes[0].nodeValue;


  		




  
  827
  
    

  		




  818
  828
  
    
    localisation = document.getElementById("locadraw");


  		




  819
  829
  
    
    adding = document.getElementById("adding");


  		




  820
  830
  
    
    canvas = document.getElementById("mon-canvas");


  		












  

    
      js/utils_osm.js
    
  





  
  1
  
    
function draw_map() {


  		




  
  2
  
    

  		




  
  3
  
    
    var zcontrol;


  		




  
  4
  
    
    if (typeof zoom_control != 'undefined') {


  		




  
  5
  
    
	switch (zoom_control) {


  		




  
  6
  
    
	case 'full':


  		




  
  7
  
    
	    zcontrol = new OpenLayers.Control.PanZoomBar();


  		




  
  8
  
    
	    break;


  		




  
  9
  
    
	case 'light':


  		




  
  10
  
    
	default:


  		




  
  11
  
    
	    zcontrol = new OpenLayers.Control.Zoom();


  		




  
  12
  
    
	}


  		




  
  13
  
    
    } else zcontrol = new OpenLayers.Control.Zoom();


  		




  
  14
  
    

  		




  
  15
  
    
    var map = new OpenLayers.Map({


  		




  
  16
  
    
	div: "map",


  		




  
  17
  
    
        zoom: typeof zoom == 'undefined' ? 10:zoom,


  		




  
  18
  
    
	controls:[zcontrol,


  		




  
  19
  
    
		  new OpenLayers.Control.KeyboardDefaults(),


  		




  
  20
  
    
		  new OpenLayers.Control.Navigation()],


  		




  
  21
  
    
    });


  		




  
  22
  
    

  		




  
  23
  
    
    if (typeof scale_line != 'undefined' && scale_line == true) {


  		




  
  24
  
    
	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));


  		




  
  25
  
    
    }


  		




  
  26
  
    

  		




  
  27
  
    
    map.addLayer(new OpenLayers.Layer.OSM());


  		




  
  28
  
    

  		




  
  29
  
    
    if (typeof contour != 'undefined') contours = [contour];


  		




  
  30
  
    
    if (typeof contours == 'undefined') contours = new Array;


  		




  
  31
  
    
    for (var i = 0; i < contours.length; i++) {


  		




  
  32
  
    
	var ct = contours[i];


  		




  
  33
  
    
	var cntr = new OpenLayers.Layer.Vector("contour_"+i, {


  		




  
  34
  
    
	    strategies: [new OpenLayers.Strategy.Fixed()],


  		




  
  35
  
    
	    projection: new OpenLayers.Projection("EPSG:4326"),


  		




  
  36
  
    
	    styleMap: new OpenLayers.StyleMap({


  		




  
  37
  
    
		strokeWidth:     ct.strokeWidth,


  		




  
  38
  
    
		strokeColor:     ct.strokeColor,


  		




  
  39
  
    
		strokeOpacity:   ct.strokeOpacity,


  		




  
  40
  
    
		fillOpacity:     ct.fillOpacity,


  		




  
  41
  
    
		fillColor:       ct.fillColor


  		




  
  42
  
    
	    }),


  		




  
  43
  
    
	    protocol: new OpenLayers.Protocol.HTTP({


  		




  
  44
  
    
		url: ct.url,


  		




  
  45
  
    
		format: new OpenLayers.Format.OSM(),


  		




  
  46
  
    
	    }),


  		




  
  47
  
    
	    eventListeners: {


  		




  
  48
  
    
		"featuresadded": function () {


  		




  
  49
  
    
		    if (typeof fit_contours == 'undefined' || fit_contours) this.map.zoomToExtent(this.getDataExtent());


  		




  
  50
  
    
		}


  		




  
  51
  
    
	    }


  		




  
  52
  
    
	});


  		




  
  53
  
    
	map.addLayer(cntr);


  		




  
  54
  
    
    }


  		




  
  55
  
    

  		




  
  56
  
    
    if (typeof ref_point != 'undefined') ref_points = [ref_point];


  		




  
  57
  
    
    if (typeof ref_points != 'undefined') {


  		




  
  58
  
    
	refpts_layer = new OpenLayers.Layer.Vector("ref_points", {projection: "EPSG:4326"}); 


  		




  
  59
  
    
	var selectMarkerControl = new OpenLayers.Control.SelectFeature(refpts_layer, {


  		




  
  60
  
    
	    onSelect: function(feature) {


  		




  
  61
  
    
		var le_popup = new OpenLayers.Popup.FramedCloud("Popup",


  		




  
  62
  
    
								feature.attributes.lonlat,


  		




  
  63
  
    
								null,


  		




  
  64
  
    
								feature.attributes.description,


  		




  
  65
  
    
								null,


  		




  
  66
  
    
								true);


  		




  
  67
  
    
		                                                //function() {selectMarkerControl.unselect(feature)});


  		




  
  68
  
    
		feature.popup = le_popup;


  		




  
  69
  
    
		map.addPopup(le_popup);


  		




  
  70
  
    
	    },


  		




  
  71
  
    
	    onUnselect: function(feature) {


  		




  
  72
  
    
		//alert(feature.id);


  		




  
  73
  
    
		map.removePopup(feature.popup);


  		




  
  74
  
    
		feature.popup.destroy();


  		




  
  75
  
    
		feature.popup = null;


  		




  
  76
  
    
	    },


  		




  
  77
  
    
	    multiple: true,


  		




  
  78
  
    
	    toggle: true,


  		




  
  79
  
    
	});


  		




  
  80
  
    
	map.addControl(selectMarkerControl);


  		




  
  81
  
    
	


  		




  
  82
  
    
	selectMarkerControl.activate();


  		




  
  83
  
    
	map.addLayer(refpts_layer);


  		




  
  84
  
    
	


  		




  
  85
  
    

  		




  
  86
  
    
	if (typeof def_points_style == 'undefined') def_points_style = {};


  		




  
  87
  
    
	var def_pt = {


  		




  
  88
  
    
	    icon_url:    def_points_style.icon_url,


  		




  
  89
  
    
	    icon_width:  def_points_style.icon_width,


  		




  
  90
  
    
	    icon_height: def_points_style.icon_height,


  		




  
  91
  
    
	    showPopup:   def_points_style.showPopup   ? def_points_style.showPopup:false,


  		




  
  92
  
    
	    icon_shiftX: def_points_style.icon_shiftX ? def_points_style.icon_shiftX:0,


  		




  
  93
  
    
	    icon_shiftY: def_points_style.icon_shiftY ? def_points_style.icon_shiftY:0,


  		




  
  94
  
    
	    opacity:     def_points_style.opacity ? def_points_style.opacity:1}


  		




  
  95
  
    
	


  		




  
  96
  
    
	for (var i = 0; i < ref_points.length; i++) {


  		




  
  97
  
    
	    var pt = ref_points[i];


  		




  
  98
  
    
            var ptGeo = new OpenLayers.Geometry.Point(pt.lon, pt.lat);


  		




  
  99
  
    
            ptGeo.transform("EPSG:4326", map.getProjectionObject());


  		




  
  100
  
    
	    var LonLat = new OpenLayers.LonLat(pt.lon, pt.lat).transform("EPSG:4326", map.getProjectionObject());


  		




  
  101
  
    
	    map.setCenter(LonLat);


  		




  
  102
  
    
	    var laFeature = new OpenLayers.Feature.Vector(ptGeo,


  		




  
  103
  
    
							  {description:pt.descr, lonlat: LonLat},


  		




  
  104
  
    
							  {externalGraphic: pt.icon_url?    pt.icon_url:def_pt.icon_url,


  		




  
  105
  
    
							   graphicWidth:    pt.icon_width?  pt.icon_width:def_pt.icon_width,


  		




  
  106
  
    
							   graphicHeight:   pt.icon_height? pt.icon_height:def_pt.icon_height,


  		




  
  107
  
    
							   graphicXOffset:  pt.icon_shiftX? pt.icon_shiftX:def_pt.icon_shiftX,


  		




  
  108
  
    
							   graphicYOffset:  pt.icon_shiftY? pt.icon_shiftY:def_pt.icon_shiftY,


  		




  
  109
  
    
							   graphicOpacity:  pt.opacity?     pt.opacity:def_pt.opacity,


  		




  
  110
  
    
							   title:           pt.title?       pt.title :''});


  		




  
  111
  
    
	    if (i == 0) elFeature = laFeature;


  		




  
  112
  
    
            refpts_layer.addFeatures(laFeature);


  		




  
  113
  
    
	    if (pt.showPopup) selectMarkerControl.select(laFeature);


  		




  
  114
  
    
	}


  		




  
  115
  
    
	if (typeof zoom == 'undefined') map.zoomToExtent(refpts_layer.getDataExtent());


  		




  
  116
  
    
    }


  		




  
  117
  
    

  		




  
  118
  
    
    if (typeof ref_line != 'undefined') ref_lines = [ref_line];


  		




  
  119
  
    
    if (typeof ref_lines != 'undefined') {


  		




  
  120
  
    
	if (typeof def_line_style == 'undefined') def_line_style = {};


  		




  
  121
  
    
	var def_ln = {


  		




  
  122
  
    
	    width:       def_line_style.width? def_line_style.width:2,


  		




  
  123
  
    
	    color:       def_line_style.color? def_line_style.color:'#00F',


  		




  
  124
  
    
	    length:      def_line_style.length? def_line_style.length:20000,


  		




  
  125
  
    
	    opacity:     def_line_style.opacity? def_line_style.opacity:1}


  		




  
  126
  
    
	


  		




  
  127
  
    
	var lineLayer = new OpenLayers.Layer.Vector("ref_lines"); 


  		




  
  128
  
    
	map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     


  		




  
  129
  
    
	for (var i = 0; i < ref_lines.length; i++) {


  		




  
  130
  
    
	    var ln = ref_lines[i];


  		




  
  131
  
    
	    if(isNaN(ln.cap)) {


  		




  
  132
  
    
		var pt = {lon: ln.lon2, lat: ln.lat2};


  		




  
  133
  
    
	    } else {


  		




  
  134
  
    
		var LonLat = new OpenLayers.LonLat(ln.lon1, ln.lat1);


  		




  
  135
  
    
		var dist = ln.length? ln.length:def_ln.length;


  		




  
  136
  
    
		var pt = OpenLayers.Util.destinationVincenty(LonLat, ln.cap, dist);


  		




  
  137
  
    
	    }


  		




  
  138
  
    
	    var points = new Array(


  		




  
  139
  
    
		new OpenLayers.Geometry.Point(ln.lon1, ln.lat1),


  		




  
  140
  
    
		new OpenLayers.Geometry.Point(pt.lon, pt.lat)


  		




  
  141
  
    
	    );


  		




  
  142
  
    
	    points[0].transform("EPSG:4326", map.getProjectionObject());


  		




  
  143
  
    
	    points[1].transform("EPSG:4326", map.getProjectionObject());


  		




  
  144
  
    
	    var line = new OpenLayers.Geometry.LineString(points);


  		




  
  145
  
    

  		




  
  146
  
    
	    var style = { 


  		




  
  147
  
    
		strokeColor:   ln.color? ln.color:def_ln.color, 


  		




  
  148
  
    
		strokeWidth:   ln.width? ln.width:def_ln.width,


  		




  
  149
  
    
		strokeOpacity: ln.width? ln.opacity:def_ln.opacity


  		




  
  150
  
    
	    };


  		




  
  151
  
    

  		




  
  152
  
    
	    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);


  		




  
  153
  
    
	    lineLayer.addFeatures([lineFeature]);


  		




  
  154
  
    
	}


  		




  
  155
  
    
	map.addLayer(lineLayer);                    


  		




  
  156
  
    
    }


  		




  
  157
  
    
    if (typeof get_lon_lat != 'undefined' && get_lon_lat) {


  		




  
  158
  
    
	map.events.register("click", map, function(e) {


  		




  
  159
  
    
	    var position = map.getLonLatFromViewPortPx(e.xy);


  		




  
  160
  
    
	    position.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));


  		




  
  161
  
    
	    alert(position.lon.toFixed(3) + ', ' + position.lat.toFixed(3));


  		




  
  162
  
    
	});


  		




  
  163
  
    
    }


  		




  
  164
  
    
}


  		




  
  165
  
    

  		




  
  166
  
    
if (typeof addLoadEvent == 'function') addLoadEvent(draw_map);


  		




  
  167
  
    
else window.onload = draw_map;


  		












  

    
      panorama.php
    
  





  184
  184
  
    
       echo "<input type=\"button\" id=\"do-insert\" value=\"insérer\"/>\n";


  		




  185
  185
  
    
       echo "<input type=\"button\" id=\"do-delete\" value=\"suppimer\"/>\n";


  		




  186
  186
  
    
       echo "<input type=\"button\" id=\"do-cancel\" value=\"annuler\"/>\n";


  		




  
  187
  
    
       echo "<input type=\"button\" id=\"show-cap\" value=\"visualiser cet axe sur OSM\"/>\n";


  		




  187
  188
  
    
       echo "</p>\n";


  		




  188
  189
  
    
     }


  		




  189
  190
  
    
     


  		












  

    
      show_capline.php
    
  





  
  1
  
    
<head>


  		




  
  2
  
    
  <title>Visualisation axe horizontal sur OSM</title>


  		




  
  3
  
    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


  		




  
  4
  
    
  <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>


  		




  
  5
  
    
  <link rel="stylesheet" type="text/css" href="style.css" />


  		




  
  6
  
    
<?php


  		




  
  7
  
    
   if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {


  		




  
  8
  
    
     $cap = $_REQUEST['cap'];


  		




  
  9
  
    
     $org_lat = $_REQUEST['org_lat'];


  		




  
  10
  
    
     $org_lon = $_REQUEST['org_lon'];


  		




  
  11
  
    
     $complete = true;


  		




  
  12
  
    
   } else {


  		




  
  13
  
    
     $complete = false;


  		




  
  14
  
    
   }


  		




  
  15
  
    
$pt_comment = 'Le point de départ';


  		




  
  16
  
    
if ($complete) {


  		




  
  17
  
    
  echo <<< EOS


  		




  
  18
  
    
    <script>


  		




  
  19
  
    
    zoom = 12;


  		




  
  20
  
    
  var get_lon_lat = false;


  		




  
  21
  
    
  var scale_line = true;


  		




  
  22
  
    

  		




  
  23
  
    
  var def_points_style = {


  		




  
  24
  
    
  showPopup: false,


  		




  
  25
  
    
  icon_width: 24,


  		




  
  26
  
    
  icon_height: 24,


  		




  
  27
  
    
  icon_shiftX: -12,


  		




  
  28
  
    
  icon_shiftY: -24,


  		




  
  29
  
    
  opacity: 0.7}


  		




  
  30
  
    

  		




  
  31
  
    
  var ref_point = {


  		




  
  32
  
    
  lon: $org_lon,


  		




  
  33
  
    
  lat: $org_lat,


  		




  
  34
  
    
  icon_url: 'images/ptref.png',


  		




  
  35
  
    
  descr: '<div id="bulle">$pt_comment</div>',


  		




  
  36
  
    
  showPopup: true,


  		




  
  37
  
    
  icon_width: 24,


  		




  
  38
  
    
  icon_height: 24,


  		




  
  39
  
    
  icon_shiftX: -12,


  		




  
  40
  
    
  icon_shiftY: -24,


  		




  
  41
  
    
  title: 'chez nous'


  		




  
  42
  
    
  };


  		




  
  43
  
    

  		




  
  44
  
    
  var ref_line = {


  		




  
  45
  
    
  lon1: $org_lon,


  		




  
  46
  
    
  lat1: $org_lat,


  		




  
  47
  
    
  cap: $cap,


  		




  
  48
  
    
  width: 2,


  		




  
  49
  
    
  length: 120000,


  		




  
  50
  
    
  color: '#F00'


  		




  
  51
  
    
  };


  		




  
  52
  
    
  </script>


  		




  
  53
  
    
  <script src="http://openlayers.org/api/OpenLayers.js"></script>


  		




  
  54
  
    
  <script src="js/utils_osm.js"></script>


  		




  
  55
  
    
EOS;


  		




  
  56
  
    
 }


  		




  
  57
  
    
?>


  		




  
  58
  
    
</head>


  		




  
  59
  
    
<body>


  		




  
  60
  
    
<?php


  		




  
  61
  
    
if ($complete) {


  		




  
  62
  
    
  echo '<div id="map"></div>'."\n";


  		




  
  63
  
    
 } else {


  		




  
  64
  
    
  echo "<h1>Il faut indiquer des coordonnées.</h1>\n";


  		




  
  65
  
    
 }


  		




  
  66
  
    
?>


  		




  
  67
  
    
</body>


  		




  
  68
  
    
</html>