To run the following code you have to import the required js and css files
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Openlayer 6 </title>
<link rel="stylesheet" href="./site.css">
<link rel="stylesheet" href="./libs/ol.css">
<link rel="stylesheet" href="./libs/ol-layerswitcher.css">
</head>
<body>
<script src="./libs/ol.js"></script>
<script src="./libs/ol-layerswitcher.js"></script>
<script type="module" src="scripts/map.js"></script>
<div id="map" class="map">
<div id="mousePos"></div>
</div>
</body>
</html>
JAVASCRIPT
/// <reference path="_references.js" />
window.onload = init;
function init() {
//Constants
var format = 'image/png';
const wms_geoserverURL = 'http://localhost:8080/geoserver/cite/wms';
const wmts_geoserverURL = "http://localhost:8080/geoserver/gwc/service/wmts";
var options;
const parser = new ol.format.WMTSCapabilities();
fetch('http://localhost:8080/geoserver/gwc/service/wmts/rest/WMTSCapabilities.xml')
.then(function (response) {
return response.text();
})
.then(function (text) {
const result = parser.read(text);
options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'cite:Orthophotos_WB_2021_15cm_tif_PG1923',
matrixSet: 'EPSG:4326',
});
const ZoomToExtent = new ol.control.ZoomToExtent({
extent: [3896579.30442, 3706823.74836, 3899224.70962, 3708666.13385,],
});
// Tile layers group
const tl_tileLayersGroup = new ol.layer.Group({
// A layer must have a title to appear in the layerswitcher
title: 'Base maps',
layers: [
//This group to show water colors with labels
new ol.layer.Group({
// A layer must have a title to appear in the layerswitcher
title: 'Water color with labels',
// Setting the layers type to 'base' results
// in it having a radio button and only one
// base layer being visibile at a time
type: 'base',
// Setting combine to true causes sub-layers to be hidden
// in the layerswitcher, only the parent is shown
combine: true,
visible: false,
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]
}),
new ol.layer.Tile({
// A layer must have a title to appear in the layerswitcher
title: 'Water color',
// Again set this layer as a base layer
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
// A layer must have a title to appear in the layerswitcher
title: 'OSM',
// Again set this layer as a base layer
type: 'base',
visible: true,
source: new ol.source.OSM()
}),
new ol.layer.Tile({
title: 'WMS ortho geo image',
type: 'base',
visible: false,
source: new ol.source.TileWMS({
extent: [3896579.30442, 3706823.74836,],
url: wms_geoserverURL,
params: {
'FORMAT': format,
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": ['cite:Orthophotos_WB_2021_15cm_tif_PG1923'],
"exceptions": 'application/vnd.ogc.se_inimage',
serverType: 'geoserver',
projection: 'EPSG:4326',
"exceptions": 'application/vnd.ogc.se_inimage',
'TILED': true
},
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0,
}),
}),
new ol.layer.Tile({
title: 'WMTS ortho geo image',
type: 'base',
visible: false,
source: new ol.source.WMTS(options)
}),
]
});
//Checkable layers group
const layersGroup = new ol.layer.Group({
// A layer must have a title to appear in the layerswitcher
title: 'Overlays',
// Adding a 'fold' property set to either 'open' or 'close' makes the group layer
// collapsible
fold: 'open',
layers: [
new ol.layer.Image({
// A layer must have a title to appear in the layerswitcher
title: 'Countries',
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: { LAYERS: 'show:0' },
url:
'https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer'
})
}),
new ol.layer.Group({
// A layer must have a title to appear in the layerswitcher
title: 'Census',
fold: 'open',
layers: [
new ol.layer.Image({
// A layer must have a title to appear in the layerswitcher
title: 'Local Authority Districts December 2011 Boundaries',
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: { LAYERS: 'show:0' },
url:
'https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Local_Authority_Districts_December_2011_Boundaries/MapServer'
})
}),
new ol.layer.Image({
// A layer must have a title to appear in the layerswitcher
title: 'Wards',
visible: false,
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: { LAYERS: 'show:0' },
url:
'https://ons-inspire.esriuk.com/arcgis/rest/services/Census_Boundaries/Census_Merged_Wards_December_2011_Boundaries/MapServer'
})
})
]
})
]
});
var mousePosition = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(2),
projection: 'EPSG:4326',
undefinedHTML: ' '
});
/**
* The following few lines of code to initialize map controls to the map
*/
//Map initialization and its controlles
const overviewMapControl = new ol.control.OverviewMap({
layers: [
tl_tileLayersGroup,
],
});
//To show the kayers List
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Légende', // Optional label for button
groupSelectStyle: 'children' // Can be 'children' [default], 'group' or 'none'
});
//to add the map scale
var scale = new ol.control.ScaleLine({
units: 'metric',
minWidth: 100
});
/**
* The previous few lines of code to initialize map controls to the map
*/
const map = new ol.Map({
controls: ol.control.defaults().extend([mousePosition, ZoomToExtent, scale, layerSwitcher]),
view: new ol.View({
center: [3896579.30442, 3706823.74836],
zoom: 7,
maxZoom: 20,
minZoom: 4
}),
layers: [tl_tileLayersGroup],
target: 'map'
});
});
}
No comments:
Post a Comment