openlayers4+中高德导航路径的实现

lzugis

发布于 2021-12-06 10:29:55

8040

发布于 2021-12-06 10:29:55

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

许久未更新了，今天特此更新一篇，以示我还在，我也会一直在。今天的更新比较简单，就是在openlayers4+中实现类似于高德导航路径的样式。

效果

实现思路

用ol.layer.Vector的styleFunction，返回一个styleCollection；
ol.geom.LineString的getCoordinateAt接口实现线上等距的箭头展示；
箭头方向通过rotation参数来控制，其计算公式是const angle = (Math.atan2(point0[0] - point[0], point0[1] - point[1])) - Math.PI / 2

实现代码

function styleFunc(feat) {
  let styles = []
  styles.push(new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#089519',
      width: 6
    }),
    image: new ol.style.Icon({
      src:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADFklEQVRYR8WXS2gTURSG/zPt3BQF8bHx0UwixmZSH1AVVNqFVDeKC134Qhd1JbVuRBFBwQqKIIobFV2pYPHRhS5ENyouxAf4ALFNakWTadWV2lVp7tg5Mm0jSTqZV4vN8t7z/+ebc8+5lxCm+EdTnB8TAvhcG0nYH5Doz38O+yGBALKxafOG+M9BMJaCsBrA7LHEv8B4DcLHGqq+EM8N/vAL5BvgkxbZbIGvApjvYf5dAe2rM/IP/ED4Akhrop2AE34MCzEEtCcNedJL4wnQG1MbhpneeRk57VcRr1icM9+7aV0BvsYxU1riOQNLHEw6mPmxvU5EGwDsLo8hoEsosmlhFgOVIFwB0lH1HBEdchBv1w3ZWbye0cQ2AHfLY5n5fKrPPBwKIKOpTwBqLhYzeFXKMN86GaY1dSWB3pTu8VPdMNeHBBC/AcwsEnfqhtzudqYZTdhVsKtR+A3ohpwVGKAnLnS2kC4WEnNbss+87AbQE1X3M9GlEp2CVDIrM066ij3QFZ8+t8oySy4UZt6b6jOvuwGko2oLEV0rjlGrldiiL0NGIAA7OKOJFwDWFgk7dEPu8TiCm2UT0asbsi7wEdiCtCaOEnCmTDxuAgr7zpNAV3Qj3xoKoDuurlEsejlutBwmwXkCAAa3pAzzRiiAsWOwG1F3MOgk5mf2OhOtK+v8f+EmoX5ZTpY0c0mDup3nCEBUHAPhlFdchf07uiF3umm934IEZgxL8QpAKiBEvhrcmKhwaRW8PAFGq6C2gsh1/sfBEU7rOXncC9oXwGgvRJ4D3OhlaO/bj9CgIpsaXB6hQBWwg7ujYodCuO0HwM+FFRhgpAoxcQ+MLa4QhPt6Tm71AzpWLb+hQKZWLIeCpwDmVFD9hIVmvV9+8OvquwcKht2xSJvCfNEpgUV0oD6XL3mIvEACA9iGPTFxixkl802E28mc3OWVsHw/FMDXOGrylrD/CywYM/wWUWRiYRZD/wVgtAqRjcz8cKSRiDYlc/lHQZMHbsLyBBlNnLXXdEMeCZN8wgBhkxbrQvXAZCQOdRFNZuKC119mavcheswzygAAAABJRU5ErkJggg=='
    })
  }))
  const geometry = feat.get('geometry')
  if(geometry.getType().toLowerCase() === 'linestring') {
    const coords = geometry.getCoordinates()
    const length = geometry.getLength()
    const res = map.getView().getResolution() * 80
    const count = Math.ceil(length / res)
    // 添加间断点
    for(let i = 1;i < count; i++) {
      const frag = i / count
      const point = geometry.getCoordinateAt(frag)
      const point0 = geometry.getCoordinateAt(frag + frag * 0.05)
      const angle = (Math.atan2(point0[0] - point[0], point0[1] - point[1])) - Math.PI / 2
      styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(point),
        image: new ol.style.Icon({
          scale: 0.5,
          rotation: angle,
          snapToPixel: true,
          src:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T63TsQ0CMQyF4f/NgMQQ0CBR0FIx190cFIiWhhFoKdgEiRUeSoF0gO8cjkub+Evs2OLPpc9422dgBRwlNZn/BtjeApdOUJsh0QuuwKYWiYAFcAKWHaSR1EbpfAHlkO0ICdMJgV+QXmAAmUu6v9IZA8wkPVKgtg7TF7H25t4UbN+A9ahGmqqVD8AO2GdzUF45+I3ZJJb9JxbwRhEhB66xAAAAAElFTkSuQmCC'
        })
      }))
    }
    // 添加起始点
    styles.push(new ol.style.Style({
      geometry: new ol.geom.Point(coords[0]),
      image: new ol.style.Circle({
        radius: 12,
        fill: new ol.style.Fill({
          color: '#1677d8'
        })
      }),
      text: new ol.style.Text({
        offsetX: 0,
        offsetY: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: '起',
        font: '12px sans-serif',
        fill: new ol.style.Fill({
          color: 'white'
        })
      })
    }))
    styles.push(new ol.style.Style({
      geometry: new ol.geom.Point(coords[coords.length - 1]),
      image: new ol.style.Circle({
        radius: 12,
        fill: new ol.style.Fill({
          color: '#bb1422'
        })
      }),
      text: new ol.style.Text({
        offsetX: 0,
        offsetY: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: '终',
        font: '12px sans-serif',
        fill: new ol.style.Fill({
          color: 'white'
        })
      })
    }))
  }
  return styles
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-09-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

layer