美文网首页GIS文章集开源
Openlayers样式图标角度计算问题

Openlayers样式图标角度计算问题

作者: 拜拜都不行啊 | 来源:发表于2019-11-05 23:42 被阅读0次

1.问题背景:
一般在写轨迹回放的时候,车辆行进方向会有一个朝向的问题,这个需要实时计算,不断修正车子前进方向。
2.openlayers图片样式(ol.style.Icon),角度是按照顺时针旋转的。


文档说明,角度是按照顺时针旋转的

3.加载小车图标测试
(1)初始小车图标朝向


小车图标初始朝向是朝东的
(2)把小车加载到地图中
下车加载到地图中,他的图标方向和图标本身方向是一致的
(3)改变小车朝向,让他顺着行进路线。(如何计算?)
3.1)先把以小车起点为原点建立一个坐标系,求出终点和起点的差值。
建立坐标系,并根据不同象限,列出差值的大于还是小于0
3.2)以第二象限为例,求出当前线段的角度。 计算角度
3.3)由此可以推论出,其余四个象限,角度计算方法,注意因为计算时用的是反正切函数所以弧度值为-Math.PI/2到Math.PI/2,所以在第三四象限时需要注意。
4.角度计算方法
function setAngle(first, second) {
            let y = second[1] - first[1];
            let x = second[0] - first[0];
            let radAngle = Math.atan(y / x);
            if (y <= 0 && x >= 0) {//第二象限
                console.log('第二象限');
                radAngle = -radAngle;
            } else if (x >= 0 && y >= 0) {//第一象限
                radAngle = -radAngle;
                console.log('第一象限');
            } else if (x <= 0 && y >= 0) {//第四象限
                radAngle = Math.PI - radAngle;
                console.log('第四象限');
            } else if (x <= 0 && y <= 0) {//第三象限
                radAngle = Math.PI - radAngle;
                console.log('第三象限');
            }
            return radAngle;
        }

相关文章

  • Openlayers样式图标角度计算问题

    1.问题背景:一般在写轨迹回放的时候,车辆行进方向会有一个朝向的问题,这个需要实时计算,不断修正车子前进方向。2....

  • openlayers5中用iconfont作为图标

    概述 前面有文章openlayers4中用font设置图标样式就iconfont在ol5中的使用做了一个尝试,后面...

  • 如何系统学习功能图标?

    一、图标定义 1.1 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图...

  • 如何区分图标设计风格

    一、图标定义 1.1 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图...

  • OpenLayers.Filter.Comparison配置图层

    一、图层样式配置规则 规则配置使用到 OpenLayers 中的比较过滤器 OpenLayers.Filter.C...

  • 图标常用小tips

    一、图标样式分类 将图标按照样式进行分类,可以分为线框图标、填色图标、多色图标。 二、图标文件格式分类 图标的文件...

  • 字体图标

    下载地址 图标下载 图标怎么使用 图标样式对照

  • 字体图标和文字垂直居中

    字体图标使用iconfont字体图标库 1. stylus样式 2. html样式

  • Openlayers 设置图标偏移

    当点图标在地图上显示时,会默认图标显示在点的当前坐标上,如果是圆形的图标,图标的正中心就是坐标点,但是可能会存在不...

  • openlayers4中用font设置图标样式

    概述 font其实是个好东西,不论是写css还是。。。,这不,牛老师想把它用在openlayers4中,用以很方便...

网友评论

    本文标题:Openlayers样式图标角度计算问题

    本文链接:https://www.haomeiwen.com/subject/odhybctx.html