Skip to content

WMS ​

WmsLayer — обёртка над сторонним WMS-сервером: SDK сам собирает запросы GetMap по тайлам 256 px в проекции EPSG:3857 и рисует их поверх карты. Нужные опции — url, layers, остальное (format, transparent, version) обычно можно оставить по умолчанию.

Адрес в примере условный, подставьте свой WMS-сервер. Атрибуцию стороннего источника укажите в опции attribution слоя — атрибуция EvaMaps при этом остаётся на карте всегда.

Код ​

html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EvaMaps SDK — WMS</title>
    <link rel="stylesheet" href="https://evamaps.ru/sdk/1/evamaps.css" />
    <style>
      html,
      body {
        margin: 0;
        font-family: system-ui, -apple-system, sans-serif;
      }
      #map {
        width: 100%;
        height: 520px;
      }
      p {
        margin: 10px 16px;
        color: #555;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!--
      Сторонний WMS-сервер — условный адрес для примера, подставьте свой.
      Атрибуцию стороннего источника указывает пользователь в опции attribution слоя;
      атрибуция EvaMaps при этом остаётся на карте всегда.
    -->
    <script src="https://evamaps.ru/sdk/1/evamaps.js"></script>
    <script>
      var map = new EvaMaps.Map('map', {
        center: [37.6173, 55.7558],
        zoom: 10,
        zoomControl: true,
        scaleControl: true,
      });

      EvaMaps.wmsLayer({
        url: 'https://wms.example.ru/service?',
        layers: 'example-layer',
        format: 'image/png',
        transparent: false,
        version: '1.3.0',
        attribution: '© Ваш источник WMS',
      }).addTo(map);
    </script>
  </body>
</html>

← Все примеры

Нашли ошибку в документации? Напишите нам