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(&quot;” + args + “&quot;);’/></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;
}

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

转载自：https://blog.csdn.net/pdw521/article/details/79273142