openlayers 模仿高德箭头导航路线图的代码详解

目录

• 效果展示
• 原始数据
• 起点/终点寻找
• 起点和终点样式函数
• 起点和终点layer创建函数
• 路线feature创建
• 路线样式函数
• 初始化地图生成线路图

效果展示

原始数据

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

起点和终点layer创建函数

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

路线feature创建

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

到此这篇关于openlayers 模仿高德箭头导航路线图的代码详解的文章就介绍到这了,更多相关openlayers 高德导航路线图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！