Div et contenu

**GUL75** · 27/09/2016, 12h16

Bonjour à tous,

Avec Openlayers (javascript) je veux afficher une carte puis quand je clique sur une parcelle, des infos s'affichent dans une div et un graphique s'affiche dans une autre div. Le tout simultanément.
Voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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 >
 
    <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>
 
      <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 = '&nbsp;';
        }
      };
                //géométrie 
        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()];
        };
                
        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
          });
        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-->
         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]
            }]
        });
 
    }); 
               
                <!--variables reagissant au clic souris-->
      function Click(evt) {
        var pixel = evt.pixel;
        displayFeatureInfo(pixel);
        var graph;
        
      map.on('click');  
 
    </script>
 
 
  </body>
</html>

1° ma div pour le graph ne s'affiche pas: qu'ai-je oublié et où?
2° mon graph traduit les infos données d'un csv. Je voudrais savoir s'il peut afficher en dynamique certaines des infos de la table attributaire de la parcelle.
Par exemple dans la première div il y a des infos générales et dans la div2 les colonnes avec les températures s'affichent sous forme de graph.
L'idée serait qu'à chaque clic sur une parcelle les infos changent.

Pourriez-vous m'aider?
Merci
GUL75

Invité · 27/09/2016, 12h21

Bonjour et bienvenu sur DVP,

1/ "probleme div et contenu" : avec un tel titre, tu ne risques pas d'attirer les foules....

Merci d'être plus explicite et précis (et évite le mot "problème" !).

2/ Quelques explications et commentaires dans le code aideraient à cerner les éléments entrant en compte dans la problématique.

**GUL75** · 27/09/2016, 14h10

Merci Jreaux62,
Effectivement je suis vraiment néophyte

Je souhaiterais en cliquant sur une parcelle, afficher simultanément des infos attributaires dans une div et un graph (température) dans une autre div. Pour le graph je ne veux pas créer un csv indépendant.
J'arrive à effectuer l'affichage des attributs dans la première div mais mon graph n'apparaît as
Voici le code avec des commentaires

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 = '&nbsp;';
        }
      };
		//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>

**NoSmoking** · 28/09/2016, 21h29

Bonjour,
la première chose à faire et d'écrire un JSON correct

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
//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] ] ] } },
        		]
        		}

teste avec https://jsonformatter.curiousconcept.com/ par exemple.

Div et contenu

JavaScript

Discussions similaires

Partager

Partager