openlayers3實現動態圖示gif其他css支援的格式

原文：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);//隱藏
        }
    }