OpenLayers3, 航线动画实现

本文主要是介绍OpenLayers3, 航线动画实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、前言
二、代码实现
三、总结

一、前言

本文基于OpenLayers3，实现航线动画的功能。

二、代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>航线动画</title><link href="../../libs/ol3/ol.css" rel="stylesheet" type="text/css" /><script src="../../libs/ol/ol.js" type="text/javascript"></script><script src="../../libs/arc.js" type="text/javascript"></script>
</head>
<body><div id="map" style="width: 100%; height: 95%; position: absolute;"></div><script type="text/javascript">var tdttk = '*****' // tdttk 为天地图密钥var map = new ol.Map({layers: [new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + tdttkwrapX: false})}),new ol.layer.Tile({title: "天地图矢量注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + tdttkwrapX: false})})],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})});var style = new ol.style.Style({stroke: new ol.style.Stroke({color: '#EAE911',width: 2})});var flightsSource;var addLater = function (feature, timeout) {window.setTimeout(function () {feature.set('start', new Date().getTime());flightsSource.addFeature(feature);}, timeout);};var pointsPerMs = 0.1;var animateFlights = function (event) {var vectorContext = event.vectorContext;var frameState = event.frameState;vectorContext.setStyle(style);var features = flightsSource.getFeatures();for (var i = 0; i < features.length; i++) {var feature = features[i];if (!feature.get('finished')) {var coords = feature.getGeometry().getCoordinates();var elapsedTime = frameState.time - feature.get('start');var elapsedPoints = elapsedTime * pointsPerMs;if (elapsedPoints >= coords.length) {feature.set('finished', true);}var maxIndex = Math.min(elapsedPoints, coords.length);var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));//根据要素来描绘出线条vectorContext.drawGeometry(currentLine);}}//继续动画效果map.render();};flightsSource = new ol.source.Vector({wrapX: false,attributions: 'Flight data by ' +'<a href="http://openflights.org/data.html">OpenFlights</a>,',loader: function () {var url = 'flights.json';fetch(url).then(function (response) {return response.json();}).then(function (json) {var flightsData = json.flights;for (var i = 0; i < flightsData.length; i++) {var flight = flightsData[i];var from = flight[0];var to = flight[1];//创建一个两个地点之间的弧段var arcGenerator = new arc.GreatCircle({ x: from[1], y: from[0] },{ x: to[1], y: to[0] });var arcLine = arcGenerator.Arc(100, { offset: 10 });if (arcLine.geometries.length === 1) {var line = new ol.geom.LineString(arcLine.geometries[0].coords);line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));var feature = new ol.Feature({geometry: line,finished: false});//添加动画的特性与延迟所有功能并不在同一时间开始addLater(feature, i * 50);}}map.on('postcompose', animateFlights);});}});var flightsLayer = new ol.layer.Vector({source: flightsSource,style: function (feature) {//如果动画仍然是活跃的特性,不渲染图层样式的特性if (feature.get('finished')) {return style;} else {return null;}}});map.addLayer(flightsLayer);</script>
</body>
</html>