Guest User

Untitled

a guest
Mar 20th, 2018
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.22 KB | None | 0 0
  1. var container = document.getElementById('popup');
  2. var content = document.getElementById('popup-content');
  3. var closer = document.getElementById('popup-closer');
  4.  
  5. var overlay = new ol.Overlay({
  6. element: container,
  7. autoPan: true,
  8. autoPanAnimation: {
  9. duration: 250
  10. }
  11. });
  12.  
  13. closer.onclick = function(){
  14. overlay.setPosition(undefined);
  15. closer.blur();
  16. return false;
  17. }
  18.  
  19. var vectorSource2 = new ol.source.Vector({
  20. format: new ol.format.GeoJSON(),
  21. url: function(extent) {
  22. return 'http://152.7.99.134:8080/geoserver/link_to_postgres/wfs?service=WFS'+
  23. '&version=1.0.0&request=GetFeature'+
  24. '&typeName=link_to_postgres:a_1845disease0' +
  25. '&outputFormat=application/json&srsname=EPSG:3857' +
  26. '&bbox=' + extent.join(',') + ',EPSG:3857';
  27. },
  28. });
  29.  
  30. var pointLayer = new ol.layer.Vector({
  31. source: vectorSource2,
  32. style: new ol.style.Style({
  33. image: new ol.style.Circle({
  34. radius: 5,
  35. fill: new ol.style.Fill({
  36. color: 'orange'
  37. }),
  38. stroke: new ol.style.Stroke({
  39. color:'grey',
  40. width: 0.5
  41. })
  42. })
  43. }),
  44. });
  45.  
  46. var mapLayers = [
  47. new ol.layer.Tile({
  48. source: new ol.source.OSM()
  49. }),
  50.  
  51. pointLayer,
  52. ];
  53.  
  54. var map = new ol.Map({
  55. target: 'map',
  56. loadTilesWhileAnimating: true,
  57. loadTilesWhileInteracting: true,
  58. controls:[
  59. new ol.control.OverviewMap(),
  60. new ol.control.Zoom(),
  61. new ol.control.ScaleLine(),
  62. ],
  63. layers: mapLayers,
  64. overlays:[overlay],
  65. view: new ol.View({
  66. center: ol.proj.fromLonLat([-25.922388,30.193475]),
  67. zoom: 3
  68. })
  69. });
  70.  
  71. function setContent(pointID,locationname, paragraph, status, comment){
  72. var popupContent = `<b>Ponit ID: `+ pointID + `</b>: ` + locationname +
  73. `<br>` + paragraph +
  74. `<br>
  75. <select id='status'>
  76. <option value='default' selected='selected' disabled>`+ status + `</option>
  77. </select><br>
  78. Comments: <input type='text' id='commentsOnPoint' placeholder="` + comment +`">&nbsp;
  79. <button>Submit</button>`;
  80. return popupContent;
  81. };
  82.  
  83. vectorSource2.on('change', function(evt){
  84. var source=evt.target;
  85. if(source.getState() === 'ready'){
  86. }
  87. });
  88.  
  89. function generatePointsCircle(count, centerPixel) {
  90. var
  91. radius = 25,
  92. twoPi = Math.PI * 2,
  93. start_angle = 0,
  94. circumference = radius * 2 * Math.PI,
  95. angleStep = twoPi / count,
  96. res = [],
  97. i, angle;
  98.  
  99. for (i = count - 1; i >= 0; i--) {
  100. angle = start_angle + i * angleStep;
  101. res[i] = [
  102. centerPixel[0] + radius * Math.cos(angle),
  103. centerPixel[1] + radius * Math.sin(angle)
  104. ];
  105. }
  106. return res;
  107. };
  108.  
  109. var stroke = new ol.style.Stroke({color:[0,0,0,1]});
  110. var fill = new ol.style.Fill({color:[255,255,255,1]});
  111.  
  112. var style_parada = [
  113. new ol.style.Style({
  114. image: new ol.style.Circle({
  115. radius: 5, fill: fill, stroke: stroke
  116. }),
  117. zIndex: 4
  118. })
  119.  
  120. ];
  121.  
  122. var style_cluster = [
  123. new ol.style.Style({
  124. image: new ol.style.Circle({
  125. radius: 7, fill: fill, stroke: stroke
  126. }),
  127. zIndex: 14
  128. })
  129. ];
  130.  
  131. var style_cluster_hover = [
  132. new ol.style.Style({
  133. image: new ol.style.Circle({
  134. radius: 7, stroke: stroke,
  135. fill: new ol.style.Fill({color:[46,52,54,1]})
  136. }),
  137. zIndex: 1
  138. })
  139. ];
  140.  
  141. map.on('singleclick', function(evt){
  142. var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
  143. return feature;
  144. });
  145. if (feature){
  146. var coordinate = evt.coordinate;
  147. // This works
  148. var multiFeatures = map.getFeaturesAtPixel(evt.pixel);
  149. for ( i = 0; i < multiFeatures.length; i ++){
  150. f = multiFeatures[i]
  151. console.log(f.get('id') +':'+ f.get('matchednam'));
  152. };
  153.  
  154. var pointID = feature.get('id');
  155. var locationname = feature.get('matchednam');
  156. var paragraph = feature.get('paragragh');
  157. var status = feature.get('status');
  158. var comment = feature.get('comment');
  159.  
  160. container.innerHTML = setContent(pointID,locationname, paragraph, status, comment);
  161.  
  162. overlay.setPosition(coordinate);
  163. } else {
  164. overlay.setPosition(undefined);
  165. }
  166. });
  167.  
  168. map.on('pointermove', function(e) {
  169. if (e.dragging) {
  170. return;
  171. }
  172. var pixel = map.getEventPixel(e.originalEvent);
  173. var hit = map.hasFeatureAtPixel(pixel);
  174.  
  175. e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  176. // getViewport().style.cursor = hit ? 'pointer' : '';
  177.  
  178. if (hit) displayOverlapping(pixel);
  179. });
  180.  
  181. var displayOverlapping = function(pixel) {
  182.  
  183. var multift = map.getFeaturesAtPixel(pixel);
  184. // console.log(multift);
  185. if (multift.length > 1){
  186. var geom = multift[0].getGeometry(),
  187. coord = geom.getCoordinates(),
  188. px = map.getPixelFromCoordinate(coord),
  189. extent = [coord[0], coord[1], coord[0], coord[1]];
  190.  
  191. console.log(multift);
  192.  
  193. var points = generatePointsCircle(multift.length, px);
  194.  
  195. multift[0].setStyle(style_cluster_hover);
  196.  
  197. var sourceFeatures = new ol.source.Vector(),
  198. layerFeatures = new ol.layer.Vector({
  199. source: sourceFeatures
  200. });
  201.  
  202. var rows = [];
  203.  
  204. multift.forEach(function(row, index){
  205. var cd_end = map.getCoordinateFromPixel(points[index]);
  206.  
  207. row.setGeometry(new ol.geom.Point(cd_end));
  208. row.setStyle(style_parada);
  209.  
  210. rows.push(row);
  211. });
  212.  
  213. sourceFeatures.addFeatures(rows);
  214. map.addLayer(layerFeatures);
  215.  
  216. }
  217. };
Add Comment
Please, Sign In to add comment