openlayers添加gif动态图

Posted 2020-12-14 wangchaoxu

1.代码

   <div id="marks"></div>

   function addMarksByOverlay(map,_points, _elementId, _clickFunc) {
    let marker = null;
    //循环点集
    for (let i = 0; i < _points.length; i++) {
      _imgParam = {
        width: ‘32px‘,
        height: ‘32px‘,
        src: "https://img.vim-cn.com/f1/0073c5b9cfa5b4e20fa46f6dae931f705eb9fd.gif",
      };
      //新增放置overly的div
      let _overlay = document.getElementById(_elementId);
      _overlay.id = _elementId;
      if (document.getElementById(‘overlay‘ + i)) {
        let _removeLyr = this.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.style.cursor = ‘pointer‘;
      sElement.attr = _points[i];
      sElement.x = _points[i].Lon;
      sElement.y = _points[i].Lat;
      _overlay.appendChild(sElement);

      //新增overly
      var lyr = new Overlay({
        id: ‘overlay‘ + i,
        positioning: ‘center-center‘,
        //属性
        attributes: _points[i],
        //overly放置的div
        element: document.getElementById(‘overlay‘ + i),
        stopEvent: false,
      });
      var img = document.createElement(‘img‘);
      img.src = _imgParam.src;
      img.style.width = _imgParam.width;
      img.style.height = _imgParam.height;
      //逐个把overly添加到地图上
      map.addOverlay(lyr);
      document.getElementById(‘overlay‘ + i).appendChild(img);
      lyr.setPosition([_points[i].Lon, _points[i].Lat]); //显示

      //鼠标移动事件
      if (_clickFunc) {
        document.getElementById(‘overlay‘ + i).onmouseover = function(evt) {
          if (!evt.currentTarget.attr) {
            return;
          }
          let attr = evt.currentTarget.attr;
          attr.pixel={
            x:evt.x,
            y:evt.y
          }
          _clickFunc(attr);
        };
      }
    }
  }

2.调用

   let markers=[{
    "StationNo": "H0204",
    "StationName": "莲花镇",
    "Lat": "46.33666667",
    "Lon": "126.7688889",
    "Address": "莲花镇",
    "Ruqin": "",
    "Dianchi": "",
    "TongXun": "",
    "Shuju": "",
    "Imei": "",
    "JdqImei": "",
    "Type": "4",
    "Height": "147.9",
    "Battery": "13.7",
    "AppId": "8",
    "UserId": "15",
    "IsCheck": "1",
    "AreaCode": "230111",
    "RepairTime": "24",
    "WarnLevel": "0"
 }]
   addMarksByOverlay(markers, marks‘, e=> {
        console.log(e);
  });

3.结果