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

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


Для работы карты необходимо скачать и подключить дополнительную библиотеку, позволяющую Leaflet работать с картографическими проекциями Proj4Leaflet. Нужно подключить 2 файла:

<script src="Proj4Leaflet/lib/proj4.js"></script>
<script src="Proj4Leaflet/src/proj4leaflet.js"></script>

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

<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="PRAGMA" content="NO-CACHE">
	<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://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
	<style>
		.map {
			height: 400px;
			width: 100%;
			border: solid 1px #aaaaaa;
		}
	</style>

	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
	<script src="Proj4Leaflet/lib/proj4-compressed.js"></script>
	<script src="Proj4Leaflet/src/proj4leaflet.js"></script>

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

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

	<script type="text/javascript">
		var extent = [1671245.83, 936245.83, 21708754.17, 20973754.17];
		var resolutions = [78271.516953125, 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];

		var crs3857 = new L.Proj.CRS('EPSG:3857',
			'+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
			{
				resolutions: resolutions,
				origin: [extent[0], extent[1]],
				bounds: L.bounds([extent[0], extent[1]], [extent[2], extent[3]])
			}
		);


		var map = L.map('map', {
			attributionControl: false,
			worldCopyJump: false,
			crs: crs3857
		});

		var attr = L.control.attribution({
			prefix: false
		});
		attr.addTo(map);

		map.setView([56, 92], 7);

		var baseLayer = L.tileLayer.wms('http://map{s}.24bpd.ru/geowebcache/service/wms', {
			subdomains: '1234',
			layers: 'egis_wm_dark',
			version: '1.1.1',
			format: 'image/png',
			transparent: false,
			maxZoom: crs3857.options.resolutions.length,
			minZoom: 0,
			attribution: '© <a href="http://24bpd.ru/">Енисей-ГИС</a>',
			crossOrigin: 'anonymous',
			crs: crs3857
		});

		map.addLayer(baseLayer);

	</script>
</body>
</html>