Как разместить изображение между двумя маркерами с помощью css: leaflet

Question

В моем приложении, где я использую листовки API, я могу поставить два маркера ворот и ломаную линию между ними.

Здесь я просто хотел найти способ поместить изображение из CSS на ломаную линию, которая должна помещаться между двумя маркерами. Я знаю, что изображение имеет ширину и высоту.

Я полагаю, что для этого должен быть какой-то трюк css, хотя я не могу использовать метод заполнения шаблона из-за ограниченного понимания листовки.

Скрипт (поставить два маркера и линию между ними)

var polylineGate2 = new L.Polyline([], { color: 'yellow' });
            function gatePlace2(e) {
                // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: gateIcon, draggable: false }).addTo(currentFeatureGroup);
                // Add coordinate to the polyline
                polylineGate2.addLatLng(e.latlng).addTo(currentFeatureGroup);
                var decorator = L.polylineDecorator(polylineGate2, {
                    patterns: [
                        // define a pattern of 10px-wide dashes, repeated every 20px on the line
                        { offset: 5, repeat: '20px', symbol: new L.Symbol.dash({ pixelSize: 4 }) }
                    ]
                }).addTo(currentFeatureGroup);
                map.off('click', gatePlace2);
                polylineGate2 = new L.Polyline([], { color: 'pink' });
            }

Я ищу решение, но не получил помощь онлайн, если кто-то знал о таких вещах, пожалуйста, помогите.

Answer 1

Я бы не стал использовать CSS для этого.

Вместо этого я бы вычислил координаты средней точки и поставил там собственный маркер.