Openlayers Overlay加载gif图片

时间 2019-11-29 标签 openlayers overlay 加载 gif 图片

说明：

项目中使用vector图层作图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。app

后面采用overlay的方式，gif图片赋值给DOM元素函数

解决方案：

一、单个点

先在地图容器里新增一个id为marks的<div>标签this

/*加载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样式。（这个思路能够用在不少地方）url

二、多点

    /**
     * @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);
                };
            }
        }
    }

多点的核心思路和加载单点同样，可是多了一个逻辑。spa

设想一下，若是一个Overlay绑定一个div，一个div生成一个点要素的话，能够推得一个Overlay就至关于一个点。code

问题就来了，若是按单点的方法来的话，我撒100个点就须要预先建100个div，这并不科学。对象

所以这里我采用动态构建div的方法，找到id为_elementId的控件，在里面新建id为overlay1，overlay2，overlay3...的div，并循环绑定Overlayblog

第二次加载前，会判断是否加载过，若是加载过，则先清空上一次的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;
        }