Openlayers Overlay加载gif图片

概述说明： 项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。 后面采用overlay的方式，gif图片赋值给DOM元素 解决方案： 1、单个点 先在地图容器里新增一个id为marks的<div>标签 /*加载gif图片格式*/ function addGifMarks() { le 说明：

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

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

解决方案： 1、单个点

先在地图容器里新增一个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样式。（这个思路可以用在很多地方）

2、多点

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

总结

以上是内存溢出为你收集整理的Openlayers Overlay加载gif图片全部内容，希望文章能够帮你解决Openlayers Overlay加载gif图片所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。