Using the high-D map Web service-Route planning

German map Path Planning Service

Http://lbs.amap.com/api/webservice/guide/api/direction
Provides routes between two points: walk, bus, drive use the key of the Gold Map Web service to apply the parameter stitching URL using JS Ajax asynchronous request HTTP Service

Get parameters using

Example

JS Framework: JQuery (manipulating the DOM, sending requests asynchronously)
ArcGIS API for javascript: Show the results of Path planning
Basemap: World map (coordinate system 4326)
Project for Hbuild Project document
This example is an example of a niche project that has not yet been packaged and improved
Download address if you do not have points, please leave your email at the comment office (no changes will be made after the points have been uploaded.) See first time Hair) Directory Introduction

Main code HTML page

<! DOCTYPE html>  
 German map Service Amap-direction.js   
/** * @function German map path navigation service * @description dependent on coordinateutils.js package */var Amap_service_key = "4fac3db************7db1c7" ; Key please apply yourself/** * @function walk * @parma layername loaded layer name * @parma _routename Route name * @param origingeometry,destinationg
Eometry starting point Geometry */var steps;
var routeName;
var layername;
    function Walking (_layername,_routename,origingeometry,destinationgeometry) {layername = _layername;
    RouteName = _routename; var origin = wgs84togcj02 (ORIGINGEOMETRY.X,ORIGINGEOMETRY.Y);
    coordinate system conversion 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 ({//Gold Map HTTP Service type: "Get", Url:serviceurl, Async:true, success:function (result) { Successful return result = eval (result); Parse the JSON-formatted string steps = Result.route.paths[0].steps; TakeOut Walk array handleresult_walking (steps);
Processing Walk Array}}); }/** * @function processing steps Walk array * @param {Object} result */function handleresult_walking (steps) {//Because the latitude and longitude of the route given in the service is a character String, so we convert it to an array, and overwrite $.each (steps, Function (Index,value) {///string into coordinate arrays, then convert var latandlons = Value.poly
        Line.split (";");
        var points = []; $.each (Latandlons,function (index,value) {var point = Value.split (",");//The latitude and longitude of a dot [x, y] $.each (poin
            T, function (Index,value) {//[x,y] string converted to float Point[index]-= 0;
            });
        Point = GCJ02TOWGS84 (point[0],point[1]);//Convert coordinate points.push (point);//Put in Set Console.log (points);
        }); Value.polyline = points;
    Overwrite the original string console.log (Value.polyline);
    }); Drawroute_walking (routename,steps); Draw solution} function drawroute_walking (routename,steps) {$.each (Steps,function (index,value) {var linename = Rou Tename + "First" + (index+1) + "Step";
        Number of steps name Console.log (linename); Console.log (value); Drawline_walking (Linename,value);
Draw line});
        } function drawline_walking (Linename,linemap) {require (["Esri/geometry/polyline", "esri/graphic", "Esri/infotemplate", "esri/layers/graphicslayer"], function (polyline,graphic,infotemplate,graphicslayer
            {var Polylinejson = {//Line object parameter JSON format "paths": [Linemap.polyline],
        "Spatialreference": {"Wkid": 4326}}; var polyline = new polyline (Polylinejson);
        Create Line Object Console.log (polyline); var attr = {//attribute of the Geography entity Name:linename, Action:lineMap.action, DISTANCE:LINEMAP.D
        Istance, Instruction:lineMap.instruction, road:lineMap.road}; Information window for geographic entities var infotemplate = new Infotemplate ("${name}", "Direction:${action}<br/> description: ${instruction}<br/> distance: ${distance} m <br/> road name: ${road} ");
        Create client graphics var graphic = new Graphic (polyline,symbolmap["Line_default"],attr,infotemplate);
    Load onto map map.getlayer (layername). Add (graphic);
}); }/** * @function bus * @parma layername loaded layer name * @param routeName Line name * @param paramsmap Parameter information Origin Lon,lat (by
        degrees, latitude), such as 117.500244, 40.417801 latitude and longitude not more than 6 digits must be destination On,lat (longitude, latitude), such as 117.500244, 40.417801 latitude and longitude of less than 6 digits must City name: City of city with support for local bus transfer/cross-city bus, rule £/citycode must strategy 0: the quickest mode; 1: the most economical mode; 2: minimum transfer mode; 3: Minimum walking mode; 5: no subway mode n  Whether the Ightflag calculates the night bus, 1: yes; 0: no date is filtered according to departure date, format: date=2014-3-19 time filter According to departure, format: time=22:34 */var Transitroute;
    {} has origin, destination, distance, Taxi_cost, transits Ride scheme 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) {R
            Esult = eval (result);
            Console.log (result);
            Transitroute = Result.route; $.each (transitroute.transits, function (index,value) {//transits [] traverse ride scheme//value {} A ride scheme has cost Durati On Nightflag walking_distance distance missed segments var segments = value.segments; [] The ride plan is divided into several steps $.each (segments, function (Index,value) {handleresult_walking (Value.walki
                    Ng.steps);
                Handleresult_bus (Value.bus.buslines);
      });      });
}
    });
        } function Handleresult_bus (buslines) {//processes the data $.each (buslines, function (index,value) {//Converts the string into an array of coordinates, then transforms
        Console.log (Value.polyline);
        var latandlons = Value.polyline.split (";");
        var points = []; $.each (Latandlons,function (index,value) {var point = Value.split (",");//The latitude and longitude of a dot [x, y] $.each (poin
            T, function (Index,value) {//[x,y] string converted to float Point[index]-= 0;
            });
        Point = GCJ02TOWGS84 (point[0],point[1]);//Convert coordinate points.push (point);//Put in Set Console.log (points);
        });
        Value.polyline = points;
    Console.log (Value.polyline);
    }); Drawroute_bus (Buslines);  Draw bus Line} function Drawroute_bus (buslines) {$.each (Buslines,function (index,value) {var linename = RouteName +
        "First" + (index+1) + "step" + value.name;
        Console.log (Linename); Console.log (value);
    Drawline_bus (Linename,value);
}); } function DrAwline_bus (Linename,linemap) {require (["Esri/geometry/polyline", "esri/graphic", "Esri/infot
                Emplate "], 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:${type}<br/> start station:${departure_stop}<br/> Lower station: ${arrival_ 
        Stop}<br/> distance: ${distance} m ");
        var graphic = new Graphic (polyline,symbolmap["Line_default"],attr,infotemplate);
    Map.getlayer (LayerName). Add (graphic);
});
 }
 
Coordinate conversion coordinateutils.js 
http://blog.csdn.net/summer_dew/article/details/77688210 point, line and polygon symbol Unified management Symbol.js

Unified management for later changes in style, do not have to find the style in each JS file
You can also extend the style scheme so that users can set their own style.

/** * Created by Passerqi on 2017/8/23. * Description: Unified management of symbol style */var symbolmap = {}; The map function Initsymbol () {require (["Esri/symbols/picturemarkersymbol", "esri/symbols/simple") that stores the symbology.
        Linesymbol ",//Line symbol" Esri/symbols/simplemarkersymbol ",//Dot symbol" Esri/symbols/simplefillsymbol ",//Polygon symbol
            ], function (picturemarkersymbol,simplelinesymbol,simplemarkersymbol,simplefillsymbol) {//default symbol style 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]));
        Point 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); Face for (var i=0; i<9; i++) {if (i%3===0) {symbolmap["Fill_" +i] = new Simplefills Ymbol (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]));
}
        }

    });
 }
 
Load Day map Basemap 
http://blog.csdn.net/summer_dew/article/details/77687688 Results