前提
前面如何创建地图对象与矢量图层这里就省略了,这里格外针对openlayer提供的api方法如何在原有的轨迹动态移动小车
方法
getCoordinateAt()
首先我们要了解下getCoordinateAt() 这个方法,官方解释是返回linestring中提供的分式处的坐标,分数是0到1之间的一个数字,其中0是行字符串的开始,1是结束。
那好办,相当于linestring 的插值方法,然后对去到的点与上一个点构建移动的轨迹。
两点成线算出方位角,设置小车的移动方向,一切准备好,开干!!
js方法
function animation(step) {
requestID = window.requestAnimationFrame(function () {
if (step <= 1) {
var second = fastLine.getGeometry().getCoordinateAt(step); // 获取第二点的坐标 fastLine:表示已经渲染好的轨迹路线
var first = point.getGeometry().getCoordinates(); // point: 小车对象
var angle = -Math.atan2(second[1] - first[1], second[0] - first[0]) // 算出移动点与上一个点的角度
point.getGeometry().setCoordinates(fastLine.getGeometry().getCoordinateAt(step)) // 小车开始移动到下一点
point.getStyle().getImage().setRotation(angle) // 小车的方向
let coord = []
coord.push(first)
coord.push(second)
var Tempfeature = new ol.Feature({ // 小车移动的轨迹
geometry: new ol.geom.LineString(coord)
})
vector2.getSource().addFeature(Tempfeature);
step = step + 0.0003;
animation(step);
} else {
var second = ol.proj.fromLonLat([111, 20])
var first = point.getGeometry().getCoordinates()
var angle = -Math.atan2(second[1] - first[1], second[0] - first[0])
point.getGeometry().setCoordinates(second)
point.getStyle().getImage().setRotation(angle)
let coord = []
coord.push(first)
coord.push(second)
var Tempfeature = new ol.Feature({
geometry: new ol.geom.LineString(coord)
})
vector2.getSource().addFeature(Tempfeature)
}
}, 1)
}