OpenLayers3, 航线动画实现

gis分享者

于 2024-08-31 17:04:06 发布

阅读量484

点赞数 26

分类专栏： gis工程师基础文章标签： openlayers 航线

本文链接：https://blog.csdn.net/qq_28419035/article/details/141755142

版权

基础同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

gis工程师

27 篇文章 0 订阅

订阅专栏

文章目录

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

一、前言

本文基于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=" + tdttk
                      wrapX: 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=" + tdttk
                      wrapX: 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>

效果如下：
在这里插入图片描述

三、总结

以上为基于openlayer3 实现航线动画功能的简单案例，希望对您有帮助~

gis分享者

关注

26
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
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> &l
复制链接

扫一扫