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

<!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>

OpenLayer——模拟运动轨迹的更多相关文章

  1. 59.Android开源项目及库 (转)

    转载 : https://github.com/Tim9Liu9/TimLiu-Android?hmsr=toutiao.io&utm_medium=toutiao.io&utm_so ...

  2. Android开源项目及库搜集

    TimLiu-Android 自己总结的Android开源项目及库. github排名 https://github.com/trending,github搜索:https://github.com/ ...

  3. 各种Android UI开源框架 开源库

    各种Android UI开源框架 开源库 转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...

  4. Android 开源项目及库汇总（2）

    Android 开源项目及库汇总(2) ListenToCode 2.7 2018.10.10 15:43 字数 8527 阅读 1001评论 0喜欢 29 地图 百度地图– Android百度地图 ...

  5. WPF太阳、地球、月球运动轨迹模拟

    原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  6. 模拟位置 定位 钉钉打卡 运动轨迹 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  7. 使用Xcode + Python进行IOS运动轨迹模拟

    前言 在某些app中,需要根据用户的实时位置来完成某些事件 例如跑步打卡软件(步道乐跑).考勤打卡软件(叮叮).某些基于实时位置的游戏(Pokemon Go.一起来捉妖) 一般解决办法是通过使用安卓模 ...

  8. [深入浅出Windows 10]模拟实现微信的彩蛋动画

    9.7 模拟实现微信的彩蛋动画 大家在玩微信的时候有没有发现节日的时候发一些节日问候语句如“情人节快乐”,这时候会出现很多爱心形状从屏幕上面飘落下来,我们这小节就是要模拟实现这样的一种动画效果.可能微 ...

  9. 使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据，地图实时位置)

    原文:使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据,地图实时位置) 在上一篇中说到了Silverlight下的Socket通信,在最后的时候说到本篇将会结合地图. ...

  10. N体运动的程序模拟

    这依然是与<三体>有关的一篇文章.空间中三个星体在万有引力作用下的运动被称之为三体问题,参见我的上一篇文章:三体运动的程序模拟.而这一节,对三体问题进行了扩展,实现了空间中N个星体在万有引 ...

随机推荐

  1. Android：LitePal 在第一次创建表之后第二次创建新的表不生效

    因为业务需求的增长,后续需要继续创建新的表,有可能代码没有任何报错,同时数据库也没有任何新的表加入进来. 修改 litepal.xml 的 version,如果之前是 1,那么修改为 2,总之比之前 ...

  2. Flutter：StatefulWidget 怎么传参

    定义好一个有状态(或无状态)的组件之后,需要为其传递一些参数,希望组件能够更加灵活使用.那么,在 Flutter 中如何为其传递参数呢? 以下是 StatefulWidget 传递值的步骤,一共三步: ...

  3. 基于Python的OpenGL 05 之坐标系统

    1. 引言 本文基于Python语言,描述OpenGL的坐标系统 前置知识可参考: 基于Python的OpenGL 04 之变换 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者 ...

  4. XMLHttpRequest、Ajax、Fetch与Axios

    1. 引言 XMLHttpRequest.Ajax.Fetch与Axios是网页前后端交互中常见到的名词 参考MDN:Ajax - Web 开发者指南 | MDN (mozilla.org) Ajax ...

  5. ASP.NET Core - 依赖注入(四)

    4. ASP.NET Core默认服务 之前讲了中间件,实际上一个中间件要正常进行工作,通常需要许多的服务配合进行,而中间件中的服务自然也是通过 Ioc 容器进行注册和注入的.前面也讲到,按照约定中间 ...

  6. linux上安装python3(yum方式)

    可联通外网的linux系统终端上安装python3 1,建立yum仓库: https://mirrors.163.com/centos/7.9.2009/os/x86_64/ 2,使用yum下载安装对 ...

  7. python3.9不支持win7

    安装:Anaconda3-2022.10-Windows-x86_64.exe 会报错:Failed to create Anaconda menus 详细信息:Error loading Pytho ...

  8. ubuntu 中将DSLR相机用作网络摄像头

    一.安装所需软件 sudo apt-get install gphoto2 v4l2loopback-utils v4l2loopback-dkms ffmpeg 二.Video4Liunx 配置 1 ...

  9. 信息学奥赛介绍-CSP

    什么是信息学奥赛 信息学奥赛,全称为信息学奥林匹克竞赛,是教育部和中国科协委托中国计算机 学会举办的一项全国青少年计算机程序设计竞赛.主要分为NOIP(全国联赛),夏令营 NOI比赛的扩展赛,也称全国 ...

  10. WPF项目需要不断更新前台图片时，碰到“System.IO.IOException: 文件“xxx”正由另一进程使用“问题的解决

    问题描述 项目中要求能不断拍照并更新显示图片,使用FileStream在本地创建了图片文件: 当下次重新拍照前删除之前拍过的图片时,提示"System.IO.IOException: 文件& ...