动起来的图标会更有吸引力，下面用overlay+css的方式来实现：
@-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;}
}
#anchorImg
{
display: block;
position: absolute;
animation: zoom 5s;
animation-iteration-count: infinite;
-moz-animation: zoom 5s; /* Firefox */
-moz-animation-iteration-count: infinite;
-webkit-animation: zoom 5s; /* Safari 和 Chrome */
-webkit-animation-iteration-count: infinite;
-o-animation: zoom 5s; /* Opera */
-o-animation-iteration-count: infinite;
}
</style>
var anchor = new ol.Overlay({ element: document.getElementById('anchor') }); anchor.setPosition([104, 30]); map.addOverlay(anchor); </script>
代码和之前的例子差不多，只是多了css动画的设置：
<head>
<!--定义动画，图标先放大，再缩小-->
<style type="text/css">
@keyframes zoom
{
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;}
}
@-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 5s; /* Firefox */
-moz-animation-iteration-count: infinite; /* 一直重复动画 */
-webkit-animation: zoom 5s; /* Safari 和 Chrome */
-webkit-animation-iteration-count: infinite; /* 一直重复动画 */
-o-animation: zoom 5s; /* Opera */
-o-animation-iteration-count: infinite; /* 一直重复动画 */
}
</style>
</head>
<div id="map" style="width: 100%"></div>
<div id="anchor" style="width: 64px;height: 64px;" ><img id='anchorImg' src="../img/anchor.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:4326',
center: [104, 30],
zoom: 10
})
});
var anchor = new ol.Overlay({
element: document.getElementById('anchor')
});
anchor.setPosition([104, 30]);
map.addOverlay(anchor);
</script>除了这种css实现动画之外，你还可以直接加载gif动画，这是非常简单的，再此不表。