openlayer路径规划线路箭头添加

1.将箭头函数封装成arrowStyle,feature添加,arrowStyle函数会自动获取要素和长度

2.arrowStyle中的函数

//路径箭头
    arrowStyle(feature, resolution) {
      // console.log(resolution);
      let geometry = feature.getGeometry();//几何对象:空间坐标信息等
      var length = geometry.getLength(); //获取线段长度
      var radio = (250 * resolution) / length;//间隔分之一 分割了多少段
      var dradio = 20000; //投影坐标系,如EPSG3857设置dradio=1,在EPSG:4326下可以设置dradio=10000,其他坐标系可以调整

      var styles = [
        new Style({
          // 线串的样式
          stroke: new Stroke({
            color: '#007aff', //颜色
            width: 7, //线条粗细
          }),
        }),
      ];

      for (var i = 0; i <= 1; i += radio) {
        console.log(i)
        var arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end) {
          if (start[0] == end[0] || start[1] == end[1]) return;
          var dx1 = end[0] - arrowLocation[0];
          var dy1 = end[1] - arrowLocation[1];
          var dx2 = arrowLocation[0] - start[0];
          var dy2 = arrowLocation[1] - start[1];
          if (dx1 != dx2 && dy1 != dy2) {
            if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
              var dx = end[0] - start[0];
              var dy = end[1] - start[1];
              var rotation = Math.atan2(dy, dx);//算出旋转角度
              styles.push(
                new Style({
                  geometry: new Point(arrowLocation),
                  image: new Icon({
                    scale: 0.025,
                    src: require('../../assets/images/arrow-icon.png'),
                    anchor: [0.5, 0.5],
                    rotation: -rotation,//可根据图标自行更改
                  }),
                  zIndex: 999,
                })
              );
              styles.push(
                new Style({
                  stroke: new Stroke({
                    color: '#127c58',
                    width: 8,
                    lineCap: 'square',
                  }),
                  zIndex: 999,
                })
              );
              styles.push(
                new Style({
                  stroke: new Stroke({
                    color: '#01c76f',
                    width: 6,
                  }),
                  zIndex: 999,
                })
              );
            }
          }

          // }
        });
      }
         return styles;
    },

注:这种方式存在性能问题,会造成页面卡顿,解决方案正在调研中....后期更新

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值