Leaflet. Дружим Image с Canvas

Доброго времени суток, дорогие хабрахабровцы!

Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.

Задача

Построить трек с отметкой различных статусов состояния. Статусы отмечаются маркерами. У каждого статуса есть свой приоритет.

• Для оптимизации карты, рендеринг объектов должен происходить с использованием Canvas.
• Маркеры могут быть двух типов: точки и изображения.
• Если маркеры перекрывают друг друга — то сверху должен оказаться маркер более приоритетного статуса.
• Каждый маркер должен быть активным при наведении на него мышкой (например для вывода дополнительной информации).

Подготовка

Подключим библиотеку Leaflet.js и добавим базовую карту.

const map = L.map('map', {     preferCanvas: true, }).setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

Для наглядности будем использовать 3 состояния в порядке увеличение приоритета: базовый (зеленый маркер), сообщение (изображение) и ошибка (красный маркер).

Соответственно, красный маркер должен перекрывать изображение, а изображение — перекрывать зеленый маркер.

/* Базовый маркер */ L.circleMarker(L.latLng(51.52, -0.109), {     radius: 10,     fillColor: '#27ae60',     fillOpacity: 1,     color: '#fff',     weight: 3, }).addTo(map);  /* Маркер сообщения */ L.marker(L.latLng(51.52, -0.109), {     icon: L.icon({         iconUrl: 'icon.png',   // url картинки         iconSize: [40, 40],   // размер маркера         iconAnchor: [20, 20],   // выравнивание относительно центра     }), }).addTo(map);  /* Маркер ошибки */ L.circleMarker(L.latLng(51.52, -0.109), {     radius: 8,     fillColor: '#f44334',     fillOpacity: 1,     color: '#fff',     weight: 3, }).addTo(map);

Проблема

Leaflet добавляет маркеры поочередно, поэтому каждый последующий должен перекрывать предыдущий. Но на деле это не так. L.marker добавляет изображение в качестве обыкновенного IMG, отдельно от слоя Canvas.

Его можно разместить либо перед, либо под Canvas. И как следствие, невозможно поместить L.marker между двух L.circleMarker.

Следовательно, нужен способ размещать изображения в том же Canvas, на который добавляются и стандартные маркеры.

Примечание: В сети есть несколько плагинов, позволяющих добавлять изображения на Canvas. Но они создают отдельный Canvas, или даже группу слоев! В итоге простое размещение маркеров по приоритету становится довольно затруднительным. А так же Canvas-слои перекрывают друг друга, и кликнуть мышкой на маркер нижестоящего слоя становится невозможным!

Решение

Шаг 1. Создаем дочерний класс от L.CircleMarker, который будет получать объект ‘img’, загружать изображение и добавлять его в L.Canvas.

const CanvasMarker = L.CircleMarker.extend({     _updatePath() {         if (!this.options.img.el) { //Создаем элемент IMG             const img = document.createElement('img');             img.src = this.options.img.url;             this.options.img.el = img;             img.onload = () => {                 this.redraw();  //После загрузки запускаем перерисовку             };         } else {             this._renderer._updateImg(this);    //Вызываем _updateImg         }     }, });  L.canvasMarker = function (...options) {     return new CanvasMarker(...options); };

Шаг 2. Описываем метод _updateImg в L.Canvas. Он получает объект с изображением, который мы передаем на Шаге 1 и рисует его на Canvas.

L.Canvas.include({     _updateImg(layer) { //Метод добавления img на Canvas-слой         const { img } = layer.options;         const p = layer._point.round();         this._ctx.drawImage(img.el, p.x - img.size[0] / 2, p.y - img.size[1] / 2, img.size[0], img.size[1]);     }, });

Шаг 3. Теперь вместо L.marker можно использовать L.canvasMarker. Обратите внимание, что параметр ‘anchor’ не используется, т.к. картинка выравнивается автоматически!

/* Базовый маркер */     L.circleMarker(L.latLng(51.52, -0.109), {         radius: 10,         fillColor: '#27ae60',         fillOpacity: 1,         color: '#fff',         weight: 3,     }).addTo(map);      /* Маркер сообщения */     L.canvasMarker(L.latLng(51.52, -0.109), {         img: {             url: 'icon.png',             size: [40, 40],         },     }).addTo(map);      /* Маркер ошибки */     L.circleMarker(L.latLng(51.52, -0.109), {         radius: 8,         fillColor: '#f44334',         fillOpacity: 1,         color: '#fff',         weight: 3,     }).addTo(map);

В результате:

• Все маркеры расположены на едином Canvas-слое.
• Маркеры перекрывают друг-друга в порядке их добавления на карту.
• При наведении на маркеры мышкой, они сохраняют активность.

Задача решена!

Дополнительно

Давайте «прокачаем» наш метод L.canvasMarker и добавим возможность автоматически разворачивать изображение в направлении движения по карте!

За основу возьмем координаты предыдущей точки. Для этого сначала доработаем метод _updateImg.

L.Canvas.include({     _updateImg(layer) {         const { img } = layer.options;         const p = layer._point.round();         if (img.rotate) {             this._ctx.save();             this._ctx.translate(p.x, p.y);             this._ctx.rotate(img.rotate * Math.PI / 180);             this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1]);             this._ctx.restore();         } else {             this._ctx.drawImage(img.el, p.x - img.size[0] / 2, p.y - img.size[1] / 2, img.size[0], img.size[1]);         }     }, });

Как видно из примера, для поворота у ‘img’ должно быть свойство ‘rotate’. И мы уже можем задать его вручную при добавлении маркера:

L.canvasMarker(L.latLng(51.52, -0.109), {     img: {         url: 'icon.png',         size: [40, 40],         rotate: 15, //угол поворота изображения     }, }).addTo(map);

Но нам нужно вычислять угол поворота автоматически на основе предыдущей точки. Поэтому добавим вычисление угла на основе двух координат (angleCrds):

 const angleCrds = (map, prevLatlng, latlng) => {     if (!latlng || !prevLatlng) return 0;     const pxStart = map.latLngToLayerPoint(prevLatlng);     const pxEnd = map.latLngToLayerPoint(latlng);     return Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI * 180 - 90; };  const CanvasMarker = L.CircleMarker.extend({     _updatePath() {         if (!this.options.img.el) {             /* Вызываем метод */             if (!this.options.img.rotate) this.options.img.rotate = 0;             this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng);              const img = document.createElement('img');             img.src = this.options.img.url;             this.options.img.el = img;             img.onload = () => {                 this.redraw();             };         } else {             this._renderer._updateImg(this);         }     }, });  L.canvasMarker(L.latLng(51.52, -0.109), {     prevLatlng: L.latLng(51.528, -0.1), // Координаты предыдущей точки     img: {         url: 'icon.png',         size: [40, 40],     }, }).addTo(map);

Заключение

→ Пример работы можно увидеть здесь
→ Весь описанный функционал я вынес в отдельный npm-плагин

Этот плагин легко подключить и использовать в своих проектах! Так же плагин поддерживает дополнительные настройки, не описанные в данной статье.

Спасибо за внимание!