Projet

Général

Profil

Révision ed5e83c5

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

Amélioration du système de navigation assisté par OSM ou google
Correction d'un bug de non-linéarité sur les panoramas rebouclés (360°)
simplification du style

Voir les différences:

addParams.php
2 2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
3 3
<head>
4 4
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
5
   <link rel="stylesheet" media="screen" href="css/index_style.css" />
5
   <link rel="stylesheet" media="screen" href="css/base.css" />
6 6
   <title>Positionnerment dun panoramique</title>
7 7
<?php
8 8
   // tableau de vérification de conformité
creerPano.php
3 3
  <head>
4 4
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
5 5
    <title>Liste des images transformables en panoramas</title>
6
    <link rel="stylesheet" media="screen" href="css/index_style.css"/>
6
    <link rel="stylesheet" media="screen" href="css/base.css"/>
7 7
  </head>
8 8
  <body>
9 9
    <header>
css/base.css
46 46
    font-weight:bold;
47 47
    color:#F00;
48 48
}
49

  
49 50
#pano-list li {
50 51
    list-style-type:circle;
51 52
    list-style-position:inside;
......
93 94
    background-color:#fff;
94 95
}
95 96

  
97
form li {
98
    padding:1em;
99
    list-style-type:none;
100
}
101

  
96 102
.validators a {
97 103
  border:solid 0.2em #FFF;
98 104
}
css/ttn_style_1.css
1
body
2
	{
3
		
4
		background:#44F;
5
		font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
6
		font-size:small;
7
		margin:8px 0 16px;
8
		text-align:center;
9
		overflow:auto;
10
		
11
	}
12
	
13
	#top
14
	{
15
		display:block;
16
		height:10px;
17
		margin:10px auto 0;
18
		width:650px;
19
	}
20
	
21
	div#page_container
22
	{
23
		background:#fff;
24
		
25
		margin: auto;
26
		text-align:left;
27
		width:640px;
28
	}
29
	
30
	div#page_container h2 {
31
		display:inline-block;
32
		margin:1.05em;
33
		text-shadow: 0.1em 0.1em 0.15em #44F; 
34
	}
35
	#bottom
36
	{
37
		display:block;
38
		height:10px;
39
		margin:0 auto;
40
		width:650px;
41
	}
42
	
43
	h1
44
	{
45
		background-color:#6699CC;
46
		margin:0;
47
		min-height:0;
48
		padding:0;
49
		text-decoration:none;
50
		text-align: center;
51
		
52
	}
53
	
54
	h1 a
55
	{
56
		
57
		display:block;
58
		height:100%;
59
		min-height:40px;
60
		
61
	}
62
	
63
	h1 img
64
	{
65
		margin-top: 8px;
66
	}
67
	
68
	img
69
	{
70
		/*behavior:url(css/iepngfix.htc);*/
71
		border:none;
72
	}
73
	
74
	h2 + p {
75
		display:inline-block;
76
		
77
	}
78
	
79
	div#containerList
80
	{
81
		margin:20px 20px 0;
82
		padding:0 0 20px;
83
	}
84
	
85
	#containerList
86
	{
87
		font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
88
		
89
	}
90
	
91
	#containerList li
92
	{
93
		width:100%;
94
		margin:1.05em;
95
		font-size:14px;
96
		list-style-type:none;
97
		
98
	}
99
	
100
	div#containerList ul
101
	{
102
		font-size:100%;
103
		list-style-type:circle;
104
		margin:0;
105
		padding:0;
106
		width:100%;
107
	}
108
	
109
	li a{
110
	
111
	    color:#3F2DFF;
112
	    text-decoration:none;
113
	    font-size:16px;
114
    }
115
	 
116
	li a:hover {
117
		color:#FF9900;
118
		text-decoration:underline;
119
	}
120
	
121
	li img {
122
		margin-left:20px;
123
	}
124
	
125
	#footer
126
	{
127
		width:640px;
128
		clear:both;
129
		color:#999999;
130
		text-align:center;
131
		width:640px;
132
		padding-bottom: 15px;
133
		font-size: 85%;
134
	}
135
	
