1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
|
<!DOCTYPE html>
<html>
<head>
<title>GPX Data</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var pointcolor='peru', pointradius=3, strokewidth=1, gpxfile= 'file:///home/perso/current.gpx',
mapimage='osmfr', latitudecenter=7.38,longitudecenter=43.8,zoomlevel=2,
xoffset=5, textalign='left';
var raster = new ol.layer.Tile({
source: new ol.source.OSM({
imagerySet: mapimage,
key: ''
})
});
var style = {
'Point': new ol.style.Style({
text: new ol.style.Text ({ text: 'A', textAlign:textalign, offsetX:xoffset}),
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: pointcolor
}),
radius: pointradius,
stroke: new ol.style.Stroke({
color: pointcolor,
width: strokewidth
})
})
})
};
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: gpxfile,
format: new ol.format.GPX()
}),
style: function(feature) {
return style[feature.getGeometry().getType()];
}
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [latitudecenter,longitudecenter],
zoom: zoomlevel
})
});
var displayFeatureInfo = function(pixel) {
document.getElementById('info').innerHTML = ' ';
map.getTarget().style.cursor = '';
};
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
</script>
</body>
</html> |
Partager