Почему OpenStreetMap в 1С отображается «рваными квадратами» и как это исправить?

← На главную

При интеграции карт OpenStreetMap через библиотеку Leaflet в поле HTML-документа 1С разработчики часто сталкиваются с неприятным визуальным эффектом: карта вместо единого полотна отрисовывается «рваными квадратами», которые разбросаны по форме в хаотичном порядке или выстроены в вертикальный список. Рассмотрим причины этого поведения и разберем по шагам, как привести отображение карты в нормальный вид.

Анализируем причину проблемы

Проанализируем ситуацию: за правильное позиционирование фрагментов карты (тайлов) отвечает файл стилей leaflet.css. В нем прописаны правила absolute позиционирования для контейнеров и изображений. Если скрипт leaflet.js загрузился и начал работу, а файл стилей leaflet.css по какой-то причине заблокирован или не успел прогрузиться, браузер (встроенный в 1С) выводит изображения тайлов как обычные блочные элементы. Отсюда и возникает эффект «рваных квадратов».

Выясним, почему это происходит именно в 1С. Начиная с версии платформы 8.3.14, 1С перешла на использование движка WebKit (Chromium) вместо устаревшего Internet Explorer. Это привнесло строгие политики безопасности CORS и требования к SSL-сертификатам. Если внешние ресурсы загружаются с CDN (например, с unpkg.com), встроенный браузер может блокировать их из-за несоответствия протоколов шифрования или настроек безопасности операционной системы (особенно это актуально для Windows Server 2022/2025).

Способ 1: Локальное хранение библиотек в макетах 1С

Наиболее надежным решением, которое подтвердили участники сообщества, является отказ от внешних ссылок на CSS и JS в пользу хранения их текста внутри самой конфигурации 1С. Рассмотрим, как это реализовать.

Перейдем в конфигуратор и создадим два новых макета в объекте (обработке или документе), где используется карта.
Тип макета выберем Текстовый документ. Назовем их Leaflet_CSS и Leaflet_JS.
Скачаем содержимое файлов leaflet.css и leaflet.js с официального сайта библиотеки и вставим их текст в соответствующие макеты.
В коде формирования HTML-текста заменим внешние ссылки на переменные-заглушки.

Проанализируем программную реализацию подготовки текста HTML:


// Получаем тексты библиотек из макетов
ТекстCSS = ЭтотОбъект.ПолучитьМакет("Leaflet_CSS").ПолучитьТекст();
ТекстJS  = ЭтотОбъект.ПолучитьМакет("Leaflet_JS").ПолучитьТекст();

// Формируем структуру HTML
ТекстHTML = 
"<html>
|<head>
|    <style>" + ТекстCSS + "</style>
|    <script>" + ТекстJS + "</script>
|    <style>
|        #map { height: 100%; width: 100%; }
|        body, html { margin: 0; padding: 0; height: 100%; }
|    </style>
|</head>
|<body>
|    <div id='map'></div>
|    <script>
|        const map = L.map('map').setView([44.948237, 34.100318], 8);
|        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|    </script>
|</body>
|</html>";

Элементы.ПолеКарты.УстановитьТекст(ТекстHTML);

Важный момент: при таком подходе все стили применяются мгновенно вместе с загрузкой страницы, что исключает проблему «рваных квадратов».

Способ 2: Использование атрибутов целостности и CORS

Если вы все же предпочитаете использовать внешние CDN, необходимо помочь движку 1С правильно интерпретировать запросы. Посмотрим на пример корректного подключения стилей, которое решает проблему в современных версиях платформы 1С:


<link rel="stylesheet" 
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
      crossorigin="anonymous" 
      charset="utf-8" />

Добавление параметров crossorigin="anonymous" и charset="utf-8" позволяет браузеру корректно обработать кросс-доменный запрос и кодировку файла стилей. Однако помните, что на серверах с ограниченным доступом в интернет или специфическими настройками SSL (например, Windows Server 2025) этот метод может давать сбои.

Способ 3: Решение проблем с отображением маркеров

При переносе leaflet.css в локальный макет часто возникает побочный эффект: пропадают стандартные маркеры карты. Разберем ситуацию: в оригинальном CSS-файле пути к картинкам маркеров указаны как относительные (например, url(images/marker-icon.png)). Когда мы вставляем текст CSS в HTML-документ 1С, эти пути перестают работать.

Рассмотрим два варианта решения проблемы с маркерами:

Явное указание путей в JS: после инициализации карты переопределите пути к иконкам, используя прямые ссылки на CDN.


const defaultIcon = L.icon({
    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41]
});
L.marker([lat, lng], {icon: defaultIcon}).addTo(map);

Использование Base64: вы можете конвертировать изображения маркеров в строку Base64 и вставить их прямо в JS-код. Это сделает вашу карту полностью автономной от внешних серверов (кроме самих тайлов).

Особенности работы на новых ОС (Windows Server 2022/2025)

Проанализируем проблему ошибок SSL, упоминаемую пользователями. В новых версиях Windows отключены устаревшие протоколы TLS. Если сервер тайлов или CDN поддерживает только старые протоколы, 1С выдаст ошибку.

Для исправления ситуации на уровне системы убедитесь, что в настройках Internet Options (Свойства браузера) на сервере включены протоколы TLS 1.2 и TLS 1.3. Несмотря на то, что 1С использует WebKit, некоторые компоненты инициализации все еще опираются на системные настройки безопасности Windows. Также рекомендуется использовать URL тайлов только с протоколом https://, чтобы избежать блокировки смешанного контента (Mixed Content).

Настройка масштабирования и навигации

Если после исправления визуальной части «рваных квадратов» навигация (зум, перемещение) все еще не работает, убедитесь, что в заголовке <head> вашего HTML-документа присутствует мета-тег viewport. Это критически важно для движка WebKit в современных формах 1С:


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Этот тег сообщает браузеру, как правильно обрабатывать размеры окна и события касания/клика, что восстанавливает работоспособность управления картой.

Подводя итог, наиболее устойчивым методом разработки в 1С является комбинированный подход: встраивание текстов leaflet.js и leaflet.css непосредственно в макеты конфигурации с явным определением путей к иконкам маркеров через полные URL-адреса. Это гарантирует мгновенную примену стилей и правильную геометрию карты при открытии формы. В качестве альтернативного готового решения можно использовать обработку для интеграции 1С с картами 2ГИС и расстановки маркеров.