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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!doctype html>
<html lang="en">
<head>
<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" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body >
//les trois div de ma page web, la carte, la div info et la div du graph temperature
<div style="width:50%; height:100px" id="map"></div>
<div id="attributsdiv" style="float:left; border-radius: 15px; height:150px; width:35%; )" title="Attributs"></div>
<div id="Temp" style="height: 100px"></div>
//quand je clique sur la parcelle, cela m'affcihe les données attributaires dans la div "attributsdiv"
<script defer="defer" type="text/javascript">
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature);
});
var container = document.getElementById('attributsdiv');
if (features.length > 0) {
var info = [];
for (var i = 0, ii = features.length; i < ii; ++i) {
info.push("identifiant : ");
info.push(features[i].get('id'));
}
container.innerHTML = info.join(' ') || '(unknown)';
} else {
container.innerHTML = ' ';
}
};
//géométrie de la parcelle
var styles = {
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 00, 0.1)'
})
}),
};
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
//importer geojson de la parcelle et l'afficher sur une couche vecteur
var geojson_OGRGeoJSON = {"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
"features": [
{ "type": "Feature", "properties": { "id": 10001}, "geometry": { "type": "Polygon", "coo77650248631835 ], [ 71160.116463575439411, 5403315.206466018222272 ], [ 72126.149296538918861, 5403141.750761945731938 ], [ 71118.4, 5403068.5 ], [ 72101.3, 5403064.5], [ 71043.0, 5403060.9 ], [ 71954.8, 5403067.8 ], [ 71802.6, 5403096.4 ], [ 70775.9, 5403103.1 ], [ 71817.7, 5403197.2 ], [ 71841.1, 5403248.1 ], [ 70847.6, 5403281.8 ], [ 71843.1, 5404343.9 ], [ 71828.6, 5403403.9], [ 70822.7, 5403449.9 ], [ 70796.9, 5403601.8 ], [ 70793.9, 5403627.6 ], [ 71799.8, 5404670.4] ] ] } },
]
}
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojson_OGRGeoJSON)
});
var monGeojsonLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
//carte OSM de fond
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),monGeojsonLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([1.2, 44.55]),
zoom: 6
})
});
//graph qui doit s'afficher dans la div "Temp" quand je clique sur la parcelle
var graph = document.getElementById('Temp');
$(document).ready(function () {
$('#graph').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [10.9, 12.5, 9.4, 9.2, 14.0, 16.0, 15.6, 18.5, 21.4, 14.1, 9.6, 5.4]
}]
});
});
//ce qui réagit quand je clique avec la souris
function Click(evt) {
var pixel = evt.pixel;
displayFeatureInfo(pixel);
var graph;
map.on('click');
</script>
</body>
</html> |
