码迷,mamicode.com
首页 > 其他好文 > 详细

openlayers添加gif动态图

时间:2020-07-02 18:29:21      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:技术   image   doc   鼠标   enter   check   child   att   repair   

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.结果

技术图片

openlayers添加gif动态图

标签:技术   image   doc   鼠标   enter   check   child   att   repair   

原文地址:https://www.cnblogs.com/wangchaoxu/p/13226031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!