При интеграции интерактивных карт в интерфейс 1С через ПолеHTMLДокумента разработчики часто выбирают библиотеку OpenLayers (OL) из-за её богатого функционала и высокой производительности при работе с большим количеством геоданных. Однако на платформе 1С v8.3 (особенно начиная с версии 8.3.14 и выше, где используется движок WebKit) возникает неприятная проблема: карта отображается корректно, но её невозможно сдвинуть мышкой (свайп или панорамирование не работает). При этом в обычном браузере тот же самый код работает безупречно.
В данной статье мы разберем причины этого конфликта, проанализируем поведение движка WebKit внутри 1С и рассмотрим несколько способов решения задачи: от подбора стабильной версии библиотеки до тонкой настройки обработки событий через CSS и JavaScript.
Основная причина кроется в способе обработки событий ввода. Начиная с версии 6.x, библиотека OpenLayers перешла на использование Pointer Events API. Это современный стандарт, который объединяет события мыши, сенсорного экрана и пера в единый поток данных. Однако встроенный в 1С движок WebKit не всегда корректно транслирует эти события внутрь контейнера HTML-документа.
Рассмотрим ситуацию подробнее: когда пользователь зажимает левую кнопку мыши (ЛКМ) на поле карты, платформа 1С может интерпретировать это действие как попытку начать перетаскивание (Drag-and-Drop) самого элемента формы или выделение текста. В результате событие pointermove (перемещение указателя) либо блокируется платформой, либо «поглощается» внешним контейнером, не доходя до JavaScript-кода OpenLayers. Карта получает сигнал о нажатии, но не получает данных о последующем движении мыши.
Как показывает практика и опыт участников сообщества, наиболее простым и быстрым решением является использование версии OpenLayers, в которой механизмы обработки событий еще сохраняли обратную совместимость с особенностями WebKit. Экспериментальным путем было выяснено, что последней стабильно работающей версией для 1С является OpenLayers 6.3.1.
Проанализируем пример стандартной инициализации, который может давать сбои в новых версиях, но стабилен в 6.3.1:
var map = new ol.Map({
target: "map",
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
});
Если в вашем проекте критично использовать именно возможности версий 6.x, рекомендуется откатиться на дистрибутив 6.3.1. В нем события перемещения мыши обрабатываются более универсально, что позволяет избежать блокировок со стороны платформы 1С.
Если вы не хотите использовать устаревшие версии библиотеки, можно попробовать заставить WebKit передавать события внутрь карты с помощью CSS-свойства touch-action. Это свойство указывает браузеру, какие действия с элементом он должен обрабатывать самостоятельно, а какие — передавать скрипту.
Для контейнера, в котором отрисовывается карта (обычно это div с id="map"), необходимо принудительно установить запрет на стандартную обработку касаний браузером:
#map {
width: 100%;
height: 100%;
touch-action: none;
-ms-touch-action: none;
}
Значение none сообщает движку WebKit, что все жесты (скролл, зум, панорамирование) будут обрабатываться программно внутри OpenLayers. Это часто помогает «оживить» карту в формах 1С, так как снимает приоритет системной обработки событий движения.
Иногда 1С перехватывает нажатие мыши, считая, что пользователь хочет перетащить объект. Чтобы предотвратить это на уровне JavaScript, мы можем добавить обработчик, отключающий стандартный механизм перетаскивания для всего окна HTML-документа. Добавьте следующий код в секцию скриптов вашей страницы:
window.ondragstart = function() {
return false;
};
Этот простой метод гарантирует, что браузер не будет пытаться инициировать захват элементов карты как картинок или текстовых блоков, что освобождает канал для событий PointerEvents.
В некоторых случаях проблема заключается в том, что ПолеHTMLДокумента не получает фокус ввода при первом клике. Карта начинает реагировать на перемещение только после того, как пользователь явно «активирует» область документа. Чтобы улучшить пользовательский опыт, мы можем принудительно устанавливать фокус на элемент карты при наведении мыши или нажатии:
document.getElementById('map').addEventListener('mousedown', function() {
window.focus();
}, false);
Это заставляет платформу 1С передать фокус управления внутрь HTML-контейнера немедленно, что позволяет библиотеке OpenLayers начать отслеживание координат мыши без задержек.
Многие разработчики замечают, что библиотека Leaflet работает в 1С «из коробки» без проблем со свайпом. Рассмотрим ситуацию: Leaflet по умолчанию использует классические MouseEvents (mousedown, mousemove, mouseup), которые WebKit в 1С транслирует стабильно. OpenLayers же ориентирован на более современный стек технологий.
Если ваша задача не подразумевает отображение сотен тысяч меток или сложных векторных слоев (GeoJSON), возможно, стоит рассмотреть переход на Leaflet. Однако если производительность OL вам необходима, используйте вышеописанные методы адаптации (откат версии или настройка touch-action).
Для обеспечения стабильной работы карты в 1С выполните следующие шаги:
touch-action: none;.dragstart через JavaScript, чтобы исключить конфликты с механизмом перетаскивания 1С.stopEvent: true для оверлеев, которые могут перекрывать основную область захвата мыши.Применение этих техник в комплексе позволяет добиться плавного и отзывчивого интерфейса карты даже внутри встроенного браузера платформы 1С.