Openlayers Overlay loading gif image

Description:

Used in the project vector layers to make the point spread function of the picture, gif load found no effect. Find information found online, openlayers does not support gif image style.

Using overlay the way back, gif images assigned to DOM elements

solution:

1, a single point

First add a container for the id map marks the <div> tag

/ * Load gif image format * / 
        function addGifMarks () { 
            the let AA = document.getElementById ( 'Marks' ); 
            the let the lyr = new new ol.Overlay ({ 
                ID: "overlay" , 
                position: [ 0, 0], // default empty 
                Positioning: 'Center-bottom' , 
                element: AA, // binding element above to add 
                // stopEvent: to false, 
                offset: [-13.5, -40] // image offset 
            }); 
            encMap.encmap. to addOverlay (the lyr); 
            var= the src './assets/green.gif'; // entire image address 
            . document.getElementById ( 'Marks') style.backgroundImage = 'URL (' the src + + ')' ; 
            lyr.setPosition ([ 12,970,694.29785, 4743563.564] ); // display   
        }

The core of this approach is that using the Overlay element property binding a <div> tag, and then set the path to a gif image backgroundImage style the <div> tag. (This idea can be used in many places)

2, multi-point

    / * * 
     * @Description sow (element to overlay the way to solve openlayers can not load gif images and so on) 
     * @param {} _MAP the Map of map objects 
     * @param {Array} _points point set format [{attributes: {x : 12,976,694.29785, Y: 4743563.56400}}, {Attributes: {X: 12,937,907.75571, Y: 4778074.42433}}] 
     * @param {Object} _imgParam image name, format {src: image url, width: 50px, height: 100px), the format {src: image url, width: image width, height: high picture} 
     * @param {String} _elementId container Id overlay added 
     * @param {function} _clickFunc click image callback 
     * / 
    the this .addMarksByOverlay = function (_MAP, _points , _imgParam, _elementId, _clickFunc) { 
        the let marker = null ;
         // loop set point 
        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 placed div 
                Element: document.getElementById ( 'overlay' + I),                 
                stopEvent: to false 
            }); 

            // individually added to the map overly 
            _map.encmap.addOverlay (lyr );
             var the src = _imgParam.src; // entire image address 
            document.getElementById ( 'overlay' + I) = .style.backgroundImage 'URL (' the src + + ')' ; 
            lyr.setPosition ([_ Points [I]. attributes.x, _points [I] .attributes.y]); // show   

            // if the tap 
            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);
                };
            }
        }
    }

The core idea of ​​multi-point and single point load the same, but a more logical.

Imagine if a Overlay bind a div, a div to generate a point feature, you can push a Overlay is equivalent to a point.

The problem comes, if according to the method to a single point, then I sprinkle 100 points on the need to pre-build 100 div, this is not science.

So here I used a method to dynamically build div, id is _elementId control, in which the new id is overlay1, overlay2, overlay3 ... the div, and circulating binding Overlay

Before the second load, it will determine whether to load too, if you load too, the first empty the last div

Empty attachment method:

　　　　　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;
        }