openlayers3实现动态图标gif其他css支持的格式
原文:http://www.giserdqy.com/gis/opengis/ol4/106
1.添加html元素
<div id="marker" title="Marker" style="height:40px;width:27px;"></div>//宽高为图片大小
2.添加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);
3.实时改变动态图片
function changeStyle(name) {
var f = ckLayer.getSource().getFeatureById(name);
if (f) {
var type = f.getProperties().type;
var coordinate = f.getGeometry().getCoordinates(); //获取图层上某个feature坐标
var src = '/Content/HomeMap/images/' + type + '.gif';//拼接图片地址
var css = {//在这里设置css3支持的各种样式
background: 'url(' + src + ')'
};
$('#marker').css(css);//改变样式
marker.setPosition(coordinate); //显示
} else {
marker.setPosition(undefined);//隐藏
}
}
GIS开发https://www.giserdqy.comGIS,WebGIS,ArcGIS,OpenLayers,Leaflet,Geoserver,PostGIS,BIM,空间大数据,GeoAI技术分享