css/view.css
1
body
2
{
3
	
4
	background:#44F;
5
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
6
	font-size:small;
7
	margin:8px 0 16px;
8
	text-align:center;
9
}
10

  
11
#form_container
12
{
13
	background:#fff;
14
	
15
	margin:0 auto;
16
	text-align:left;
17
	width:640px;
18
}
19

  
20
#top
21
{
22
	display:block;
23
	height:10px;
24
	margin:10px auto 0;
25
	width:650px;
26
}
27

  
28
#footer
29
{
30
	width:640px;
31
	clear:both;
32
	color:#999999;
33
	text-align:center;
34
	width:640px;
35
	padding-bottom: 15px;
36
	font-size: 85%;
37
}
38

  
39
#footer a{
40
	color:#999999;
41
	text-decoration: none;
42
	border-bottom: 1px dotted #999999;
43
}
44

  
45
#bottom
46
{
47
	display:block;
48
	height:10px;
49
	margin:0 auto;
50
	width:650px;
51
}
52

  
53
form.appnitro
54
{
55
	margin:20px 20px 0;
56
	padding:0 0 20px;
57
}
58

  
59
h1
60
{
61
	background-color:#6699CC;
62
	margin:0;
63
	min-height:0;
64
	padding:0;
65
	text-decoration:none;
66
	text-align: center;
67
	
68
}
69

  
70
h1 a
71
{
72
	
73
	display:block;
74
	height:100%;
75
	min-height:40px;
76
	overflow:hidden;
77
}
78

  
79

  
80
h1 img
81
{
82
	margin-top: 8px;
83
	
84
}
85

  
86
img
87
{
88
	/*behavior:url(css/iepngfix.htc);*/
89
	border:none;
90
}
91

  
92
div#form_container h2 
93
{
94
	margin:1.05em;
95
	text-shadow: 0.1em 0.1em 0.15em #44F; 
96
}
97
/**** Form Section ****/
98
.appnitro
99
{
100
	font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
101
	font-size:small;
102
}
103

  
104
.appnitro li
105
{
106
	width:61%;
107
}
108

  
109
form ul
110
{
111
	font-size:100%;
112
	list-style-type:none;
113
	margin:0;
114
	padding:0;
115
	width:100%;
116
}
117

  
118
form li
119
{
120
	display:block;
121
	margin:0;
122
	padding:4px 5px 2px 9px;
123
	position:relative;
124
}
125

  
126
form li:after
127
{
128
	clear:both;
129
	content:".";
130
	display:block;
131
	height:0;
132
	visibility:hidden;
133
}
134

  
135
.buttons:after
136
{
137
	clear:both;
138
	content:".";
139
	display:block;
140
	height:0;
141
	visibility:hidden;
142
}
143

  
144
.buttons
145
{
146
	clear:both;
147
	display:block;
148
	margin-top:10px;
149
}
150

  
151
* html form li
152
{
153
	height:1%;
154
}
155

  
156
* html .buttons
157
{
158
	height:1%;
159
}
160

  
161
* html form li div
162
{
163
	display:inline-block;
164
}
165

  
166
form li div
167
{
168
	color:#444;
169
	margin:0 4px 0 0;
170
	padding:0 0 8px;
171
}
172

  
173
.clear
174
{
175
	clear:both;
176
}
177

  
178
form li div label
179
{
180
	clear:both;
181
	color:#444;
182
	display:block;
183
	font-size:9px;
184
	line-height:9px;
185
	margin:0;
186
	padding-top:3px;
187
}
188

  
189

  
190
form li span
191
{
192
	color:#444;
193
	float:left;
194
	margin:0 4px 0 0;
195
	padding:0 0 8px;
196
}
197

  
198
.form_description
199
{
200
	border-bottom:1px dotted #ccc;
201
	clear:both;
202
	display:inline-block;
203
	margin:0 0 1em;
204
}
205

  
206
.form_description[class]
207
{
208
	display:block;
209
}
210

  
211
.form_description h2
212
{
213
	clear:left;
214
	font-size:160%;
215
	font-weight:400;
216
	margin:0 0 3px;
217
}
218

  
219
.form_description p
220
{
221
	font-size:95%;
222
	line-height:130%;
223
	margin:0 0 12px;
224
}
225

  
226
div#infoSize #bulle,#txtInfo
227
{
228
	display:inline-block;
229
}
230

  
231
img#bulle
232
{
233
	margin-right:1.1em;
234
}
235

  
236
#pb_outer {
237
	height: 20px;
