openlayers3实现动态图标gif其他css支持的格式-CSDN博客

原文：http://www.giserdqy.com/gis/opengis/ol4/106
1.添加html元素

<div id="marker" title="Marker" style="height:40px;width:27px;"></div>//宽高为图片大小

2.添加overlay

var marker = new ol.Overlay({
        position: [0,0],//默认空
        positioning: 'center-bottom',
        element: document.getElementById('marker'),//绑定上面添加的元素
        //stopEvent: false,
        offset: [-13.5, -40]//图片偏移量
    });
    map.addOverlay(marker);

3.实时改变动态图片


    function changeStyle(name) {
        var f = ckLayer.getSource().getFeatureById(name);
        if (f) {
            var type = f.getProperties().type;
            var coordinate = f.getGeometry().getCoordinates(); //获取图层上某个feature坐标           
            var src = '/Content/HomeMap/images/' + type + '.gif';//拼接图片地址
            var css = {//在这里设置css3支持的各种样式
                background: 'url(' + src + ')'
            };
            $('#marker').css(css);//改变样式
            marker.setPosition(coordinate); //显示         

        } else {
            marker.setPosition(undefined);//隐藏
        }
    }