使用高德地圖Web服務-路線規劃

高德地圖路徑規劃服務

http://lbs.amap.com/api/webservice/guide/api/direction
提供兩個點之間的路線：步行、公交、駕車 使用 申請高德地圖Web服務的Key 按申請的參數拼接URL 使用JS的AJAX非同步請求HTTP服務

擷取參數使用

例子

JS架構：jQuery（操作DOM，非同步發送請求）
ArcGIS API for javascript：展示路徑規劃的結果
底圖：天地圖（座標系4326）
項目為Hbuild工程檔案
此例子為小生項目例子，還未進行封裝與改善
下載地址 若沒有積分請在評論處留郵箱（上傳完積分就不準改了。看到第一時間發） 目錄介紹

主要代碼 HTML頁面

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>高德地圖路線規劃</title>        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/esri/css/esri.css" />        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css"/>        <script type="text/javascript">            var dojoConfig = {                parseOnLoad: true,                packages: [{ //解釋：require(["js/.."],function(){}) 中  js/ 即為 location的值                    name: "js", //對應require引用包裡的js                     location: location.pathname.replace(/\/[^/]*$/, '') + '/js' //對應的路徑                }]            };        </script>        <script type="text/javascript" src="https://js.arcgis.com/3.21/init.js"></script>        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">    </head>    <body>        <div id="map" style="width:900px; height:580px; border:1px solid #000;"></div><script>var map;var selectedSpotsBuffer_spotsMap = { //類比項目資料    "1" : {        geometry : {            x : 118.13214548600001,            y : 24.424820321000027        },        attributes :  {            id : 1,            name :"白石炮台遺址",            recommendtime:120,            total:76.16926103,            x:118.13214548600001,            y:24.424820321000027        }    },    "6" : {        geometry : {            x : 118.11964657700003,            y : 24.434867303000033        },        attributes :  {            id : 6,            name :"啟明寺",            recommendtime:90,            total:88.32278481,            x:118.11964657700003,            y:24.434867303000033        }    }};$(document).ready(function(){    $.getScript("js/tools/symbol.js",function () { //引入符號系統        initSymbol();    });    require(["esri/map", "js/tools/TDTLayer","js/tools/TDTAnnoLayer","esri/layers/GraphicsLayer"],     function (Map, TDTLayer,TDTAnnoLayer,GraphicsLayer) {        map = new Map("map", { //初始化底圖            center: [118.15, 24.55],            zoom: 11,            logo : false //logo        });        var baselayer = new TDTLayer(); //載入天地圖圖層        map.addLayer(baselayer);        var annolayer = new TDTAnnoLayer();//載入天地圖圖層        map.addLayer(annolayer);        var direction = new GraphicsLayer({ //建立路線規劃的圖層 用來顯示路線規劃結果            id : "direction"        });        map.addLayer(direction);        $.getScript("js/tools/coordinateUtils.js",function(){ //載入座標轉換工具            $.getScript("js/tools/amap-direction.js",function(){ //載入高德地圖路徑規劃                //兩種調用方法//              walking("direction","白石炮台遺址->啟明寺",selectedSpotsBuffer_spotsMap["1"]["geometry"],selectedSpotsBuffer_spotsMap["6"]["geometry"]);                transit("direction","白石炮台遺址->啟明寺",{"origin" : selectedSpotsBuffer_spotsMap["1"]["geometry"],                    "destination" : selectedSpotsBuffer_spotsMap["6"]["geometry"],                    "city" : "廈門"                });            });        });    });});</script>    </body></html>

高德地圖服務amap-direction.js

/** * @function 高德地圖路徑導航服務 * @description 依賴於coordinateUtils.js包 */var AMAP_SERVICE_KEY = "4fac3db************7db1c7"; //key 請自己申請/** * @function 步行 * @parma layerName 載入的圖層名 * @parma _routeName 路線名稱 * @param originGeometry,destinationGeometry起始點geometry */var steps;var routeName;var layerName;function walking(_layerName,_routeName,originGeometry,destinationGeometry) {    layerName = _layerName;    routeName = _routeName;    var origin = wgs84togcj02(originGeometry.x,originGeometry.y); //座標系轉換    var destination = wgs84togcj02(destinationGeometry.x,destinationGeometry.y);    var serviceUrl =    "http://restapi.amap.com/v3/direction/walking?output=JSON&origin="+origin+"&destination="+destination+"&key="+AMAP_SERVICE_KEY;    $.ajax({ //高德地圖HTTP服務        type:"get",        url:serviceUrl,        async:true,        success : function(result){ //成功返回結果            result = eval(result); //解析JSON格式的字串            steps = result.route.paths[0].steps; //取出步行數組            handleResult_walking(steps); //處理步行數組        }    });}/** * @function 處理steps 步行數組 * @param {Object} result */function handleResult_walking(steps) {    //因服務中所給路線的經緯度為字串，所以我們將其轉換成數組，並覆蓋    $.each(steps, function(index,value) {        //把字串變成 座標數組，然後轉換        var latAndLons = value.polyline.split(";");        var points = [];        $.each(latAndLons,function(index,value){            var point = value.split(","); //一個點的經緯度 [x,y]            $.each(point, function(index,value) {//[x,y]字串轉為float                point[index] -= 0;            });            point = gcj02towgs84(point[0],point[1]);//轉換座標            points.push(point);//放入集合            console.log(points);        });        value.polyline = points; //覆蓋原來的字串        console.log(value.polyline);    });    drawRoute_walking(routeName,steps); //畫出解決方案}function drawRoute_walking(routeName,steps){    $.each(steps,function(index,value){        var lineName = routeName + " 第"+(index+1)+"步"; //步數名稱        console.log(lineName);console.log(value);        drawLine_walking(lineName,value); //畫線    });}function drawLine_walking(lineName,lineMap) {    require([        "esri/geometry/Polyline",        "esri/graphic",        "esri/InfoTemplate",        "esri/layers/GraphicsLayer"    ], function(Polyline,Graphic,InfoTemplate,GraphicsLayer) {        var polylineJson = { //線對象參數JSON格式            "paths":[                lineMap.polyline            ],            "spatialReference":{                "wkid":4326            }        };        var polyline = new Polyline(polylineJson); //建立線對象        console.log(polyline);        var attr = { //該地理實體的屬性            name : lineName,            action : lineMap.action,            distance : lineMap.distance,            instruction : lineMap.instruction,            road :lineMap.road        };        //地理實體的資訊視窗        var infoTemplate = new InfoTemplate("${name}", "方向：${action}<br/>介紹：${instruction}<br/>距離：${distance}米<br/>路名：${road}");         //建立用戶端圖形        var graphic = new Graphic(polyline,symbolMap["line_default"],attr,infoTemplate);        //載入到地圖上        map.getLayer(layerName).add(graphic);    });}/** * @function 公交 * @parma layerName 載入的圖層名 * @param routeName 線路名稱 * @param paramsMap參數資訊        origin lon,lat（經度,緯度），如117.500244, 40.417801 經緯度小數點不超過6位  必須         destination on,lat（經度,緯度），如117.500244, 40.417801 經緯度小數點不超過6位  必須        city 城市名 支援市內公交轉乘/跨城公交的起點城市，規則：城市名稱/citycode 必須        strategy 0：最快捷模式;1：最經濟模式;2：最少轉乘模式;3：最少步行模式;5：不乘地鐵模式        nightflag 是否計算夜班車,1:是；0：否        date 根據出發日期篩選，格式：date=2014-3-19        time 根據出發時間篩選，格式：time=22:34 */var transitRoute; //{} 有origin、destination、distance、taxi_cost、transits乘車方案function transit(_layerName,_routeName,paramsMap) {    layerName = _layerName;    routeName = _routeName;    paramsMap.origin = wgs84togcj02(paramsMap.origin.x,paramsMap.origin.y);    paramsMap.destination = wgs84togcj02(paramsMap.destination.x,paramsMap.destination.y);    var serviceUrl = "http://restapi.amap.com/v3/direction/transit/integrated?";    $.each(paramsMap, function(key,value) {        serviceUrl += key +"="+value+"&";           });    serviceUrl += "output=JSON&key="+AMAP_SERVICE_KEY;    console.log(serviceUrl);    $.ajax({        type:"get",        url:serviceUrl,        async:true,        success : function(result){            result = eval(result);            console.log(result);            transitRoute = result.route;            $.each(transitRoute.transits, function(index,value) { //transits [] 遍曆乘車方案                 //value {} 一種乘車方案 有cost duration nightflag walking_distance distance missed segments                var segments = value.segments; //[] 乘車方案分幾步                $.each(segments, function(index,value) {                    handleResult_walking(value.walking.steps);                    handleResult_bus(value.bus.buslines);                });            });        }    });}function handleResult_bus(buslines) { //處理資料    $.each(buslines, function(index,value) {        //把字串變成 座標數組，然後轉換        console.log(value.polyline);        var latAndLons = value.polyline.split(";");        var points = [];        $.each(latAndLons,function(index,value){            var point = value.split(","); //一個點的經緯度 [x,y]            $.each(point, function(index,value) {//[x,y]字串轉為float                point[index] -= 0;            });            point = gcj02towgs84(point[0],point[1]);//轉換座標            points.push(point);//放入集合            console.log(points);        });        value.polyline = points;        console.log(value.polyline);    });    drawRoute_bus(buslines); //畫公交線}function drawRoute_bus(buslines) {    $.each(buslines,function(index,value){        var lineName = routeName + " 第"+(index+1)+"步 "+ value.name;        console.log(lineName);console.log(value);        drawLine_bus(lineName,value);    });}function drawLine_bus(lineName,lineMap) {    require([        "esri/geometry/Polyline",        "esri/graphic",        "esri/InfoTemplate"    ], function(Polyline,Graphic,InfoTemplate) {        var polylineJson = {            "paths":[                lineMap.polyline            ],            "spatialReference":{                "wkid":4326            }        };        var polyline = new Polyline(polylineJson);        console.log(polyline);        var attr = {            name : lineName,            distance : lineMap.distance,            type : lineMap.type,            departure_stop : lineMap.departure_stop.name,            arrival_stop : lineMap.arrival_stop.name        };        var infoTemplate = new InfoTemplate("${name}", "類型：${type}<br/>起始站：${departure_stop}<br/>下車站：${arrival_stop}<br/>距離：${distance}米");         var graphic = new Graphic(polyline,symbolMap["line_default"],attr,infoTemplate);        map.getLayer(layerName).add(graphic);    });}

座標轉換coordinateUtils.js

http://blog.csdn.net/summer_dew/article/details/77688210 點、線、面符號統一管理symbol.js

統一管理利於後期修改樣式，不用在每個JS檔案中找樣式
也可以對樣式方案進行擴充，使用者可自行設定屬於自己的一套樣式

/** * Created by passerQi on 2017/8/23. * 說明：符號樣式統一管理 */var symbolMap = {}; //儲存符號系統的mapfunction initSymbol(){    require([        "esri/symbols/PictureMarkerSymbol",        "esri/symbols/SimpleLineSymbol", //線符號        "esri/symbols/SimpleMarkerSymbol", //點符號        "esri/symbols/SimpleFillSymbol", //面符號        ], function(PictureMarkerSymbol,SimpleLineSymbol,SimpleMarkerSymbol,SimpleFillSymbol) {            //預設符號樣式            symbolMap["line_default"] = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([236, 176, 25]), 3);            symbolMap["point_default"] = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, symbolMap["default_line"], new dojo.Color([236, 176, 25]));            symbolMap["fill_default"] = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, symbolMap["default_line"],  new dojo.Color([236, 176, 25]));        //點        symbolMap["point_main_blue"] = new PictureMarkerSymbol('img/point_main_blue.png', 25, 25);        symbolMap["point_green"] = new PictureMarkerSymbol('img/point_green.png', 25, 25);        symbolMap["point_restaurant"] = new PictureMarkerSymbol('img/point_main_blue.png', 25, 25);        //面        for (var i=0; i<9; i++) {            if (i%3===0) {                symbolMap["fill_"+i] = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, symbolMap["default_line"],  new dojo.Color([236, 176, 50*i,0.2]));            } else if ( i%3===1) {                symbolMap["fill_"+i] = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, symbolMap["default_line"],  new dojo.Color([236, 50*i, 25,0.2]));            } else {                symbolMap["fill_"+i] = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, symbolMap["default_line"],  new dojo.Color([50*i, 176, 25,0.2]));            }        }    });}

載入天地圖底圖

http://blog.csdn.net/summer_dew/article/details/77687688 結果