238
	border: 1px inset #000000;
239
	width: 80%;
240
	margin: 20px auto;
241
	display: none;
242
}
243
#pb_inner {
244
	font-weight: bold;
245
	color: #FFFFFF;
246
	background-color: #003399;
247
	height: 20px;
248
	width: 1px;
249
	text-align: center;
250
}
251

  
252
div#genererPano 
253
{
254
	border:2px inset #FF0;
255
	border-radius:4px;
256
	width : 40%;
257
	margin : auto;
258
	margin-bottom: 10px; 
259
	
260
}
261

  
262
label#l_generer
263
{
264
	background-color:#6699CC;
265
	padding:2px;
266
	border-radius:10px;
267
}
268

  
envoyer.php
3 3
  <head>
4 4
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
5 5
    <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
6
    <link rel="stylesheet" media="screen" href="css/view.css" />
6
    <link rel="stylesheet" media="screen" href="css/base.css" />
7 7
    <title>Envoi d'une image sur le serveur</title>
8 8
  </head>
9 9
  <body id="main_body">
10
    <img id="top" src="images/top.png" alt="">
11
    <div id="form_container">
12
      <h1><img src="images/tetaneutral.svg"></h1>
10
    <header>
11
      <h1><img src="images/tetaneutral.svg" alt="tetaneutral.net"/></h1>
12
    </header>
13
    <section id="main">
14
      <h2>Ajouter un nouveau panorama</h2>
13 15
      <form action="uploadReceive.php" method="post" enctype="multipart/form-data" id="upload">
14
	<h2>Ajouter un nouveau panorama</h2>
15 16
	<ul>
16
	  <li id="li_1" >
17
	    <label for="file" class="description">Envoyer le fichier :</label>
17
	  <li>
18
	    <label for="file" class="description">Envoyer le fichier :</label>
18 19
	    <div>
19
	      <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="panoramas"/>
20
	      <input type="file" name="files[]" id="file" multiple="multiple"
21
		     title="Le fichier à envoyer doit être une image de taille maximale 300 Mo"/>
20
	    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="panoramas"/>
21
	    <input type="file" name="files[]" id="file" multiple="multiple"
22
		   title="Le fichier à envoyer doit être une image de taille maximale 300 Mo"/>
22 23
	    </div>  
23 24
	  </li>
24 25
	  
25
	  <li class="buttons">
26
	    <input type="submit" name="submit" id="submit" value="Submit" />
26
	  <li>
27
	    <input type="submit" name="submit" value="Envoyer" />
27 28
	  </li>
28 29
	</ul>
29 30
      </form>
30
      <!-- Fin du formulaire -->
31
      <div id="footer">
32
	<a href="./index.php">Retour liste</a>
33
      </div>
34
    </div>
31
      <a href="./index.php">Retour liste</a>
32
    </section>
33
    <footer class="validators"><samp>
34
	page validée par
35
	<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_xhtml.svg"
36
								 alt="Valid XHTML" title="xHTML validé !"/></a>
37
	<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid_css.svg"
38
									alt="CSS validé !" title="CSS validé !"/></a>
39
    </samp></footer>
35 40
  </body>
36 41
</html>
index.php
3 3
  <head>
4 4
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
5 5
    <title>Liste des panoramas</title>
6
    <link rel="stylesheet" media="screen" href="css/index_style.css"/>
6
    <link rel="stylesheet" media="screen" href="css/base.css"/>
7 7
  </head>
8 8
  <body>
9 9
    <header>
js/pano.js
122 122
	}
123 123
    }
124 124
    drawDecorations(ox, oy);
125
    var cap_ele = zm.get_cap_ele(last.x, last.y);
126
    angle_control.value = cap_ele.cap.toFixed(2);
