API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 17th, 2017
64
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.64 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <title>Vector layer example</title>
  6. <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
  7. <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  8. <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
  9. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  10. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  11. <style>
  12. #popup-content {
  13. background-color: lightgrey;
  14. }
  15.  
  16.  
  17. .ol-popup {
  18. position: absolute;
  19. background-color: white;
  20. -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  21. filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  22. padding: 15px;
  23. border-radius: 10px;
  24. border: 1px solid #cccccc;
  25. bottom: 12px;
  26. left: -50px;
  27. min-width: 280px;
  28. }
  29. .ol-popup:after, .ol-popup:before {
  30. top: 100%;
  31. border: solid transparent;
  32. content: " ";
  33. height: 0;
  34. width: 0;
  35. position: absolute;
  36. pointer-events: none;
  37. }
  38. .ol-popup:after {
  39. border-top-color: white;
  40. border-width: 10px;
  41. left: 48px;
  42. margin-left: -10px;
  43. }
  44. .ol-popup:before {
  45. border-top-color: #cccccc;
  46. border-width: 11px;
  47. left: 48px;
  48. margin-left: -11px;
  49. }
  50. .ol-popup-closer {
  51. text-decoration: none;
  52. position: absolute;
  53. top: 2px;
  54. right: 8px;
  55. }
  56. .ol-popup-closer:after {
  57. content: "✖";
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id="map" class="map">
  63. <div id="popup" class="ol-popup">
  64. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  65. <div id="popup-content" > </div>
  66. </div>
  67. </div>
  68. <div id="info" class="alert alert-success">
  69. &nbsp;
  70. </div>
  71. <script>
  72.  
  73. $( function() {
  74. $( "#popup" ).draggable();
  75. $("#popup").resizable();
  76.  
  77. } );
  78. var container = document.getElementById('popup');
  79. var content = document.getElementById('popup-content');
  80. var closer = document.getElementById('popup-closer');
  81. var style_g = new ol.style.Style({
  82. fill: new ol.style.Fill({
  83. color: 'rgba(255, 255, 255, 0.3)'
  84. }),
  85. stroke: new ol.style.Stroke({
  86. color: 'rgba(0,255,255,0.6)',
  87. width: 1
  88. })
  89. });
  90. var style_k = new ol.style.Style({
  91. fill: new ol.style.Fill({
  92. color: 'rgba(255, 255, 255, 0.3)'
  93. }),
  94. stroke: new ol.style.Stroke({
  95. color: 'rgba(0, 128, 0,0.6)',
  96. width: 1
  97. })
  98. });
  99. var style_l = new ol.style.Style({
  100. fill: new ol.style.Fill({
  101. color: 'rgba(255, 255, 255, 0.3)'
  102. }),
  103. stroke: new ol.style.Stroke({
  104. color: 'rgba(0, 128, 128,0.6)',
  105. width: 1
  106. })
  107. });
  108. var style_m = new ol.style.Style({
  109. fill: new ol.style.Fill({
  110. color: 'rgba(255, 255, 255, 0.3)'
  111. }),
  112. stroke: new ol.style.Stroke({
  113. color: 'rgba(0, 0, 255,0.6)',
  114. width: 1
  115. })
  116. });
  117. styles_g = [style_g,style_k,style_l,style_m];
  118. for (i=0;i<styles_g.length;i++)
  119. {
  120.  
  121.  
  122. var vectorLayer4 = new ol.layer.Vector({
  123. maxResolution: 0.8,
  124. source: new ol.source.Vector({
  125. url: 'pms_geom_php.php',
  126. format: new ol.format.GeoJSON({
  127. defaultDataProjection:'EPSG:4326'
  128. })
  129. }),
  130. style: styles_g[i]
  131. });
  132. //alert(styles_g[i]);
  133. }
  134. var popup = new ol.Overlay(({
  135. element: container,
  136. autoPan: true,
  137. autoPanAnimation: {
  138. duration: 250
  139. }
  140. }));
  141. closer.onclick = function() {
  142. popup.setPosition(undefined);
  143. closer.blur();
  144. return false;
  145. };
  146.  
  147. var mapcenter = [79.60,23.44];
  148. var map = new ol.Map({
  149. layers: [
  150. new ol.layer.Tile({
  151. source: new ol.source.TileWMS({
  152. url: 'http://localhost:8089/geoserver/manjula/wms',
  153. params: {'LAYERS': 'manjula:India_states_UT_geo_wgs84'}
  154. })
  155. }),
  156. vectorLayer4
  157. ],
  158. overlays: [popup],
  159. target: 'map',
  160. view: new ol.View({
  161. projection: 'EPSG:4326',
  162. center: mapcenter,
  163. zoom: 5,
  164. extent: [66.2329, 7.68083, 98.2223, 39.03874],
  165. maxZoom:16,
  166. minZoom: 4,
  167. })
  168. });
  169. var highlightStyleCache = {};
  170. var featureOverlay = new ol.layer.Vector({
  171. source: new ol.source.Vector(),
  172. map: map,
  173. style: function (feature, resolution) {
  174. var text = resolution * 100000 < 10 ? feature.get('text') : '';
  175. if (!highlightStyleCache[text]) {
  176. highlightStyleCache[text] = new ol.style.Style({
  177. stroke: new ol.style.Stroke({
  178. color: '#0000FF',
  179. width: 2
  180. }),
  181. fill: new ol.style.Fill({
  182. color: 'rgba(192,192,192,0.7)'
  183. }),
  184. text: new ol.style.Text({
  185. font: '12px Calibri,sans-serif',
  186. text: text,
  187. fill: new ol.style.Fill({
  188. color: '#000'
  189. }),
  190. stroke: new ol.style.Stroke({
  191. color: '#f00',
  192. width: 3
  193. })
  194. })
  195. });
  196. }
  197. return highlightStyleCache[text];
  198. }
  199. });
  200. var highlight;
  201. var displayFeatureInfo = function (pixel) {
  202.  
  203. var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
  204. return feature;
  205. });
  206.  
  207. var info = document.getElementById('info');
  208. if (feature) {
  209. info.innerHTML = '';
  210.  
  211. } else {
  212. info.innerHTML = '&nbsp;';
  213. }
  214.  
  215. if (feature !== highlight) {
  216. if (highlight) {
  217.  
  218. featureOverlay.getSource().removeFeature(highlight);
  219. }
  220. if (feature) {
  221. featureOverlay.getSource().addFeature(feature);
  222. }
  223. highlight = feature;
  224. }
  225. };
  226. map.on('singleclick', function(evt) {
  227.  
  228. if (evt.dragging) {
  229. return;
  230. }
  231. var pixel = map.getEventPixel(evt.originalEvent);
  232. displayFeatureInfo(pixel);
  233.  
  234. feature = evt.coordinate;
  235. var hdms = ol.coordinate.toStringHDMS(feature);
  236. click_long = feature[1].toFixed(2);
  237. click_lat = feature[0].toFixed(2);
  238. alert("lat"+click_lat);
  239. alert("lat"+click_lat);
  240. var xmlhttp;
  241. if( window.XMLHttpRequest )
  242. {
  243. xmlhttp = new XMLHttpRequest();
  244. }
  245. else
  246. {
  247. xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
  248.  
  249. }
  250. xmlhttp.onreadystatechange = function( )
  251. {
  252. if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
  253. {
  254. content.innerHTML = '<p style="color:orange">You clicked here:</p>'+ xmlhttp.responseText;
  255. }
  256.  
  257. }
  258.  
  259. var url = "pms_spatial_inc.php";
  260. url=url+"?hdms="+hdms;
  261. url=url+"&click_lat="+click_lat;
  262. url=url+"&click_long="+click_long;
  263. xmlhttp.open( "GET", url, true );
  264. xmlhttp.send();
  265. popup.setPosition(feature);
  266.  
  267. });
  268. map.addOverlay( popup);
  269.  
  270. map.on('click', function (evt) {
  271. var pixel = map.getEventPixel(evt.originalEvent);
  272. displayFeatureInfo(evt.pixel);
  273.  
  274. })
  275. </script>
  276. </body>
  277. </html>
  278.  
  279. <?php
  280.  
  281. $host = "host=192.168.106.81";
  282. $port = "port=5432";
  283. $dbname = "dbname=pms";
  284. $credentials = "user=postgres password=postgres";
  285. $db = pg_connect("$host $port $dbname $credentials");
  286. if(!$db){
  287. echo "Error : Unable to open databasen";
  288. }
  289.  
  290.  
  291. $data_query = "SELECT ST_AsGeoJSON(geom) As geometry from three";
  292.  
  293. $data = pg_query($db,$data_query);
  294.  
  295.  
  296. $geojson = array(
  297. 'type' => 'FeatureCollection',
  298. 'features' => array()
  299.  
  300. );
  301.  
  302. while($edge=pg_fetch_assoc($data)) {
  303.  
  304. $feature = array(
  305. 'type' => 'Feature',
  306. 'geometry' => $edge['geometry'],
  307.  
  308. );
  309. array_push($geojson['features'], $feature);
  310. }
  311. echo str_replace('}"','}',str_replace('"{"','{"',stripslashes(json_encode($geojson))));
  312.  
  313.  
  314. ?>
  315.  
  316. var style_g = new ol.style.Style({
  317. fill: new ol.style.Fill({
  318. color: 'rgba(255, 255, 255, 0.3)'
  319. }),
  320. stroke: new ol.style.Stroke({
  321. color: 'rgba(0,255,255,0.6)',
  322. width: 1
  323. })
  324. });
  325. var style_k = new ol.style.Style({
  326. fill: new ol.style.Fill({
  327. color: 'rgba(255, 255, 255, 0.3)'
  328. }),
  329. stroke: new ol.style.Stroke({
  330. color: 'rgba(0, 128, 0,0.6)',
  331. width: 1
  332. })
  333. });
  334. var style_l = new ol.style.Style({
  335. fill: new ol.style.Fill({
  336. color: 'rgba(255, 255, 255, 0.3)'
  337. }),
  338. stroke: new ol.style.Stroke({
  339. color: 'rgba(0, 128, 128,0.6)',
  340. width: 1
  341. })
  342. });
  343. var style_m = new ol.style.Style({
  344. fill: new ol.style.Fill({
  345. color: 'rgba(255, 255, 255, 0.3)'
  346. }),
  347. stroke: new ol.style.Stroke({
  348. color: 'rgba(0, 0, 255,0.6)',
  349. width: 1
  350. })
  351. });
  352. styles_g = [style_g,style_k,style_l,style_m];
  353. for (i=0;i<styles_g.length;i++)
  354. {
  355.  
  356.  
  357. var vectorLayer4 = new ol.layer.Vector({
  358. maxResolution: 0.8,
  359. source: new ol.source.Vector({
  360. url: 'pms_geom_php.php',
  361. format: new ol.format.GeoJSON({
  362. defaultDataProjection:'EPSG:4326'
  363. })
  364. }),
  365. style: styles_g[i]
  366. });
  367. //alert(styles_g[i]);
  368. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!