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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| <script>
function cleapi() {
Gp.Services.getConfig({
apiKey: 'maclé',
onSuccess: loadcarte })
};
function loadcarte()
{
// création de la carte
//
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5,0.5], //image centrée par rapport aux coodonnées
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
anchorOrigin: 'bottom-left',
scale : 0.5, // taille de l'image affichée
src: '../ressources/balade.gif'
}))
});
// création d'un style pour la couche GPX
var styleGPX = new ol.style.Style({
stroke: new ol.style.Stroke({color: 'red', width: 3})
});
var carterandosavoie = new ol.layer.GeoportalWMTS({
layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS"
})
var map = new ol.Map({
layers: [carterandosavoie],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([6.28, 45.42]),
zoom: 13
})
});
for (i=0;i<mespoints.length-1;i++)
{
var marcheurFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([mespoints[i].long, mespoints[i].lat])), //coordonnées de l'image
name: 'Marcheur'
});
marcheurFeature.setStyle(iconStyle); // application du style
var vectorSource = new ol.source.Vector({
features: [marcheurFeature]
});
var marcheurLayer = new ol.layer.Vector({
source: vectorSource
});
var monGPX = new ol.layer.Vector({
source: new ol.source.Vector({
url: mespoints[i].dossier+"/carte/carte.gpx",
format: new ol.format.GPX()
}),
style: styleGPX
});
map.addLayer(marcheurLayer);
map.addLayer(monGPX);
}
var getFeatureInfo = new ol.control.GetFeatureInfo({
layers : [
{
obj : marcheurLayer,
infoFormat : "text/html",
},
{
obj : monGPX,
infoFormat : "text/html",
},
],
options : {
auto : true,
active: true,
defaultInfoFormat: "text/html",
defaultEvent: "singleclick",
cursorStyle: "pointer",
}
});
map.addControl(getfeatureinfo);
var layerSwitcher = new ol.control.LayerSwitcher({});
map.addControl(layerSwitcher);
}
window.onload= cleapi();
</script> |