127
    elvtn_control.value = cap_ele.ele.toFixed(2);
125 128
}
126 129

  
127 130
function draw_tile_del(ref, idx, tx, ty, ox, oy, twidth, theight) {
......
162 165
	}
163 166
    }
164 167

  
165
    //cntext.font = "20pt Arial";
166
    //cntext.fillRect(0, 0, 200, 20);
167
    //cntext.fillStyle = "rgb(255,0,0)";
168
    //cntext.fillText(od.toFixed(2), 5, 20);
169
    //for (i=0; i<canvas.width/wgrd; i++) {
170
	//cntext.strokeRect(i*wgrd, 0, wgrd, 20);
171
    //}
172 168
    if (twidth) {
173 169
	cntext.restore();
174 170
    }
......
464 460
		    dpix  = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
465 461
		    delt = this.ref_pixels[this.ref_pixels.length-1].shift_y - this.ref_pixels[1].shift_y;
466 462
		}
467
		this.ref_pixels[0].dshft_y = delt/dpix;
463
		this.ref_pixels[0].dshft_y = -delt/dpix;
468 464
		this.ref_pixels[ord_pts.length].dshft_y = this.ref_pixels[0].dshft_y;
469 465
		dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
470
		this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y - dpix*this.ref_pixels[0].dshft_y;
466
		this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y + dpix*this.ref_pixels[0].dshft_y;
471 467
	    } else {
472 468
		this.ref_pixels[0].shift_y = this.ref_pixels[1].shift_y;
473 469
		this.ref_pixels[0].dshft_y = 0;
js/utils_osm.js
24 24
	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));
25 25
    }
26 26

  
27
    map.addLayer(new OpenLayers.Layer.OSM());
27
    if (typeof base_layers != 'undefined') {
28
	map.addControl(new OpenLayers.Control.LayerSwitcher());
29
	for (var i = 0; i < base_layers.length; i++) {
30
	    map.addLayer(base_layers[i]);
31
	    if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
32
		base_layers[i].mapObject.setTilt(0);
33
	    }
34
	}
35
    } else {
36
	map.addLayer(new OpenLayers.Layer.OSM());
37
    }
28 38

  
29 39
    if (typeof contour != 'undefined') contours = [contour];
30 40
    if (typeof contours == 'undefined') contours = new Array;
......
53 63
	map.addLayer(cntr);
54 64
    }
55 65

  
66
    if (typeof ref_line != 'undefined') ref_lines = [ref_line];
67
    if (typeof ref_lines != 'undefined') {
68
	if (typeof def_line_style == 'undefined') def_line_style = {};
69
	var def_ln = {
70
	    width:       def_line_style.width? def_line_style.width:2,
71
	    color:       def_line_style.color? def_line_style.color:'#00F',
72
	    length:      def_line_style.length? def_line_style.length:20000,
73
	    opacity:     def_line_style.opacity? def_line_style.opacity:1}
74
	
75
	var lineLayer = new OpenLayers.Layer.Vector("ref_lines"); 
76
	map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
77
	for (var i = 0; i < ref_lines.length; i++) {
78
	    var ln = ref_lines[i];
79
	    if(isNaN(ln.cap)) {
80
		var pt = {lon: ln.lon2, lat: ln.lat2};
81
	    } else {
82
		var LonLat = new OpenLayers.LonLat(ln.lon1, ln.lat1);
83
		var dist = ln.length? ln.length:def_ln.length;
84
		var pt = OpenLayers.Util.destinationVincenty(LonLat, ln.cap, dist);
85
	    }
86
	    var points = new Array(
87
		new OpenLayers.Geometry.Point(ln.lon1, ln.lat1),
88
		new OpenLayers.Geometry.Point(pt.lon, pt.lat)
89
	    );
90
	    points[0].transform("EPSG:4326", map.getProjectionObject());
91
	    points[1].transform("EPSG:4326", map.getProjectionObject());
92
	    var line = new OpenLayers.Geometry.LineString(points);
93

  
94
	    var style = { 
95
		strokeColor:   ln.color? ln.color:def_ln.color, 
96
		strokeWidth:   ln.width? ln.width:def_ln.width,
97
		strokeOpacity: ln.width? ln.opacity:def_ln.opacity
98
	    };
99

  
100
	    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
101
	    lineLayer.addFeatures([lineFeature]);
102
	}
103
	map.addLayer(lineLayer);                    
104
    }
