openlayers添加gif动态图标
目录
功能说明
- 地图上添加动画图标
- 改变动态图标位置
功能实现
- 准备动态gif图标
- 添加html元素
- 添加overlay
- 动态设置图标显示与位置
添加html元素
//id 大小可根据图标来设置
<div id="marker" title="Marker" style="height: 40px; width: 27px;"></div>
添加overlay
var marker = new ol.Overlay({
position: [0,0],
positioning: 'center-bottom',
element: document.getElementById('marker'),
//stopEvent: false,
offset: [-13.5, -40]//根据图标大小设置偏移位置
});
map.addOverlay(marker);
动态设置图标,改变坐标
var src = '../Content/HomeMap/images/' + type + '.gif';
var css = {
background: 'url(' + src + ')'
};
$('#marker').css(css);
marker.setPosition(coordinate);//位置
牛
牛