OpenLayer点击动态图标弹出提示框实例

本人变向解决由于Openlayers不支持gif和swf格式图片要素问题。

希望给需要的朋友提供参考。具体如下：

源代码：

function TipFunc(str)

{

    alert("告警站点==》id：" + str.split('@')[0] + "  站名：" + str.split('@')[1] + "  站类：" + str.split('@')[2]);

}

function LoadZB_AlertOnMap(str) {

    var arr = str.split("|");

    for (var i = 0; i < arr.length; i++) {

        tmp_arr = arr[i].split(",");

        if (tmp_arr[7] != "" && tmp_arr[10] != "" && parseFloat(tmp_arr[7]) - parseFloat(tmp_arr[10]) >= 0) {

            var args = tmp_arr[0] + "@" + tmp_arr[1] + "@AA";

            $("#GQalert_Station").append("<div id = 'zboverly" + i + "' class = 'overlay'><img src='../images/geolocation_marker.png'
onclick='TipFunc("" + args + "");'/></div>");

            $("#zboverly" + i).css("visibility", "visible");

            var marker = new ol.Overlay({

                position: new ol.proj.transform([parseFloat(tmp_arr[3]), parseFloat(tmp_arr[4])], epsg84proj, epsgWMproj),

                element: document.getElementById('zboverly' + i)

            });

            map.addOverlay(marker);

        }

    }

}

样式设置：

[id^="zboverly"]{

                visibility:hidden;
height:25px;
width:25px;
border-radius: 12px;
background: rgba(255,0,205, 0.9);

transform: scale(0);
animation: myfirst 1s;
animation-iteration-count: infinite;

9560
}

@keyframes myfirst{
     to{
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}