需要利用 高德web服務(wù)api提供的接口。

image.png

// 路線生成
setRoute(origin,destination){
   // 請(qǐng)求數(shù)據(jù)，這是我的axios封裝  主頁其他文章有封裝
    this.https.get('/direction/driving',{
        key:'高德web服務(wù)的key',
        origin:高德路徑規(guī)劃api,
        destination:高德路徑規(guī)劃api,
        show_fields:'tmcs',  // 重點(diǎn)一定要設(shè)置 ‘tmcs’ ，其他可根據(jù)需求進(jìn)行改變，本文章根據(jù)tmcs類型返回的數(shù)據(jù)進(jìn)行開發(fā)
    }).then(res=>{
        // 路線層級(jí)基礎(chǔ)為10;
        // 特殊路段(擁堵，未知，緩行等)層級(jí)為11;
        // 路線的箭頭層級(jí)為12
        var _this = this;
        // 整條路線（正常路線數(shù)組） 層級(jí)為10
        var arr = []; 
        // 保存特殊路段Feature數(shù)組 層級(jí)為11
        var arr2 = [];
        // 根據(jù)接口選擇路線
        var steps = res.route.paths[0].steps;
        // 處理數(shù)組  需要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樣式 層級(jí)為11
            arr2.push(_this.getRouterTraffic(datas,items.tmc_status));
            }
        })
        })
        // 正常路線創(chuàng)建
        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; //投影坐標(biāo)系，如3857等，在EPSG:4326下可以設(shè)置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:'嚴(yán)重?fù)矶?,
            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
      },

大部分文章是只展示路線、路線+方向箭頭，根據(jù)網(wǎng)上文章作參考，整理優(yōu)化一套模擬高德生成實(shí)況路線。

網(wǎng)上這種帶路況的文章太少了，如果能幫助到你，請(qǐng)讓更多人看到。

代碼可以直接用，歡迎留言，轉(zhuǎn)載請(qǐng)注明。