[英]Marker or overlay moving animation moving smoothly in openlayers 3
I created a plunkr which has a moving marker like a car. 我创建了一个像汽车一样具有运动标记的plunkr 。
var olview = new ol.View({
center: [-5484111.13, -1884437.22],
zoom: 18,
minZoom: 2,
maxZoom: 20
});
var osm = new ol.source.OSM();
var lineString = new ol.geom.LineString([]);
var map = new ol.Map({
target: 'map',
view: olview,
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: osm,
opacity: 0.6
})
]
});
var car = document.getElementById('geo1');
var marker = new ol.Overlay({
positioning: 'center-center',
offset: [0, 0],
element: car,
stopEvent: false
});
map.addOverlay(marker);
var path = [
[-5484101.57, -1884475.44],
[-5484114.71, -1884432.74],
[-5484117.70, -1884416.62],
[-5484106.95, -1884392.28]
];
lineString.setCoordinates(path);
map.once('postcompose', function(event) {
console.info('postcompose');
interval = setInterval(animation, 500);
});
var i = 0, interval;
var animation = function(){
if (i == path.length){
i = 0;
}
marker.setPosition(path[i]);
i++;
};
This is written in openlayers, I want it to look smooth when moving similar to this. 这是用openlayers编写的,我希望它在移动时像这样看起来平滑。
https://github.com/terikon/marker-animate-unobtrusive https://github.com/terikon/marker-animate-unobtrusive
I'm a complete beginner in openlayers, can someone help me with this? 我是openlayers的一个完整的初学者,有人可以帮助我吗? Thanks!
谢谢!
I've made three tests. 我做了三个测试。 First and second are pure ol3 and last is with tween.js .
第一个和第二个是纯ol3,最后一个是tween.js 。
I'm using Arc.js to create a path. 我正在使用Arc.js创建路径。
The first example is using setInterval
. 第一个示例使用
setInterval
。
The second example is using window.requestAnimationFrame
. 第二个示例使用
window.requestAnimationFrame
。
And the last with Tween.js
. 最后是
Tween.js
。
Your example doesn't run smoothly because it is just a few coordinates. 您的示例运行不顺利,因为它只是几个坐标。
Note that the Tween.js
integration is not an integration at all. 请注意,
Tween.js
集成根本不是集成。 It is just a tricky CSS manipulation. 这只是一个棘手的CSS操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.