<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图层控制</title>
<link rel="stylesheet" type="text/css" href="../leaflet/iclient9-leaflet.css" />
<script type="text/javascript" src="../leaflet/include-leaflet.js"></script>
<script src='../js/jquery.js'></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var grayscale = L.tileLayer(mbUrl, {
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
});
var streets = L.tileLayer(mbUrl, {
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});
var baseLayers = {//默认加载数组的第一个tileLayer
"<span style='color: red'>白天</span>": grayscale,//可添加样式
"黑夜": streets
};
var overlays = {
"Cities": cities
};
//第二个参数可省略。第一个参数可以为null,用于只控制overlays
L.control.layers(baseLayers,overlays).addTo(map);
</script>
</body>
</html>
LeafLet图层控制
最新推荐文章于 2024-05-16 14:25:28 发布