Не удается загрузить фоновое изображение значка SVG в Leaflet Map v1.6.0 - PullRequest
Новая
       9

Не удается загрузить фоновое изображение значка SVG в Leaflet Map v1.6.0

0 голосов
/ 27 февраля 2020

У меня есть серия динамически генерируемых иконок SVG, которые будут использоваться в качестве маркеров на карте Leaflet.

Значки берут число r и вставляют его в изображение; это прекрасно работает, когда на значок напрямую ссылается браузер, однако, когда значок размещен в системе Leaflet, фоновое изображение значка не отображается; но я не могу понять, почему это так:

SVG: 

/***
 * Create an SVG file using the Bronze image and apply a text as given by PHP GET clause.
 ***/
$rank = (int)$_GET['r'];
if($rank < 1 ) {
    $rank = null;
}
header("content-type: image/svg+xml");
?>
<?xml version='1.0' encoding='utf-8'?>
<svg  version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 25' xml:space='preserve' height='25' width='20'>
<image xlink:href='https://domain.co.uk/images/map_icons/bronze5_20.png' x='0' y='0' width='20' height='25' />
<text id='svgtext' x='50%' y='40%' dominant-baseline='middle' text-anchor='middle' fill='black' font-size='11px'><?php print $rank;?></text>
</svg>

Leaflet (v1.6 current ): 

 var Brnz4 = L.icon({
            iconUrl: '/images/map_icons/bronze.php?r=4',
            iconSize:     [20, 25], // size of the icon
            iconAnchor:   [0, 25], // point of the icon which will correspond to marker's location
            popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
        });

И 

L.marker([56.224800000000000,-2.703890000000000], {icon:Brnz4} ).addTo(map)

Но на самом деле отображается просто номер текста (4) без фонового изображения.

Фоновое изображение загружается нормально при прямом вызове.
SVG (PHP) корректно загружается при непосредственном вызове браузером.
Текст отображается в правильном положении, что означает, что SVG читается.

Что я пробовал?

  • Добавлены различные заголовки к тегам <svg> / <xml>, как показано выше (например, viewbox, et c.).
  • абсолютные URL
  • Чтение в этом посте
  • использовались одинарные ' и двойные " цитаты в SVG, если XML была цитата- спецификация типа c.

Изображения:

enter image description here
Как выглядит маркер на карте листовки.

enter image description here
Как выглядит листовка в Инспекторе браузера.

enter image description here
Как маркер появляется с прямым URL в браузере. Это должно быть так, как это выглядит на карте.

Похоже, что каким-то образом через Leaflet фоновое изображение SVG не загружается. Почему?

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

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

var map = L.map('map', {
    center: [18.520, 73.856],
    zoom: 3,
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);
var iconSVG='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="37" viewBox="0 0 234 366.52"> <defs><style>.c{fill:#fff;font-size:120px;font-weight: bold;}</style></defs><g transform="translate(-1206 -293)"><path style="fill:#3b9906!important;" d="M117,366.52c-7.256-61.169-34.171-117.764-76.2-160.731a117,117,0,1,1,152.4-.005c-42.023,42.97-68.945,99.57-76.2,160.736Z" transform="translate(1206 293)"></path><text class="c" transform="translate(1288 460)"><tspan x="0" y="0">9</tspan></text></g></svg>';
 L.marker([18.520, 73.856], {
                        icon: L.divIcon({
                            html: iconSVG,
                            className: ''
                        })
                    }).addTo(map)
         .bindPopup('I am SVG Icon')
         .openPopup();
#map {
  width: 500px;
  height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>


<div id="map"></div>

Надеюсь, это поможет вам.

0 голосов
/ 10 марта 2020

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

<image xlink:href='data:image/png;base64,iVBOIGlkPSJ...etc, etc....IyMDRUgg==' x='0px' y='0px' width='20px' height='25px' />

Это работает.

...