openlayers新增gif動態圖
阿新 • • 發佈:2020-07-02
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); });