Пример приложения на openlayers с подложкой

Пример подключения подложки Енисей-ГИС с помощью библиотеки OpenLayers (https://openlayers.org/)


Исходный код примера для подключения подложки Енисей-ГИС с помощью библиотеки OpenLayers

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />

	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
	<style>
		.map {
			height: 400px;
			width: 100%;
			border: solid 1px #aaaaaa;
		}
	</style>

	<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

	<title>Example</title>
</head>

<body>
	<div id="map" class="map"></div>

	<script type="text/javascript">
		var extent = [11385622.915, 2840622.915, 21404377.085, 12859377.085];
		var resolutions = [39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135];

		proj4.defs("EPSG:28416","+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=16500000 +y_0=0 +ellps=krass +towgs84=23.92,-141.27,-80.9,-0,0.35,0.82,-0.12 +units=m +axis=neu +no_defs");

		ol.proj.proj4.register(proj4);

		ol.proj.get('EPSG:28416').setExtent(extent);

		var source = new ol.source.TileWMS({
			projection: 'EPSG:28416',
			params: { 'LAYERS': 'egis_gk_dark', 'FORMAT': 'image/png', 'VERSION': '1.1.1' },
			crossOrigin: 'anonymous',
			tileGrid: new ol.tilegrid.TileGrid({
				extent: extent,
				origin: ol.extent.getTopLeft(extent),
				resolutions: resolutions
			}),
			attributions: ['© <a href="http://24bpd.ru/" target="_blank">Енисей-ГИС</a>'],
			url: 'http://map{1-4}.24bpd.ru/geowebcache/service/wms?',
			wrapX: true
		});

		var map = new ol.Map({
			target: 'map',
			layers: [
				new ol.layer.Tile({
					extent: extent,
					source: source
				})
			],
			view: new ol.View({
				projection: 'EPSG:28416',
				center: [16491000, 7210000],
				zoom: 1
			})
		});
	</script>
</body>
</html>