您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

显示从 A 到 B 的路线Show directions from A to B

本文展示了如何发出路线请求并在地图上显示路线。This article shows you how to make a route request and show the route on the map.

可通过两种方法来执行此操作。There are two ways to do so. 第一种方法是通过服务模块查询 Azure Maps 路线 APIThe first way is to query the Azure Maps Route API through a service module. 第二种方法是使用 FETCH apiAzure Maps 路由 api发出搜索请求。The second way is to use the Fetch API to make a search request to the Azure Maps Route API. 下面将讨论这两种方法。Both ways are discussed below.

通过服务模块查询路线Query the route via service module

在上面的代码中,第一个块构造一个 map 对象,并将身份验证机制设置为使用访问令牌。In the above code, the first block constructs a map object and sets the authentication mechanism to use the access token. 有关说明,可以参阅创建地图You can see create a map for instructions.

第二个代码块创建一个 TokenCredential,以使用访问令牌验证对 Azure Maps 的 HTTP 请求。The second block of code creates a TokenCredential to authenticate HTTP requests to Azure Maps with the access token. 然后它将 TokenCredential 传递给 atlas.service.MapsURL.newPipeline(),并创建一个 Pipeline 实例。It then passes the TokenCredential to atlas.service.MapsURL.newPipeline() and creates a Pipeline instance. routeURL 表示 Azure Maps Route 操作的 URL。The routeURL represents a URL to Azure Maps Route operations.

第三个代码块创建 DataSource 对象并将其添加到该映射。The third block of code creates and adds a DataSource object to the map.

第四个代码块创建开始点和终结 对象,并将它们添加到 dataSource 对象。The fourth block of code creates start and end points objects and adds them to the dataSource object.

线条是 LineString 的一 项功能A line is a Feature for LineString. LineLayer 呈现 DataSource 中包装的线条对象(作为地图中的线条)。A LineLayer renders line objects wrapped in the DataSource as lines on the map. 第四个代码块创建线条层并将其添加到地图。The fourth block of code creates and adds a line layer to the map. 请参阅 LinestringLayerOptions 中介绍的线条层属性。See properties of a line layer at LinestringLayerOptions.

符号层使用文本或图标呈现包装在数据源中的基于点的数据。A symbol layer uses texts or icons to render point-based data wrapped in the DataSource. 文本或图标呈现为地图上的符号。The texts or the icons render as symbols on the map. 第五个代码块创建符号层并将其添加到地图中。The fifth block of code creates and adds a symbol layer to the map.

第六个代码块查询 Azure Maps 路由服务,该服务是 服务模块的一部分。The sixth block of code queries the Azure Maps routing service, which is part of the service module. RouteURL 的 calculateRouteDirections 方法用于获取起点和终点之间的路线。The calculateRouteDirections method of the RouteURL is used to get a route between the start and end points. 然后使用方法提取响应中的 GeoJSON 功能集合 geojson.getFeatures() ,并将其添加到数据源。A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and is added to the datasource. 然后,它将响应呈现为地图上的路线。It then renders the response as a route on the map. 有关向地图添加线条的详细信息,请参阅在地图上添加线条For more information about adding a line to the map, see add a line on the map.

最后一个代码块使用地图的 setCamera 属性设置地图的界限。The last block of code sets the bounds of the map using the Map's setCamera property.

路由查询、数据源、符号、线条层和相机边界是在 事件侦听器内创建的。The route query, data source, symbol, line layers, and camera bounds are created inside the event listener. 此代码结构可确保仅在映射完全加载后显示结果。This code structure ensures the results are displayed only after the map fully loads.

通过提取 API 查询路由Query the route via Fetch API

在上面的代码中,第一个代码块构造一个地图对象,并通过设置身份验证机制来使用访问令牌。In the code above, the first block of code constructs a map object and sets the authentication mechanism to use the access token. 有关说明,可以参阅创建地图You can see create a map for instructions.

第二个代码块创建 DataSource 对象并将其添加到地图。The second block of code creates and adds a DataSource object to the map.

第三个代码块创建路由的起点和终点。The third code block creates the start and destination points for the route. 然后,将其添加到数据源。Then, it adds them to the data source. 有关如何使用 addPins 的说明,可以参阅在地图上添加图钉You can see add a pin on the map for instructions about using addPins.

LineLayer 呈现 DataSource 中包装的线条对象(作为地图中的线条)。A LineLayer renders line objects wrapped in the DataSource as lines on the map. 第四个代码块创建线条层并将其添加到地图。The fourth block of code creates and adds a line layer to the map. 请参阅 LineLayerOptions 中介绍的线条层属性。See properties of a line layer at LineLayerOptions.

某个符号层使用文本或图标来呈现作为符号包装在地图上 DataSource 中的基于点的数据。A symbol layer uses text or icons to render point-based data wrapped in the DataSource as symbols on the map. 第五个代码块创建符号层并将其添加到地图中。The fifth block of code creates and adds a symbol layer to the map. 请在 SymbolLayerOptions 中参阅符号层的属性。See properties of a symbol layer at SymbolLayerOptions.

下一个代码块从起点和终点之间创建 SouthWestNorthEast 点,并使用地图的 setCamera 属性设置地图的边界。The next code block creates SouthWest and NorthEast points from the start and destination points and sets the bounds of the map using the Map's setCamera property.

最后一个代码块使用 FETCH apiAzure Maps 路由 api发出搜索请求。The last block of code uses the Fetch API to make a search request to the Azure Maps Route API. 然后分析响应。The response is then parsed. 如果响应成功,则通过连接这些点将纬度和经度信息用于创建一条直线。If the response was successful, the latitude and longitude information is used to create an array a line by connecting those points. 然后,将行数据添加到数据源,以在地图上呈现路由。The line data is then added to data source to render the route on the map. 有关说明,可以参阅在地图上添加线条You can see add a line on the map for instructions.

路由查询、数据源、符号、线条层和相机边界是在 事件侦听器内创建的。The route query, data source, symbol, line layers, and camera bounds are created inside the event listener. 同样,我们想要确保在地图完全加载后显示结果。Again, we want to ensure that results are displayed after the map loads fully.

后续步骤Next steps

详细了解本文中使用的类和方法:Learn more about the classes and methods used in this article:

有关完整代码示例,请参阅以下文章:See the following articles for full code examples: