openlayers路线图

#openlayers 线图

dows() {
      var layer = new VectorLayer({
        zIndex: 10
      });
      var source = new VectorSource();
      layer.setSource(source);
      this.icingMap.addLayer(layer);
      var feature;
      let arr = [
        [118.507906, 31.689362],
        [118.707906, 31.689362]
      ];
      feature = new Feature({
        geometry: new LineString(arr)
      });
      source.addFeature(feature);
      var stylesFunction = () => {
         let resolution = this.map.getView().getResolution(); //分辨率:一个像素代表的距离
      let styles = [];
      // 线条样式
      let backgroundLineStyle = new Style({
        stroke: new Stroke({
          color: "green",
          width: 10,
        }),
      });
      styles.push(backgroundLineStyle);
      let geometry = feature.getGeometry();
      // 获取线段长度
      const length = geometry.getLength();
      // 箭头间隔距离（像素）
      const step = 30;
      // 将间隔像素距离转换成地图的真实距离
      const StepLength = step * resolution;
      // 得到一共需要绘制多少个 箭头
      const arrowNum = Math.floor(length / StepLength);
      const rotations = [];
      const distances = [0];
      geometry.forEachSegment(function(start, end) {
        let dx = end[0] - start[0];
        let dy = end[1] - start[1];
        let rotation = Math.atan2(dy, dx);
        distances.unshift(Math.sqrt(dx ** 2 + dy ** 2) + distances[0]);
        rotations.push(rotation);
      });
      // 利用之前计算得到的线段矢量信息，生成对应的点样式塞入默认样式中
      // 从而绘制内部箭头
      for (let i = 1; i < arrowNum; ++i) {
        const arrowCoord = geometry.getCoordinateAt(i / arrowNum);
        const d = i * StepLength;
        const grid = distances.findIndex((x) => x <= d);

        styles.push(
          new Style({
            geometry: new Point(arrowCoord),
            image: new Icon({
              src: "image/x10.png",
              opacity: 1,
              anchor: [0.75, 0.5],
              rotateWithView: false,
              // 读取 rotations 中计算存放的方向信息
              rotation: -rotations[distances.length - grid - 1],
              scale: 0.1,
            }),
          })
        );
      }
      return styles;
      };
      feature.setStyle(stylesFunction);
    },