我有一个基于这个例子创建的地图:
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
};
}
谢谢。