Как поместить svg маркер на canvas слой в leaflet?

Question

[moem]

Здравствуйте.
Подскажите, пожалуйста, кто знает.
Существует ли доступный способ (через плагины, несложный код или ухищренным использованием уже имеемого функционала) поместить svg маркер на canvas слой? Типа как circleMarker, только произвольный svg маркер фиксированного размера.
Спасибо.

Answer 1

[profesor08]

В доках все есть. В гугле все есть. На stackoverflow все есть.

https://leafletjs.com/examples/custom-icons/

var svg = '' // insert your own svg
var iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);

var icon = L.icon( {
    iconUrl: iconUrl,
} );

Comments

[moem]

Получится слой с множеством элементов img, а не единый canvas слой. От того, что ты предлагаешь, я как раз хочу отойти, т.к. это не приемлемо при большом числе маркеров.

[profesor08]

moem, ты пытаешься встроить посторонний объект. Маркеры, кружки, полигоны, все это отдельные объекты, которые располагаются поверх канваса, смотри в инспекторе.

[moem]

profesor08, посмотри html, который создает leaflet. А именно - .leaflet-pane. Маркеры как img, содержатся в .leaflet-marker-pane, а circleMarker - на .leaflet-overlay-pane>canvas, внутри единой картинки, там же будут polyline, polygone и т.д. Естественно, в качестве renderer взят L.Canvas.
Так что,

В доках все есть. В гугле все есть. На stackoverflow все есть.

- это было лишнее

Answer 2

[lipton_ice_tea]

Вы можете использовать этот плагин https://www.npmjs.com/package/leaflet-canvas-markers
Он позволяет просто добавлять любые изображения на единый Canvas-слой, в который добавляются и circleMarker