<!DOCTYPE html>
<html>
<head>
<title>Leaflet中点、线、面、圆、矩形闪烁效果实战</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
<script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script>
/*var mymap = L.map('mapid').setView([29.052934, 104.0625], 5);
L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {
maxZoom: 16,
attribution: 'Leaflet中点、线、面、圆、矩形闪烁效果实战',
id: 'mapbox/streets-v11',
//crs:L.CRS.EPSG3857,
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);*/
L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
code: 'EPSG:4326',
projection: L.Projection.LonLat,
transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
scale: function (zoom) {
return 256 * Math.pow(2, zoom - 1);
}
});
var corner1 = L.latLng(-90, -180); //设置左上角经纬度
var corner2 = L.latLng(90, 180); //设置右下点经纬度
var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围
var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([29.052934, 104.0625], 5);
//第二种设置方式，可行
mymap.setMaxBounds(bounds);
L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {
maxZoom: 16,
attribution: 'yelangkingMap data © <a href="https://www.openstreetmap.org/">本地瓦片加载</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 256,
zoomOffset: -1
}).addTo(mymap);
//标签
L.tileLayer('http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png', {maxZoom: 10,minZoom:3,
id: 'mapbox/label',tileSize: 256,zoomOffset: -1
}).addTo(mymap);
function setTargetSelect(e){
var i = 1
var int = setInterval(() => {
if(!e._map) clearInterval(int)
if (i < -1) {
i = 1
}
i = i - 0.08
if (i < 0) e.setOpacity(i * -1)
else e.setOpacity(i)
},60)
}
function setTargetSelect2(e) {
let timer = null
var i = 1
var j = 0.2 //注意要和线的透明度同步修改，保持开始和结束时间一致
function updateAnimation() {
if (i < -1) {
i = 1
}
i = i - 0.01
if (j < -0.2) {
j = 0.2
}
j = j - 0.002 //注意要和线的透明度同步修改，保持开始和结束时间一致
if (i < 0) e.setStyle({opacity:i * -1,fillOpacity:j*-1})
else e.setStyle({opacity:i,fillOpacity:j})
if (!e._map) return cancelAnimationFrame(timer)
window.requestAnimationFrame(updateAnimation)
}
window.requestAnimationFrame(updateAnimation)
}
var marker = L.marker([22.024546, 110.654297]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />第一个点");
setTargetSelect(marker);
var marker1 = L.marker([29.61167, 113.950195]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />第二个点.");
setTargetSelect(marker1);
var circle = L.circle([29.649869, 120.146484], 99000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("我是一个圆2.");
setTargetSelect2(circle);
var polygon = L.polygon([
[32.916485, 101.601563],
[30.562261, 105.556641],
[34.524661, 108.149414],
[35.173808, 103.051758]
]).addTo(mymap).bindPopup("我是一个多边形.");
setTargetSelect2(polygon);
var popup = L.popup();
function onMapClick(e) {
popup.setLatLng(e.latlng).setContent("当前坐标为:" + e.latlng.toString()).openOn(mymap);
}
mymap.on('click', onMapClick);
//定义一个Bounds 左上角和右下角的坐标
var bounds=[[35.88905, 91.845703], [32.842674, 96.635742]]
var rectangle = L.rectangle(bounds,{color:'red',weight:1}).addTo(mymap);
setTargetSelect2(rectangle);
</script>
</body>
</html>
