OpenLayer——模拟运动轨迹

 模拟在人地图上移动，动态绘制行动轨迹的功能，附带一个跟随的气泡弹窗。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script>
    <script type="text/javascript" src="jquery.js" charset="utf-8"></script>
    <script type="text/javascript" src="layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<button id="btn" type="button">click</button>
<script>


    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [12950000, 4860000],
            zoom: 7
        })
    });

    /**
     * 维护航迹点样式
     **/
    function getPointStyles(rotation) {
        return new ol.style.Style({
            image: new ol.style.Icon({
                rotation: rotation || 0,
                opacity: 1,
                size: [48, 48],
                src: "img/lbxx-32x32.png" //图片路径
            }),
            text: new ol.style.Text({
                text: 'aaaa',
                font: "normal 14px Helvetica",
                textAlign: "center",
                offsetY: -30,
                fill: new ol.style.Fill({color: '#F0F'}),
                backgroundFill: new ol.style.Fill({color: "#000"}),
                backgroundStroke: new ol.style.Stroke({color: "#000", width: 6}),
                padding: [2, 4, 2, 4]
            })
        });
    }

    /**
     *  维护航线样式
     **/
    function getLineStyle() {
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 4
            })
        });
    }

    /**
     * 内部维护一个数组，包含航线的所有点
     */
    function LineArray(p) {
        //航线点
        let arr = [p];
        //增加一个点时候的事件（调整icon的旋转角，刷新地图等等）
        let onPush;
        return {
            push: function (point) {
                //增加一个轨迹点，并且触发事件
                var last = arr[arr.length - 1];
                if (point[0] === last[0] && point[1] === last[1]) {
                    console.log('节点未发生变化：' + last + ' -> ' + point);
                } else {
                    arr.push(point);
                    onPush(last, point);
                }
            },
            addPushListener: function (fun) {
                onPush = fun;
            },
            getArray: function () {
                return arr;
            }
        }
    }

    /**
     * 旋转角计算
     */
    function getRotation(aLon, aLat, bLon, bLat) {
        var kRadius = 6378137;
        var bx = (bLon * Math.PI / 180 - aLon * Math.PI / 180) * (kRadius * Math.cos(aLat * Math.PI / 180));
        var by = (bLat * Math.PI / 180 - aLat * Math.PI / 180) * kRadius;
        var angle = 0;
        angle = Math.atan2(bx, by) * 180.0 / Math.PI;
        return 3.14 / 180 * angle;
    }

    /**
     * 内部维护地图相关的操作
     */
    function AirlineBlock(p) {
        let line = new LineArray(p);

        //图层容器
        let layerVector = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        map.addLayer(layerVector);

        //航线
        let lineFeature = new ol.Feature({
            geometry: new ol.geom.LineString([p, p])
        });
        lineFeature.setStyle(getLineStyle());
        layerVector.getSource().addFeature(lineFeature);

        //飞机图标
        let pointFeature = new ol.Feature({
            geometry: new ol.geom.Point(p)
        });
        pointFeature.setStyle(getPointStyles());
        layerVector.getSource().addFeature(pointFeature);

        //添加1个点的事件侦听
        line.addPushListener(function (prePoint, point) {
            //点的位置变化和旋转角的调整
            var rotation = getRotation(prePoint[0], prePoint[1], point[0], point[1]);
            pointFeature.setGeometry(new ol.geom.Point(point));
            pointFeature.setStyle(getPointStyles(rotation));

            console.log(line.getArray());
            //航线的变化
            lineFeature.setGeometry(new ol.geom.LineString(line.getArray()));
        });
        return {
            push: line.push,
            destroy: function () {
                map.removeLayer(layerVector)
            }
        }
    }

    var airLineBlock = new AirlineBlock([12950000, 4860000]);

    var testArr = [
        [12950000, 4190000], [12950000, 4460000], [12850000, 4960000]
        , [12850000, 4170000], [12850000, 4280000], [12850000, 4290000]
        , [12850000, 4360000], [12850000, 4360000], [12850000, 4900000]];

    /**
     * 设置一个点击事件，每次从testArr中随机取数，作为下次的轨迹点
     */
    $('#btn').click(function () {
        var time = new Date().getTime();
        var i = time % testArr.length - 1;
        var point = new Array(2);
        point[0] = testArr[i][0] + time % 100000;
        point[1] = testArr[i][1] + time % 10000;
        airLineBlock.push(point);
    })

    console.log(ol.proj.fromLonLat([12950000, 4190000], 'EPSG:4326'))

</script>
</body>
</html>

 

posted on 2022-11-30 08:45  疯狂的妞妞  阅读(521)  评论(0)  编辑  收藏  举报

导航