openlayers 模仿高德箭頭導航路線圖的程式碼詳解

const routeFeature = {
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: [
      [105.9420397836494, 27.911864399055588, 0.0],
      [105.94204506457491, 27.911868653873896, 0.0],
      [105.94203985374624, 27.911863549317346, 0.0],
      [105.9894250218576, 28.057236450358882, 0.0],
      [106.10215274353018, 28.284607012841803, 0.0],
      [106.07371540920602, 28.280436458801173, 0.0],
      [106.07873615012684, 28.28931130115016, 0.0],
      [106.05978977915458, 28.29067898838156, 0.0],
      [106.01532125560543, 28.29250735826644, 0.0],
      [106.11251696408775, 28.335110012326794, 0.0],
      [106.07311049420407, 28.334906534881487, 0.0],
      [106.02507910445651, 28.336362174118438, 0.0],
      [106.02489694766722, 28.359663055160034, 0.0],
      [106.01964893419249, 28.36218521264283, 0.0],
      [106.02051116393352, 28.363011171722473, 0.0],
      [106.02205644084118, 28.363104546940434, 0.0],
      [106.02162537170554, 28.362978005991447, 0.0],
      [106.06032150948916, 28.372102355412082, 0.0],
      [106.04706634723237, 28.410958515915414, 0.0],
      [106.16865262249493, 28.364800431812483, 0.0],
      [106.15259292905644, 28.30510828317908, 0.0],
    ],
  },
};
export{
   routeFeature
}

    const coordinates = routeFeature.geometry.coordinates;
    let start = coordinates[0].slice(0, 2),
     end = coordinates[coordinates.length - 1].slice(0, 2);

function styleFn(text) {
  return new Style({
    image: new Icon({
      src: mark,
      scale: 1,
    }),
    text: new Text({
      textAlign: "center",
      textBaseline: "middle",
      font: "normal 14px 微軟雅黑",
      text,
      fill: new Fill({ color: "#aa3300" }),
      stroke: new Stroke({ color: "#ffcc33", width: 2 }),
      offsetX: 0,
      scale: 1,
      offsetY: 0,
    }),
  });
}

const Mark = (point, name) => {
  return new VectorLayer({
    style: styleFn(name),
    source: new VectorSource({
      features: [
        new Feature({
          geometryName: "centerMark",
          geometry: new Point(point),
        }),
      ],
    }),
  });
};

var lineFeature = new GeoJSON({
  geometryName: "line",
}).readFeature(routeFeature.geometry);
const polyLineLayer = new VectorLayer({
  source: new VectorSource({
    features: [lineFeature],
  }),
  style: styleFunction,
});

function styleFunction(featrue, resolution) {
  var geometry = featrue.getGeometry();
  var length = geometry.getLength(); //獲取線段長度
  var radio = (100 * resolution) / length;
  var dradio = 10000;  //投影座標系，如EPSG3857設定dradio=1，在EPSG:4326下可以設定dradio=10000，其他座標系可以調整
  var styles = [
    new Style({
      stroke: new Stroke({
        color: "green",
        width: 10,
      }),
    }),
  ];
  for (var i = 0; i <= 1; i += radio) {
    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({
                size: toSize([13, 7]),
                src: arrow,
                anchor: [0.5, 0.5],
                rotateWithView: false,
                rotation: -rotation + (Math.PI * 3) / 2, //旋轉角度可能跟圖示角度有關，自行調整
              }),
            })
          );
        }
      }
    });
  }
  return styles;
}

export default {
  name: "arrowMap",
  data() {
    return {
      map: null,
    };
  },
  mounted() {

    let map = new Map({
      // 設定地圖圖層
      layers: [
        gaodeMapLayer,
        polyLineLayer,
        Mark(start, "起點"),
        Mark(end, "終點"),
      ],
      // 設定顯示地圖的檢視
      view: new View({
        center: start,
        zoom: 10,
        minZoom: 2,
        maxZoom: 18,
        projection: "EPSG:4326",
        rotation: 0,
      }),
      // 讓id為map的div作為地圖的容器
      target: "arrowMap",
    });
  },
};