Guest User

Untitled

a guest
Nov 23rd, 2017
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.05 KB | None | 0 0
  1. <script type="text/javascript">
  2. var layers = [
  3.  
  4. new ol.layer.Tile({
  5. extent: [-13884991, 2870341, -7455066, 6338219],
  6. source: new ol.source.TileWMS({
  7. url: 'http://myIP/geoserver/myWorkspaceName/wms',
  8. params: { 'REQUEST':'GetMap','BBOX':'437762.766104487,4376882.69760637,522118.932880649,4461344.83731443', 'LAYERS': 'myWorkspaceName:myLayerName', 'TILED': true ,'SRS':'EPSG:5255','FORMAT':'application/openlayers','WİDTH':'767','HEİGHT':'768'},
  9. serverType: 'geoserver'
  10.  
  11. })
  12. })
  13. ];
  14. var map = new ol.Map({
  15. layers: layers,
  16. target: 'map',
  17. view: new ol.View({
  18. center: [-10997148, 4569099],
  19. zoom: 4
  20. })
  21. });
  22. </script>
  23.  
  24. new_layer = new ol.layer.Image({
  25. title: LayerName,
  26. source: new ol.source.ImageWMS({
  27. url: http://myIP/geoserver/myWorkspaceName/wms,
  28. params: {LAYERS: [myWorkspaceName:myLayerName], VERSION:'1.1.1'}
  29. })
  30. });
  31.  
  32. <!DOCTYPE html>
  33. <html lang="en">
  34. <head>
  35. <meta charset="utf-8">
  36. <title>WMS</title>
  37. <!-- OpenLayers CSS v.3.8.2.-->
  38. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
  39. <!-- JQuery (v.1.11.4.)-->
  40. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" type="text/css">
  41. <!-- external css -->
  42. <link rel="stylesheet" href="name.css">
  43. <!-- Proj4 -->
  44. <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
  45. <!-- Proj4~EPSG:5255 -->
  46. <script src="http://epsg.io/5255.js"></script>
  47. <style>
  48. </style>
  49. </head>
  50. <body>
  51. <div id="map"></div>
  52. <!-- JavaScript -->
  53. <!-- JQuery JS -->
  54. <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  55. <!-- JQuery UI JS -->
  56. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  57. <!-- OpenLayers JS -->
  58. <script src="http://openlayers.org/en/v3.8.2/build/ol-debug.js" type="text/javascript"></script>
  59. <!-- OpenLayers JS v.3.8.2.-->
  60. <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
  61. <!-- external script -->
  62. <script src="name.js"></script>
  63. </body>
  64. </html>
  65.  
  66. html, body, #map{
  67. width:100%; height:100%;
  68. overflow: hidden;
  69. }
  70. #map{
  71. position:absolute;
  72. z-index:-1;
  73. top:0; bottom:0;
  74. }
  75.  
  76. .ol-control button{
  77. border-radius: 50% !important;
  78. }
  79.  
  80. // I usually get defined EPSG from this site: http://spatialreference.org/, however it doesnt give me any vaild result for your projection...very strange, so I took it from this site as defined in html https://epsg.io/5255 ... copied code* and extent
  81. var projection = new ol.proj.Projection({
  82. code: 'EPSG: 5255', // *code says: 5261 ...try to see if this is right
  83. extent: [-179106.47, 3835054.33, 1457898.22, 4881225.40]
  84. });
  85.  
  86. // wms
  87. // source
  88. var layerSource = new ol.source.TileWMS({
  89. url: 'http://yourIP/geoserver/nameOfWorkspace/wms',
  90. params: {'VERSION': '1.3.0',
  91. 'LAYERS': 'nameOfWorkspace:nameOfLayer ',
  92. 'TILED': true,
  93. 'bbox': [number.number, number.number, number.number, number.number], // GeoServer bbox or extent in EPGS: 5255 - read from url in GeoServer WMS
  94. 'CRS': 'EPSG:5255',
  95. 'FORMAT': 'image/png8'},
  96. serverType: 'geoserver',
  97. });
  98.  
  99.  
  100. // layer
  101. var layerLayer = new ol.layer.Tile({
  102. layer:'nameOfLayer',
  103. visible: false,
  104. preload: Infinity,
  105. source: layerSource
  106. });
  107.  
  108. // view
  109. var olview = new ol.View({
  110. projection: projection,
  111. center: [number.number, number.number], // center calculated from ol3 with map.getView().getCenter();
  112. extent: projection.getExtent(),
  113. zoom: 1.5
  114. })
  115.  
  116. // map
  117. var map = new ol.Map({
  118. target: 'map',
  119. renderer: 'canvas', // Force the renderer to be used
  120. view: olview,
  121. layers: [layerLayer],
  122. controls: ol.control.defaults(),
  123. logo: false
  124. });
Add Comment
Please, Sign In to add comment