openlayers动画图标显示，与加载图标的功能相识，不过加了一个，图标的动态效果，页面的感官会好一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="ol.css">
<link rel="stylesheet" href="custom/jdmap.css">
<script src="ol-debug.js"></script>
<script src="custom/jdmapvar.js"></script>
<script src="custom/jdcustomvar.js"></script>
<script src="custom/scale.js"></script>
<script src="custom/measure.js"></script>
<script src="custom/jdmap.js"></script>
<title>地图demo</title>
<!--定义动画，图标先放大，再缩小-->
<style type="text/css">
@keyframes zoom {
from {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
50% {
top: -16px;
left: -16px;
width: 64px;
height: 64px;
border-radius: 32px;
}
to {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
}
@-moz-keyframes zoom
/* Firefox */
{
from {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
50% {
top: -16px;
left: -16px;
width: 64px;
height: 64px;
}
to {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
}
@-webkit-keyframes zoom
/* Safari 和 Chrome */
{
from {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
50% {
top: -16px;
left: -16px;
width: 64px;
height: 64px;
}
to {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
}
@-o-keyframes zoom
/* Opera */
{
from {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
50% {
top: -16px;
left: -16px;
width: 64px;
height: 64px;
}
to {
top: 0;
left: 0;
width: 32px;
height: 32px;
}
}
/* 应用css动画到图标元素上 */
#anchorImg {
display: block;
position: absolute;
animation: zoom 5s;
animation-iteration-count: infinite;
/* 一直重复动画 */
-moz-animation: zoom 3s;
/* Firefox */
-moz-animation-iteration-count: infinite;
/* 一直重复动画 */
-webkit-animation: zoom 3s;
/* Safari 和 Chrome */
-webkit-animation-iteration-count: infinite;
/* 一直重复动画 */
-o-animation: zoom 3s;
/* Opera */
-o-animation-iteration-count: infinite;
/* 一直重复动画 */
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div id="anchor" style="width: 64px;height: 64px;"><img style='border-radius: 17px;' id='anchorImg' src="1.png" alt="示例锚点" /></div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: [104, 30],
zoom: 2
})
});
var anchor = new ol.Overlay({
element: document.getElementById('anchor')
});
anchor.setPosition([116.42404,39.983276]);
map.addOverlay(anchor);
</script>
</body>
</html>
