Openlayers Overlay加載gif圖片

說明：

項目中使用vector圖層作圖片撒點功能，發現加載gif沒有效果。網上查找資料發現，openlayers不支持gif圖片樣式。

後面採用overlay的方式，gif圖片賦值給DOM元素

解決方案：

一、單個點

先在地圖容器裏新增一個id爲marks的<div>標籤

/*加載gif圖片格式*/
        function addGifMarks() {
            let aa = document.getElementById('marks');
            let lyr = new ol.Overlay({
                id: "overlay",
                position: [0, 0],//默認空
                positioning: 'center-bottom',
                element: aa,//綁定上面添加的元素
                //stopEvent: false,
                offset: [-13.5, -40]//圖片偏移量
            });
            encMap.encmap.addOverlay(lyr);
            var src = './assets/green.gif';//拼接圖片地址
            document.getElementById('marks').style.backgroundImage = 'url(' + src + ')';
            lyr.setPosition([12970694.29785, 4743563.564]); //顯示  
        }

這個方法的核心在於使用Overlay的element屬性綁定一個<div>標籤，而後將gif圖片路徑設置給這個<div>標籤的backgroundImage樣式。（這個思路能夠用在不少地方）

二、多點

    /**
     * @description 撒點（以overlay的element方式，解決openlayers沒法加載gif圖片等問題）
     * @param {Map} _map 地圖對象
     * @param {Array} _points 點集，格式[{attributes:{x:12976694.29785,y:4743563.56400}},{attributes:{x:12937907.75571,y:4778074.42433}}]
     * @param {Object} _imgParam 圖片名稱，格式{src:圖片url,width:50px,height:100px），格式{src:圖片url,width:圖片寬,height:圖片高}
     * @param {String} _elementId overlay添加的容器Id
     * @param {Function} _clickFunc 點擊圖片回調函數
     */
    this.addMarksByOverlay = function (_map, _points, _imgParam, _elementId, _clickFunc) {
        let marker = null;
        //循環點集
        for (let i = 0; i < _points.length; i++) {
            //新增放置overly的div
            let _overlay = document.getElementById(_elementId);
            _overlay.id = _elementId;
            if(document.getElementById("overlay" + i))
            {
                let _removeLyr = _map.encmap.getOverlayById("overlay" + i);
                _map.encmap.removeOverlay(_removeLyr);
            }
            let sElement = document.createElement("div");
            sElement.id = "overlay" + i;
            sElement.style.width = _imgParam.width;
            sElement.style.height = _imgParam.height;
            sElement.attr = _points[i].attributes;
            sElement.x = _points[i].attributes.x;
            sElement.y = _points[i].attributes.y;            
            _overlay.appendChild(sElement);    
            
            //新增overly
            var lyr = new ol.Overlay({
                id: 'overlay' + i,
                positioning: 'center-center',
                //屬性
                attributes: _points[i].attributes,
                //overly放置的div
                element: document.getElementById('overlay' + i),                
                stopEvent: false
            });

            //逐個把overly添加到地圖上
            _map.encmap.addOverlay(lyr);
            var src = _imgParam.src;//拼接圖片地址
            document.getElementById('overlay' + i).style.backgroundImage = 'url(' + src + ')';
            lyr.setPosition([_points[i].attributes.x, _points[i].attributes.y]); //顯示  

            //若是點擊事件
            if (_clickFunc) {
                document.getElementById('overlay' + i).onclick = function (evt) {
                    if (!evt.currentTarget.attr) {
                        return;
                    }
                    let attr = evt.currentTarget.attr;
                    attr.x = evt.currentTarget.attr.x ? evt.currentTarget.attr.x : 0;
                    attr.y = evt.currentTarget.attr.y ? evt.currentTarget.attr.y : 0;
                    _clickFunc(attr);
                };
            }
        }
    }

多點的核心思路和加載單點同樣，可是多了一個邏輯。

設想一下，若是一個Overlay綁定一個div，一個div生成一個點要素的話，能夠推得一個Overlay就至關於一個點。

問題就來了，若是按單點的方法來的話，我撒100個點就須要預先建100個div，這並不科學。

所以這裏我採用動態構建div的方法，找到id爲_elementId的控件，在裏面新建id爲overlay1，overlay2，overlay3...的div，並循環綁定Overlay

第二次加載前，會判斷是否加載過，若是加載過，則先清空上一次的div

附清空方法：

　　　　　let olLyrs = this.encmap.getOverlays().getArray();
        let olLyrsLength = this.encmap.getOverlays().getArray().length;
        for(let i = 0;i < olLyrsLength;i++){
            olLyrs[i].setPosition(undefined);
            //olLyrs[i] = null;
        }