105

  
56 106
    if (typeof ref_point != 'undefined') ref_points = [ref_point];
57 107
    if (typeof ref_points != 'undefined') {
58 108
	refpts_layer = new OpenLayers.Layer.Vector("ref_points", {projection: "EPSG:4326"}); 
......
114 164
	}
115 165
	if (typeof zoom == 'undefined') map.zoomToExtent(refpts_layer.getDataExtent());
116 166
    }
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 167
    if (typeof get_lon_lat != 'undefined' && get_lon_lat) {
158 168
	map.events.register("click", map, function(e) {
159 169
	    var position = map.getLonLatFromViewPortPx(e.xy);
160 170
	    position.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
161
	    alert(position.lon.toFixed(3) + ', ' + position.lat.toFixed(3));
171
	    alert(position.lat.toFixed(5) + ', ' + position.lon.toFixed(5));
162 172
	});
163 173
    }
164 174
}
ref_points.php
1 1
<?php
2 2
$ref_points = array (
3
                     'Marc' => array(43.60568, 1.42841, 170),
3
                     'Marc' => array(43.60570, 1.42846, 170),
4 4
                     'FF2' => array(43.67737, 1.45077, 140),
5 5
		     'Clocher de Saint-Sernin' => array(43.6085, 1.4424, 214),
6 6
		     'Clocher des Minimes' => array(43.61811, 1.43639, 192),
......
22 22
		     "Cheminée du sang de serp" => array(43.62494, 1.42202, 170),
23 23
		     "Château d'eau de blagnac" => array(43.62443, 1.39547, 170),
24 24
		     "Château d'eau de fenouillet" => array(43.67984, 1.39290,170),
25
		     "Château d'eau d'Aucamville" => array(43.66759, 1.42796, 170),
25 26
		     "Tour du boulevard de Genève" => array(43.617408, 1.419533, 163),
26 27
		     );
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="style.css" />
5
  <link rel="stylesheet" type="text/css" href="map.css" />
6 6
<?php
7 7
if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {
8 8
  $cap = $_REQUEST['cap'];
......
17 17
} else {
18 18
  $pt_comment = 'Le point de départ';
19 19
}
20
if (isset($_REQUEST['dist'])) {
21
  $dist = $_REQUEST['dist'];
22
} else {
23
  $dist = 120000;
24
}
20 25
if ($complete) {
21 26
  echo <<< EOS
27
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
28
<script src="http://openlayers.org/api/OpenLayers.js"></script>
22 29
    <script>
23 30
    zoom = 12;
24
  var get_lon_lat = false;
31
  var get_lon_lat = true;
25 32
  var scale_line = true;
26 33

  
27 34
  var def_points_style = {
......
50 57
 lat1: $org_lat,
51 58
 cap: $cap,
52 59
 width: 2,
53
 length: 120000,
60
 length: $dist,
54 61
 color: '#F00'
55 62
};
63
var base_layers = [
64
		   new OpenLayers.Layer.OSM(),
65
		   new OpenLayers.Layer.Google(
66
					       "Google Satellite",
67
  {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
68
					       ),
69
		   new OpenLayers.Layer.Google(
70
					       "Google Physical",
71
  {type: google.maps.MapTypeId.TERRAIN, visibility: false}
72
					       ),
73
		   new OpenLayers.Layer.Google(
74
					       "Google Streets",
75
  {numZoomLevels: 20, visibility: false}
76
					       ),
77
		   new OpenLayers.Layer.Google(
78
					       "Google Hybrid",
79
  {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, visibility: false}
80
					       )];
81

  
56 82
</script>
57
<script src="http://openlayers.org/api/OpenLayers.js"></script>
58 83
<script src="js/utils_osm.js"></script>
59 84
EOS;
60 85
}

Formats disponibles : Unified diff