openlayers7.0 生成带路况路线 vue版

需要利用 高德web服务api提供的接口。

// 路线生成
setRoute(origin,destination){
   // 请求数据，这是我的axios封装  主页其他文章有封装
    this.https.get('/direction/driving',{
        key:'高德web服务的key',
        origin:高德路径规划api,
        destination:高德路径规划api,
        show_fields:'tmcs',  // 重点一定要设置 ‘tmcs’ ，其他可根据需求进行改变，本文章根据tmcs类型返回的数据进行开发
    }).then(res=>{
        // 路线层级基础为10;
        // 特殊路段(拥堵，未知，缓行等)层级为11;
        // 路线的箭头层级为12
        var _this = this;
        // 整条路线（正常路线数组） 层级为10
        var arr = []; 
        // 保存特殊路段Feature数组 层级为11
        var arr2 = [];
        // 根据接口选择路线
        var steps = res.route.paths[0].steps;
        // 处理数组  需要geoJson 形式
        steps.forEach(item =>{
        item.tmcs.forEach(items =>{
            let datas = items.tmc_polyline.split(';');
            for(let i = 0;i<datas.length;i++){
            let a = new Array(2)
            a[0] = Number(datas[i].split(',')[0])
            a[1] = Number(datas[i].split(',')[1])
            arr.push(a);
            }
            // 判断有无特殊路段
            if(items.tmc_status != '畅通'){
            // 特殊路段新增feature样式 层级为11
            arr2.push(_this.getRouterTraffic(datas,items.tmc_status));
            }
        })
        })
        // 正常路线创建
        const routeFeature = new Feature({
        type: 'route',
        geometry: new LineString(arr),
        });
        var styles = () => {
            let resolution = this.map.getView().getResolution();
            var geometry = routeFeature.getGeometry();
            var length = geometry.getLength(); //获取线段长度
            var radio = (50 * resolution) / length;
            var dradio = 1000000; //投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
            var styles = [
                new Style({
                    stroke: new Stroke({
                        width: 6,
                        color: '#1CAC2E'
                    }),
                    zIndex: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 sIcon({
                                    src: require("../../assets/images/common/arrow-right.png"), //16*16大小  图片可自行更改，只能选择右箭头
                                    anchor: [0.5, 0.5],
                                    scale:0.1875,
                                    rotateWithView: true,
                                    rotation:-rotation
                                }),
                                zIndex:12
                            }));
                        }
                    }
                });
            }
            return styles;
        }
        routeFeature.setStyle(styles);
        // 添加路线到图层,且合并特殊路线
        const vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [routeFeature].concat(arr2),
        }),
        type:'routeLayers'
        });
        // 图层添加到地图
        this.map.addLayer(vectorLayer);
    })
},
getRouterTraffic(datas,type){
        var arr = [];
        datas.forEach(item => {
          let a = new Array(2)
          a[0] = Number(item.split(',')[0])
          a[1] = Number(item.split(',')[1])
          arr.push(a);
        });
        var feature = new Feature({
          type: 'route',
          geometry: new LineString(arr),
        });
        var color = [
          {
            value:'未知',
            color:'#409EFF'
          },
          {
            value:'缓行',
            color:'#F26610'
          },
          {
            value:'拥堵',
            color:'#EA143E'
          },
          {
            value:'严重拥堵',
            color:'#7F2926'
          }

        ]
        var styles = () => {
          var styles = [
              new Style({
                  stroke: new Stroke({
                      width: 6,
                      color: (color.find(item=>type == item.value)).color,
                  }),
                  zIndex:11
              })
          ];
          return styles
        }
        feature.setStyle(styles);
        return feature
      },

大部分文章是只展示路线、路线+方向箭头，根据网上文章作参考，整理优化一套模拟高德生成实况路线。

网上这种带路况的文章太少了，如果能帮助到你，请让更多人看到。

代码可以直接用，欢迎留言，转载请注明。