openlayers-方向标注

openlayers-方向标注

需求

给LineString 标注方向

效果图

设计思路

设计一个方向箭头图标

计算线段方向（LineString 可以放很多坐标而线段方向是两点之间）

（0，1）（1，2）（2，3）…方式计算每一段的方向角度

方向点安放坐标

let array_coor = lineStringForl.getCoordinateAt(i * 1.0 / res);

1

主要函数

单一线段计算角度

function calcD(start, end) {

    let dx = end[0] - start[0];

    let dy = end[1] - start[1];

    let rotation = Math.atan2(dy, dx);

    console.log("角度" + rotation);

    return rotation;

  }

1

2

3

4

5

6

7

从坐标组中计算线段以及每一段的方向角

// 计算线段角度

function calcLineStringD(coordis) {

  let n = coordis.length;

  let vs = [];

  for (let i = 0; i < n; i++) {

    if (i + 1 < n) {

      vs.push({

        "line": [coordis[i], coordis[i + 1]],

        "d": calcD(coordis[i], coordis[i + 1])

      })

    }

  }

  return vs;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

设置样式

new ol.style.Style({

  geometry: new ol.geom.Point(array_coor),

  image: new ol.style.Icon({

    src: 'http://localhost:9999/titles/fx.png',

    anchor: [0.75, 0.5],

    rotateWithView: true,

    rotation: -rat

  })

})

1

2

3

4

5

6

7

8

9

完整demo

 

 

 

 

 

 

        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

 

 

————————————————

版权声明：本文为CSDN博主「staHuri」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/stahuri/article/details/88867365