如何解决在Openlayers中旋转带有动画的标记
我有此代码:
this.posFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-5.7,43.5])),name: 'pos'
});
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10,10],anchorXUnits: 'pixels',anchorYUnits: 'pixels',src: 'car.svg'
})
});
this.posFeature.setStyle(posStyle);
this.markerPosSource = new ol.source.Vector({features: [this.posFeature]});
this.layerPos = new ol.layer.Vector({source: this.markerPosSource});
map.addLayer(this.layerPos);
我想用动画旋转图标(旋转)。可能吗?如果没有,如何在没有动画的情况下旋转?
谢谢!
解决方法
要平滑地对旋转进行动画处理,请在每次渲染地图时根据经过的时间计算所需的旋转,例如每10秒完整旋转一次:
<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<style>
html,body,.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0,0]),name: 'Null Island',population: 4000,rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5,1],src: 'https://openlayers.org/en/v6.4.3/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [vectorLayer],target: document.getElementById('map'),view: new ol.View({
center: [0,0],zoom: 3
})
});
var startTime = new Date().getTime();
map.on('rendercomplete',function(e) {
var elapsedTime = e.frameState.time - startTime;
var rotation = elapsedTime / 10000 * Math.PI;
iconStyle.getImage().setRotation(rotation);
iconFeature.changed();
});
</script>
</body>
</html>
,
要旋转,请使用旋转(NB使用弧度而不是度)
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10,10],anchorXUnits: 'pixels',anchorYUnits: 'pixels',src: 'car.svg',rotation: Math.PI/2
})
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。