Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script type="text/javascript">
- var layers = [
- new ol.layer.Tile({
- extent: [-13884991, 2870341, -7455066, 6338219],
- source: new ol.source.TileWMS({
- url: 'http://myIP/geoserver/myWorkspaceName/wms',
- 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'},
- serverType: 'geoserver'
- })
- })
- ];
- var map = new ol.Map({
- layers: layers,
- target: 'map',
- view: new ol.View({
- center: [-10997148, 4569099],
- zoom: 4
- })
- });
- </script>
- new_layer = new ol.layer.Image({
- title: LayerName,
- source: new ol.source.ImageWMS({
- url: http://myIP/geoserver/myWorkspaceName/wms,
- params: {LAYERS: [myWorkspaceName:myLayerName], VERSION:'1.1.1'}
- })
- });
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>WMS</title>
- <!-- OpenLayers CSS v.3.8.2.-->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
- <!-- JQuery (v.1.11.4.)-->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" type="text/css">
- <!-- external css -->
- <link rel="stylesheet" href="name.css">
- <!-- Proj4 -->
- <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
- <!-- Proj4~EPSG:5255 -->
- <script src="http://epsg.io/5255.js"></script>
- <style>
- </style>
- </head>
- <body>
- <div id="map"></div>
- <!-- JavaScript -->
- <!-- JQuery JS -->
- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
- <!-- JQuery UI JS -->
- <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
- <!-- OpenLayers JS -->
- <script src="http://openlayers.org/en/v3.8.2/build/ol-debug.js" type="text/javascript"></script>
- <!-- OpenLayers JS v.3.8.2.-->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
- <!-- external script -->
- <script src="name.js"></script>
- </body>
- </html>
- html, body, #map{
- width:100%; height:100%;
- overflow: hidden;
- }
- #map{
- position:absolute;
- z-index:-1;
- top:0; bottom:0;
- }
- .ol-control button{
- border-radius: 50% !important;
- }
- // 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
- var projection = new ol.proj.Projection({
- code: 'EPSG: 5255', // *code says: 5261 ...try to see if this is right
- extent: [-179106.47, 3835054.33, 1457898.22, 4881225.40]
- });
- // wms
- // source
- var layerSource = new ol.source.TileWMS({
- url: 'http://yourIP/geoserver/nameOfWorkspace/wms',
- params: {'VERSION': '1.3.0',
- 'LAYERS': 'nameOfWorkspace:nameOfLayer ',
- 'TILED': true,
- 'bbox': [number.number, number.number, number.number, number.number], // GeoServer bbox or extent in EPGS: 5255 - read from url in GeoServer WMS
- 'CRS': 'EPSG:5255',
- 'FORMAT': 'image/png8'},
- serverType: 'geoserver',
- });
- // layer
- var layerLayer = new ol.layer.Tile({
- layer:'nameOfLayer',
- visible: false,
- preload: Infinity,
- source: layerSource
- });
- // view
- var olview = new ol.View({
- projection: projection,
- center: [number.number, number.number], // center calculated from ol3 with map.getView().getCenter();
- extent: projection.getExtent(),
- zoom: 1.5
- })
- // map
- var map = new ol.Map({
- target: 'map',
- renderer: 'canvas', // Force the renderer to be used
- view: olview,
- layers: [layerLayer],
- controls: ol.control.defaults(),
- logo: false
- });
Add Comment
Please, Sign In to add comment