Project

General

Profile

« Previous | Next » 

Revision f524783f

IDf524783f735489c888ed04308ff5824029a8af43
Parent a752b78b
Child 72ecbd21

Added by Marc Souviron over 9 years ago

permet la visualisation d'axes horizontaux via OSM

Files

  • added
  • modified
  • copied
  • renamed
  • deleted

View differences

Changesets

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>