控制层中的标记颜色传奇 - Leaflet

时间:2015-11-30 20:47:49

标签: javascript leaflet legend

我有一个基于这个例子创建的地图:

http://leafletjs.com/examples/layers-control.html

我有10个以上的类别,所以我想在控制层中绘制颜色图例,而不是像这个示例中那样创建div:

http://leafletjs.com/examples/choropleth.html

有没有办法不使用图标? 颜色在数组中定义:

//---- Map layers
// To store all markers layers
var layers = [];
// To store the control layer
var layer;
// To store all markers per descriptions
var overlays = {}; 

// Data URL variable
var URL;

//---- Noise variables

// Noise Descriptions   
var noise_description = ["Air Condition/Ventilation Equipment", 
                         "Alarms",
                         "Banging/Pounding", 
                         "Barking Dog", 
                         "Car/Truck Horn", 
                         "Car/Truck Music", 
                         "Construction Equipment", 
                         "Construction Before/After Hours", 
                         "Engine Idling", 
                         "Ice Cream Truck", 
                         "Jack Hammering", 
                         "Lawn Care Equipment",
                         "Loud Music/Party",
                         "Loud Talking",
                         "Loud Television",
                         "Manufacturing Noise",
                         "Private Carting Noise",
                         "Others"];

// Noise Description's colors            
var marker_colors = ['#7f3b08',
                     '#a50026',
                     '#d73027',
                     '#f46d43',
                     '#fdae61',
                     '#fee090',
                     '#ffffbf',
                     '#ffffff',
                     '#e0f3f8',
                     '#abd9e9',
                     '#74add1',
                     '#4575b4',
                     '#313695',
                     '#d8daeb',
                     '#b2abd2',
                     '#8073ac',
                     '#542788',
                     '#000000'];

//  Load GeoJSON from an external file
function load311ComplaintsIntoMap(map)
{
    console.log(URL);
    cleanMap();
    $.getJSON(URL, function(data)
    {
        if ( data.length == 0 ) 
        {
            return;
        }
        var markers = []
        for (var i = 0; i < noise_description.length; i++) 
        {
            markers[i] = [];
        }

        var all_markers = [];

        $.each(data, function(index, rec)
        {
            var marker;
            for (var i = 0; i < noise_description.length; i++) 
            {
                if (rec.descriptor.indexOf(noise_description[i]) > -1) 
                {
                    marker = L.circleMarker([rec.latitude, rec.longitude], marker_style(i));
                    markers[i].push(marker); 
                    all_markers.push(marker); 
                    break;
                }
                if (i == noise_description.length-1) 
                {
                    marker = L.circleMarker([rec.latitude, rec.longitude], marker_style(i));
                    markers[i].push(marker); 
                    all_markers.push(marker); 
                }
            }

        });

        // Create layer of all markers but do not add to map
        var all_layers = L.featureGroup(all_markers);       
        // Create specific layers of markers and add to map
        for (var i = 0; i < markers.length; i++) 
        {
            layers[i] = L.featureGroup(markers[i]).addTo(map);
            layers[i].bringToFront();
        }
        map.fitBounds(all_layers.getBounds());

        for (var i = 0; i < noise_description.length; i++) 
        {
            overlays[noise_description[i]] = layers[i];
        }

        // Add layer control using above object
        layer = L.control.layers(null,overlays).addTo(map);
    });
}

function cleanMap()
{
    for (var i = 0; i < layers.length; i++) 
    {
        map.removeLayer(layers[i]);
    }
    if (Object.keys(overlays).length)
        map.removeLayer(layer);
}

// Gets the color of a specific noise descriptor
function getColor(d) 
{
    return marker_colors[d];
}

// Defines the marker style for each marker
function marker_style(i) 
{
    return {
        fillColor: getColor(i),
        radius: 5,
        weight: 1,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

谢谢。

0 个答案:

没有答案