मेरे पास दो ओवरले हैं http ://02d0c8c.netsolhost.com/dev/lcb_census_layers3.html जिसे लेयर कंट्रोल से चालू और बंद किया जा सकता है। मैं प्रत्येक लेयर के लिए लेयर्स को चालू / बंद करना चाहता हूं।
मैं जावास्क्रिप्ट के लिए नया हूँ और USC के लिए नया हूँ।
<!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>
क्या आपके पास दूसरी किंवदंती उपलब्ध है? 02d0c8c.netsolhost.com/dev/legend.png वर्तमान एक है।
—
Mapperz
मैंने एक और हालिया प्रश्न का उत्तर लिखा, जो इस प्रश्न की समस्या को हल करने के लिए भी सहायक हो सकता है क्योंकि यह दो कार्यशील jsfiddles दिखाता है: gis.stackexchange.com/questions/164755/…
—
थॉमस