Révision f524783f
Ajouté par Marc Souviron il y a environ 11 ans
| 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> |
|
Formats disponibles : Unified diff
permet la visualisation d'axes horizontaux via OSM