参考示例 ol-ext: Openlayers feature animation
核心代码：
// 核心代码
var anim, controler;
function animateFeature() {
if (routeFeature) {
anim = new ol.featureAnimation.Path({
path: routeFeature,
rotate: true,
easing: ol.easing.linear,
speed: 500,
// revers: true
});
anim.on('animationstart', (e) => {
console.log('start')
})
/**
anim.on('animating', (e) => {
map.getView().setCenter(e.geom.getCoordinates())
map.getView().setRotation(e.rotation || 0)
})
**/
anim.on('animationend', (e) => {
console.log('end')
})
controler = vectorLayer.animateFeature(geoMarker, anim);
}
}
animateFeature()完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点沿线动画</title>
<!-- Openlayers -->
<link rel="stylesheet" href="./dist/ol.css" />
<script type="text/javascript" src="./dist/ol.js"></script>
<!-- ol-ext -->
<link rel="stylesheet" href="./dist/ol-ext.css" />
<script type="text/javascript" src="./dist/ol-ext.js"></script>
<style type="text/css">
html,
body,
#map {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
function transform(pois) {
return ol.proj.transform(pois, 'EPSG:4326', 'EPSG:3857')
}
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
var map = new ol.Map({
controls: [],
target: 'map',
layers: [tileLayer],
view: new ol.View({
center: transform([103.584297498027, 36.119086450265]),
zoom: 4,
})
});
// 线
var lineCoord = [
[79.78351732091059, 38.26132508806543],
[91.24445696667777, 40.75626733863021],
[95.39289017514336, 33.53665615186689],
[101.72101517514338, 38.866081722355915],
[106.7132069666778, 33.18429652688876],
[115.29132982091058, 36.190051824120644]
];
var polyline = new ol.geom.LineString(lineCoord);
polyline.transform('EPSG:4326', 'EPSG:3857');
const routeFeature = new ol.Feature({
type: 'route',
geometry: polyline,
});
const startMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(polyline.getFirstCoordinate()),
});
const endMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(polyline.getLastCoordinate()),
});
const position = startMarker.getGeometry().clone();
const geoMarker = new ol.Feature({
type: 'geoMarker',
geometry: position,
});
const styles = {
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6,
color: [237, 212, 0, 0.8],
}),
}),
'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: '../openlayer/summary/node_blue.gif',
}),
}),
'geoMarker': new ol.style.Style({
image: new ol.style.RegularShape({
radius: 14,
points: 3,
fill: new ol.style.Fill({
color: '#00f'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
}),
// image: new ol.style.Icon({
// anchor: [0.5, 1],
// src: '../openlayer/summary/node_blue.gif',
// }),
stroke: new ol.style.Stroke({
color: [0, 0, 255],
width: 2
}),
fill: new ol.style.Fill({
color: [0, 0, 255, 0.3]
})
}),
};
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature, geoMarker, startMarker, endMarker],
}),
style: (feature) => {
return styles[feature.get('type')];
},
})
map.addLayer(vectorLayer);
// 核心代码
var anim, controler;
function animateFeature() {
if (routeFeature) {
anim = new ol.featureAnimation.Path({
path: routeFeature,
rotate: true,
easing: ol.easing.linear,
speed: 500,
// revers: true
});
anim.on('animationstart', (e) => {
console.log('start')
})
/**
anim.on('animating', (e) => {
map.getView().setCenter(e.geom.getCoordinates())
map.getView().setRotation(e.rotation || 0)
})
**/
anim.on('animationend', (e) => {
console.log('end')
})
controler = vectorLayer.animateFeature(geoMarker, anim);
}
}
animateFeature()
</script>
</html>