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

更新時間：2022年05月28日 09:53:12 作者：追風少兒狼

這篇文章主要介紹了openlayers?模仿高德箭頭導航路線圖的示例代碼，主要包括原始數(shù)據(jù)、起點/終點尋找、起點和終點樣式函數(shù)，結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

效果展示

原始數(shù)據(jù)

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);

起點和終點樣式函數(shù)

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,
    }),
  });
}

起點和終點layer創(chuàng)建函數(shù)

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

路線feature創(chuàng)建

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

路線樣式函數(shù)

function styleFunction(featrue, resolution) {
  var geometry = featrue.getGeometry();
  var length = geometry.getLength(); //獲取線段長度
  var radio = (100 * resolution) / length;
  var dradio = 10000;  //投影坐標系，如EPSG3857設(shè)置dradio=1，在EPSG:4326下可以設(shè)置dradio=10000，其他坐標系可以調(diào)整
  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, //旋轉(zhuǎn)角度可能跟圖標角度有關(guān)，自行調(diào)整
              }),
            })
          );
        }
      }
    });
  }
  return styles;
}

初始化地圖生成線路圖

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

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

到此這篇關(guān)于openlayers 模仿高德箭頭導航路線圖的代碼詳解的文章就介紹到這了,更多相關(guān)openlayers 高德導航路線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: