htmlMap/howTo_ol/mapbox_wfs_popinFloat.html at master · ElCep/htmlMap · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
  <!-- tuto suivit : digital geography : http://goo.gl/Vqg0kn  -->
  <title>Sandbox</title>
  <meta charset="utf-8" />
  <!-- chagement des librairies depuis le site ol3-->
  <!-- Le CSS -->
  <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
  <!-- La librairie ol3 -->
  <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
  <!-- La librairie jquery pour le wfs -->
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <style>

  </style>
</head>


<style>
  #popup{width:200px;height:140px;padding:5px;background-color:#ccc;}
  #popup_content{height:120px;}
  #popup{display:none;}
</style>


<body>
  <h1 align = "center">WFS popin</h1>
  <div id="map" style="width: 100%; height: 450px"></div>
  <div id="info" class="alert alert-success"> </div>


  <div id="popup">
    <div id="popup_content"></div>
    <button id="popup_close">Fermer</button>
  </div>


  <script>

//   $( document ).ready(function() {
//     $("#popup_close").click(function() {
//       $("#popup").css("display","none");
//     });
//   });


  var layers = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://api.tiles.mapbox.com/v4/delaye.jnnd2ih7/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGVsYXllIiwiYSI6IjRwM0FOOFEifQ.MiTmnZ6pIYvWZV6R7ZaqHw'
      })
    });

  var vectorSource = new ol.source.ServerVector({
    format: new ol.format.GeoJSON(),
    loader: function(extent, resolution, projection) {
      var url = 'http://164.81.15.10/cgi-bin/mapserv?map=/var/www/ms_monsatR/monastR_wfs.map&SERVICE=WFS&VERSION=1.1.0&REQUEST=getfeature&TYPENAME=monsatR_mySQL&srsname=EPSG:4326&OUTPUTFORMAT=OGRGeoJSON';
      $.ajax({
        url: url,
        dataType: "text",
        success: function (data){ //pour faire des appel
          var format = new ol.format.GeoJSON();
          var blabl = format.readFeatures(data, {
            featureProjection: 'EPSG:3857',
            dataProjection: 'EPSG:4326'
          }
          );
          console.log(blabl[0].getGeometry().getCoordinates());
          vectorSource.addFeatures(blabl);
        }
      });
    }
  });

  var vector = new ol.layer.Vector({
    source: vectorSource
  });

  ///////////////////////////////////////////////////////////////////////////////////////:
  // objet de visualisation
  ///////////////////////////////////////////////////////////////////////////////////////
  var map = new ol.Map({
    layers: [layers, vector],
    target: 'map',

    //echelle sur la carte
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine()
    ]),
    view: new ol.View({
      projection: 'EPSG:3857',
      //center: [0,0],
      center: [186446,5743548],
      zoom: 8
    })
  });

 ///////////::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //On ajoute une couche pour les popin
  ///////////:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  // definition de la couche
  var element = document.getElementById('popup');
  var popup = new ol.Overlay({
    element: element,
    stopEvent: false
  });
  map.addOverlay(popup);

  //defintion de la place du popup
  map.on('singleclick', function(evt){
	  var coord = evt.coordinate;
	  displayFeatureInfo(evt.pixel);
	  spawnPopup(coord);
  });

  //on revois l'élément au l'endrois de l'événement
  function spawnPopup(coord){
      var popup = $("#popup");

      var overlay = new ol.Overlay({
	  element:popup
      });

      map.addOverlay(overlay);
      overlay.setPosition(coord);
  }

  //Ici on définit ce qui sera affiché par le popin
  var displayFeatureInfo = function(pixel) {
    var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
      return feature;
    });

  //   var info = $("#popup_content");
      if (feature) {
  //     alert("pan")
	$("#popup_content").html(feature.get('FID'));
      } else {
      $("#popup_content").html('&nbsp;');
      }
      $("#popup").css("display","block");
  };

//   map.on('click', function(evt) {
//     displayFeatureInfo(evt.pixel);
//   });
  </script>
 </body>
</html>