Tôi có hai lớp phủ http://02d0c8c.netsolhost.com/dev/lcb_cencies_layers3.html có thể được bật và tắt bằng Điều khiển lớp. Tôi muốn huyền thoại cho mỗi lớp bật / tắt cùng với các lớp.
Tôi chưa quen với JavaScript và mới với Leaflet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lake Champlain Basin Census Data</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
<![endif]-->
<style>
#map {
width: 750px;
height: 580px;
}
.info {
padding: 6px 8px;
font: 14px/16px Verdana, Geneva, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
font-family: Verdana, Geneva, sans-serif;
margin: 0 0 5px;
color: #065581;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
</head>
<body>
<div id="map">
<script type="text/javascript" src="js/LCB_Census_Towns.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([44.3, -73.1], 8);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/d2a498d874144e7dae5e7ab4807f3032/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707',
styleId: 22677
}).addTo(map);
// control that shows state info on hover
var info = L.control({position: 'bottomleft'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>Population Change</h4>' + (props ?
'<b>Town: ' + props.NAME10 + '</b><br />Percent change, 1970-2010<br />(2001-2011 in Québec): <em><strong> ' + props.CHNG_70_10 + '</strong></em>%<br /><br />1970 Population: ' + props.POP1970 + '<br />1980 Population: ' + props.POP1980 + '<br />1990 Population: ' + props.POP1990 + '<br />2000 Population: ' + props.POP2000 + '<br />2010 Population: ' + props.POP2010
: '<b>Hover over a town</b>');
};
info.addTo(map);
//STYLES FOR POPULATION CHANGE MAP
// get color depending on population density value
function getColor(d) {
return d > 100 ? '#BD0026' :
d > 50 ? '#F03B20' :
d > 20 ? '#FD8D3C' :
d > 10 ? '#FEB24C' :
d > 0 ? '#FED976' :
d > -30 ? '#1C9099' :
'#1C9099';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.CHNG_70_10)
};
}
//STYLES FOR POPULATION MAP
// get color for Population Map depending on population value
function getColor2(d) {
return d > 20000 ? '#006D2C' :
d > 10000 ? '#31A354' :
d > 5000 ? '#74C476' :
d > 2500 ? '#A1D99B' :
d > 0 ? '#C7E9C0' :
'#1C9099';
}
function style2(feature) {
return {
weight: 2,
opacity: 1,
color: '#666',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor2(feature.properties.POP2010)
};
}
//LAYER FUNCTIONALITY
var popChange = new L.geoJson(lcbCensusData, {
style: style,
onEachFeature: function (feature, layer) {
var defaultStyle = layer.style,
that = this;//NEW
layer.on('mouseover', function (e) {
this.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
});
layer.on('mouseout', function (e) {
popChange.resetStyle(e.target); //NEW
info.update();
});
}
});
var population = L.geoJson(lcbCensusData, {
style: style2,
onEachFeature: function (feature, layer) {
var defaultStyle = layer.style,
that = this;//NEW
layer.on('mouseover', function (e) {
this.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
});
layer.on('mouseout', function (e) {
population.resetStyle(e.target); //NEW
info.update();
});
}
}).addTo(map);
//LAYER CONTROL
var overlays = {
"Population Change,'70-'10": popChange,
"Population": population
};
L.control.layers(null, overlays, {collapsed: false}).addTo(map);
// LEGEND
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML +=
'<img src="legend.png" alt="legend" width="134" height="147">';
return div;
};
legend.addTo(map);
</script>
</div>
</body>
</html>
Bạn có huyền thoại thứ hai có sẵn? 02d0c8c.netsolhost.com/dev/legend.png là phiên bản hiện tại.
—
Mapperz
Tôi đã viết một câu trả lời cho một câu hỏi gần đây hơn cũng có thể hữu ích cho việc giải quyết vấn đề của câu hỏi này vì nó cho thấy hai jsfiddles đang hoạt động: gis.stackexchange.com/questions/164755/ trộm
—
Thomas B