GIS應用|快速開發在線路徑導航應用

導航應用可用於路徑規划及仿真，並且常作為一個重要模塊融入到各類企業管理業務中，如面向物流管理、商品配送、車輛監控等場景，那么如何開發一個簡單的在線路徑導航應用呢？SuperMap Online為您解答~

 

在線路徑導航應用

1、申請密鑰選取服務，添加底圖並設置參數

　　SuperMap Online提供了多種雲分析API，包括正/逆地理編碼、路徑導航、坐標轉換和本地搜索等。開發者可以通過HTTPS形式發起檢索請求，獲取返回JSON或XML格式的檢索數據，可以基於此開發JavaScript、C#、C++、Java等語言的地圖應用，調用前需要在“我的密鑰”申請Key。

 

我的密鑰申請頁面

制作路徑導航應用需要調用本地搜索API實現起始點和終點的搜索及選取，同時結合路徑導航API提供的多種導航分析模式，如距離最短、不走高速和推薦模式等實現不同的路線規划。使用服務前需要先設置底圖，坐標系等信息。本示例調用了高德地圖作為底圖。

//添加底圖設置參數示例代碼
<script type="text/javascript">
  var map, startPointFeature, endPointFeature, startPointSource, endPointSource, startPointLayer, endPointLayer, startPoint, endPoint, vectorSource
    localSearchApi = "https://www.supermapol.com/iserver/services/localsearch/rest/searchdatas/China/poiinfos.rjson",
       navigationApi = "https://www.supermapol.com/iserver/services/navigation/rest/navigationanalyst/China/pathanalystresults.rjson",
       container = document.getElementById('popup'),
       content = document.getElementById('popup-content'),
       overlay = new ol.Overlay(({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            },
             offset: [0, -50]
        })),
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: {
                     collapsed: false
                 },
                 zoom: true
             }),
             view: new ol.View({
                 center: [116.35, 39.89],
                 zoom: 10,
                 projection: "EPSG:4326",
                 multiWorld: true
              }),

              layers: [new ol.layer.Tile({
                  source: new ol.source.XYZ({
                      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                  })
              })]
          });

2、調用本地搜索API，實現起始點添加

通過調用本地搜索API，可以實現起始點、終點的搜索以及添加。本地搜索API可以根據用戶輸入的POI關鍵詞在指定范圍“city”內查找與之匹配的地理興趣點，並將其結果有序返回。搜索結果也可以通過代碼進行設置，支持設定搜索范圍、返回結果數量等信息。

 

確認起始點並添加

//本地搜索服務調用示例代碼
 function localSearch(method) {
     var keywords, city = null;
     if (method == 'start') {
         keywords = $('#startpoint').val()
         city = $('#startcity option:selected').text()
     } else {
          keywords = $('#endpoint').val()
          city = $('#endcity option:selected').text()
     }
       if (!keywords) {
           alert('請輸入搜索內容');
           return;
      }
      $.ajax({
           type: 'get',
           url: localSearchApi,
           data: {
               'keywords': keywords,
               'city': city,
               'pageSize': 10,
               'pageNum': 1,
               'key': 'fvV2osxwuZWlY0wJb8FEb2i5'
           },
           dataType: 'json',
           async: true,
           success: function(result) {
               showSearchResult(method, result.poiInfos);
           },
           error: function(data) {
                alert('搜索失敗，請稍后再試');
           }
        });
     }

3、結合路徑導航API，打造路徑導航應用

 確定好起始點、終點后，即可開始進行路徑導航。路徑導航API可根據分析所需的起點、經過點、終點生成一條導航路徑。支持距離最短、不走高速、推薦模式三種導航模式。

 

路徑導航模式切換

　　

//路徑導航服務調用示例代碼
function navigationAnalyst(routeType) {
    if (!startPoint) {
         alert('請確定起點')
         return false;
      } else if (!endPoint) {
          alert('請確定終點')
          return false;
      }
       overlay.setPosition(undefined);
       map.removeOverlay(overlay);
        if (vectorSource) {
            vectorSource.clear()
       }
       var data = [{
           "startPoint": {
                "x": startPoint[0],
                 "y": startPoint[1]
           },
           "endPoint": {
              "x": endPoint[0],
              "y": endPoint[1]
           },
             "routeType": routeType
       }]
       $.ajax({
           type: 'get',
           url: navigationApi,
           data: {
                pathAnalystParameters: JSON.stringify(data),
                key: 'fvV2osxwuZWlY0wJb8FEb2i5'
            },
            dataType: 'json',
            async: true,
            success: function(result) {
               var points = []
               result[0].pathPoints.forEach(element => {
                   var point = [element.x, element.y]
                   points.push(point)
              });
              roadLine = new ol.geom.LineString(points);
              vectorSource = new ol.source.Vector({
                   features: [new ol.Feature(roadLine)]
              });
             var vectorLayer = new ol.layer.Vector({
                  source: vectorSource,
                  style: new ol.style.Style({
                     stroke: new ol.style.Stroke({
                        color: 'blue',
                         width: 5
                      }),
                      fill: new ol.style.Fill({
                           color: 'rgba(0, 0, 255, 0.1)'
                       })
                    })
              });
              map.addLayer(vectorLayer);
              let x = (startPoint[0] - endPoint[0]) / 10;
              let y = (startPoint[1] - endPoint[1]) / 10;
              let displayRange = ol.extent.boundingExtent([
                   [parseFloat(startPoint[0]) + x, parseFloat(startPoint[1]) + y],
                   [parseFloat(endPoint[0]) - x, parseFloat(endPoint[1]) - y]
               ]);
               map.getView().fit(displayRange, map.getSize());
               var length = result[0].pathLength / 1000;
               content.innerHTML = "全程" + length.toFixed(1) + "公里";
               overlay.setPosition([endPoint[0], endPoint[1]]);
               map.addOverlay(overlay);
           },
           error: function(data) {
              alert('導航失敗，請稍后再試');
                }
            });
        }

　　

一個簡單的在線路徑導航應用就制作完成啦，通過設置參數，還可以獲得當前道路長度，下一道路轉彎方向和導航所需時間等導航引導信息。

示例代碼百度雲鏈接：https://pan.baidu.com/s/1nrZcHgzAxUBgZCQhAjUXvw 

提取碼：3orq