自定义图例/图像作为传单地图中的图例 [英] Custom legend / image as legend in leaflet map

问题描述

我用自定义图标作为标记构建了地图.您可以在此处的jsfiddle中查看代码和结果: https://jsfiddle.net/marielouisejournocode/x24stb0m/

I built a map with custom icons as markers. You can see the code and the result in my jsfiddle here: https://jsfiddle.net/marielouisejournocode/x24stb0m/

我试图更改常规"图例代码以将图片放在此处，但是我对js和Leaflet还是陌生的，无法真正解决这个问题.

I tried to change the "normal" legend code to put the picture there but I am new to js and leaflet and can't really work this out.

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
    grades = [1795, 1945, 1960, 1980, 2000],
    labels = [];

for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
        '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
 }

 return div;
 };

 legend.addTo(map);

我现在想做的是插入一个图例，该图例说明此示例中的图标:

What I want to do now is insert a legend that explains the icons like in this example:

我将使用photoshop来创建它，但是如何在地图上散布地图却不会像普通小册子中的图例那样表现出奇怪的图像呢?

I'd use photoshop to create it, but how to overlay the map with an image that doesn't behave strangely when the map is spreaded but does behave like a normal legend in leaflet?

非常感谢你， 玛丽

推荐答案

您只需要在数组中插入信息，例如:

You just need insert the info in the array like:

 grades = ["Car", "ball"],
 labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

还有

 grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';

示例:

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ["Car", "ball"],
        labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

    // loop through our density intervals and generate a label with a colored square for each interval
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';
    }

    return div;
};

legend.addTo(map);

https://jsfiddle.net/x24stb0m/24/

这篇关于自定义图例/图像作为传单地图中的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！