Révision ed5e83c5
| ID | ed5e83c5cb123a89b7057911973767a583b5d5aa |
| Parent | 72ecbd21 |
| Enfant | a9953a70 |
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
Fichiers
- ajouté
- modifié
- copié
- renommé
- supprimé
- addParams.php (diff)
- creerPano.php (diff)
- css
- base.css
- index_style.css
- ttn_style_1.css
- view.css
- envoyer.php (diff)
- index.php (diff)
- js
- pano.js (diff)
- utils_osm.js (diff)
- ref_points.php (diff)
- show_capline.php (diff)
Révisions
| 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&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 |
} |