Azure Haritalar’ı kullanarak ilgi çekici noktaya yönlendirmeRoute to a point of interest using Azure Maps

Bu öğreticide, Azure Haritalar hesabınız ile Yönlendirme Hizmeti SDK’nızı kullanarak ilgi çekici noktanıza nasıl yol tarifi alabileceğiniz gösterilmektedir.This tutorial shows how to use your Azure Maps account and the Route Service SDK to find the route to your point of interest. Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:In this tutorial, you learn how to:

  • Harita denetimi API’sini kullanarak yeni bir web sayfası oluşturmaCreate a new web page using the map control API
  • Adres koordinatlarını ayarlamaSet address coordinates
  • İstenen konuma yol tarifi almak için Sorgu Yönlendirme HizmetiQuery Route Service for directions to point of interest

ÖnkoşullarPrerequisites

Devam etmeden önce, Azure Haritalar hesabınızı oluşturmak ve hesabınızın abonelik anahtarını almak için önceki öğreticide yer alan adımları izleyin.Before you proceed, follow the steps in the previous tutorial to create your Azure Maps account, and get the subscription key for your account.

Yeni harita oluşturmaCreate a new map

Aşağıdaki adımlarda, Harita Denetimi API’sinin tümleşik olduğu statik bir HTML sayfasının nasıl oluşturulacağı gösterilmektedir.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. Yerel makinenizde yeni bir dosya oluşturun ve bu dosyayı MapRoute.html olarak adlandırın.On your local machine, create a new file and name it MapRoute.html.

  2. Aşağıdaki HTML bileşenlerini dosyaya ekleyin:Add the following HTML components to the file:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Map Route</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
        <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
    
        <script>
            var map, datasource, client;
    
            function GetMap() {
                //Add Map Control JavaScript code here.
            }
        </script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
    
            #myMap {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="GetMap()">
        <div id="myMap"></div>
    </body>
    </html>
    

    HTML üst bilgisinin Azure Harita Denetimi kitaplığı tarafından barındırılan CSS ve JavaScript kaynak dosyalarını içerdiğine dikkat edin.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Sayfanın gövdesinde bulunan ve sayfa yüklendiğinde GetMap işlevini çağıracak olan onload olayına dikkat edin.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. Bu işlev, Azure Haritalar API’lerine erişime yönelik satır içi JavaScript kodunu içerir.This function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. GetMap işlevine aşağıdaki JavaScript kodunu ekleyin.Add the following JavaScript code to the GetMap function. Dize değiştirin <Your Azure Maps Key> haritalar hesabınızdan kopyaladığınız birincil anahtara sahip.Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
           authType: 'subscriptionKey',
           subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    

    Azure Harita Denetimi API’sinin bir bileşeni olan atlas.Map, görsel ve etkileşimli bir web haritası için denetim olanağı sunar.The atlas.Map provides the control for a visual and interactive web map, and is a component of the Azure Map Control API.

  4. Dosyayı kaydedin ve tarayıcınızda açın.Save the file and open it in your browser. Bu noktada, daha fazla geliştirebileceğiniz temel bir haritanız olur.At this point, you have a basic map that you can develop further.

    Temel haritayı görüntüleme

Rotanın nasıl işleneceğini tanımlamaDefine how the route will be rendered

Bu öğreticide rota başlangıcı ve bitişi için bir simge ve rota yolu için bir çizgi kullanılarak basit bir rota işlenecektir.In this tutorial, a simple route will be rendered using a symbol icon for the start and end of the route, and a line for the route path.

  1. Eşleme başlatılıyor sonra aşağıdaki JavaScript kodunu ekleyin.After initializing the map, add the following JavaScript code.

    //Wait until the map resources are ready.
    map.events.add('ready', function() {
    
        //Create a data source and add it to the map.
        datasource = new atlas.source.DataSource();
        map.sources.add(datasource);
    
        //Add a layer for rendering the route lines and have it render under the map labels.
        map.layers.add(new atlas.layer.LineLayer(datasource, null, {
            strokeColor: '#2272B9',
            strokeWidth: 5,
            lineJoin: 'round',
            lineCap: 'round'
        }), 'labels');
    
        //Add a layer for rendering point data.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                image: ['get', 'icon'],
                allowOverlap: true
           },
            textOptions: {
                textField: ['get', 'title'],
                offset: [0, 1.2]
            },
            filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
        }));
    });
    

    MAPS ready olay işleyicisi, bir veri kaynağı yol satır yanı sıra, başlangıç ve bitiş noktalarını depolamak için oluşturulur.In the maps ready event handler, a data source is created to store the route line as well as the start and end points. Bir çizgi katmanı oluşturulup veri kaynağına eklenir ve rota çizgisinin nasıl işleneceği tanımlanır.A line layer is created and attached to the data source to defined how the route line will be rendered. Rota çizgisi mavi renkli olarak 5 piksel genişliğinde işlenecek ve birleşim yerleri ile bitiş uçları yuvarlatılacaktır.The route line will be rendered a nice shade of blue with a width of 5 pixels and rounded line joins and caps. Katman haritaya eklenirken bu katmanın harita etiketlerinin altında işlenmesi gerektiğini belirten 'labels' değerine sahip ikinci bir parametre geçirilir.When adding the layer to the map a second parameter with the value of 'labels' is passed in which specifies to render this layer below the map labels. Bu parametre, rota çizgisinin yol etiketlerini kapatmamasını sağlar.This will ensure that the route line doesn't cover up the road labels. Bir simge katmanı oluşturulur ve veri kaynağına eklenir.A symbol layer is created and attached to the data source. Bu katman, başlangıç ve bitiş noktalarının nasıl işleneceğini belirtir. Bu durumda her bir nokta nesnesinin özelliklerinden simge görüntüsünü ve metin etiketi bilgilerini almak için ifadeler eklenmiştir.This layer specifies how the start and end points will be rendered, in this case expressions have been added to retrieve the icon image and text label information from properties on each point object.

  2. Bu öğretici için başlangıç noktası olarak Microsoft’u ve bitiş noktası olarak Seattle’da bir benzin istasyonunu ayarlayın.For this tutorial, set the start point as Microsoft, and the end point as a gas station in Seattle. MAPS ready olay işleyicisine aşağıdaki kodu ekleyin.In the maps ready event handler, add the following code.

    //Create the GeoJSON objects which represent the start and end points of the route.
    var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
        title: "Redmond",
        icon: "pin-blue"
    });
    
    var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
        title: "Seattle",
        icon: "pin-round-blue"
    });
    
    //Add the data to the data source.
    datasource.add([startPoint, endPoint]);
    
    map.setCamera({
        bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
        padding: 80
    });
    

    Bu kod, iki oluşturur GeoJSON noktası nesneleri başlangıç ve bitiş noktalarını rotanın temsil etmek için ve veri kaynağına noktaları ekler.This code creates two GeoJSON Point objects to represent the start and end points of the route and adds the points to the datasource. Her noktaya title ve icon özelliği eklenir.A title and icon property is added to each point. Başlangıç ve bitiş noktalarını enlem ve boylam bilgilerini kullanarak, haritanın kullanarak kamera görünümü son blok ayarlar setCamera özelliği.The last block sets the camera view using the latitude and longitude information of the start and end points, using the Map's setCamera property.

  3. MapRoute.html dosyasını kaydedin ve tarayıcınızı yenileyin.Save the MapRoute.html file and refresh your browser. Harita üzerinde Seattle artık ortalanır ve başlangıç noktasını işaretleme mavi iğne ve bitiş noktası işaretleme yuvarlak mavi iğne görebilirsiniz.Now the map is centered over Seattle, and you can see the blue pin marking the start point and the round blue pin marking the finish point.

    Başlangıç ve bitiş noktaları işaretlenmiş şekilde haritayı görüntüleme

Yol tarifini almaGet directions

Bu bölümde Azure haritalar rota hizmeti API uç noktası için belirtilen başlangıç noktasından yol bulmak için nasıl kullanılacağını gösterir.This section shows how to use Azure Maps route service API to find the route from a given start point to end point. Yönlendirme hizmeti, iki konum arasındaki en hızlı, en kısa, ekonomik veya heyecan verici yolları planlamak için API’ler sağlar.The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations. Ayrıca, Azure’ın geçmişe ait kapsamlı trafik veritabanını kullanarak herhangi bir gün ve saat için yol süresini tahmin eder. Böylece kullanıcıların ileri bir tarih için yol tarifi alabilmesini sağlar.It also allows users to plan routes in the future by using Azure's extensive historic traffic database and predicting route durations for any day and time. Daha fazla bilgi için bkz. Yol tariflerini alma.For more information, see Get route directions. Aşağıdaki işlevler tüm eklenmelidir eşleme hazır eventListener içinde kaynak eşleme erişilecek hazır olduktan sonra Yük emin olmak için.All of the following functionalities should be added within the map ready eventListener to ensure that they load after the map resources are ready to be accessed.

  1. GetMap işlevinde, aşağıdaki Javascript kodunu ekleyin.In the GetMap function, add the following to Javascript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the RouteURL object
    var routeURL = new atlas.service.RouteURL(pipeline);
    

    SubscriptionKeyCredential Oluşturur bir SubscriptionKeyCredentialPolicy abonelik anahtarını Azure haritalar için HTTP isteklerinde kimlik doğrulaması için.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() Alır SubscriptionKeyCredential ilke ve oluşturan bir işlem hattı örneği.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL Azure haritalar için URL'yi temsil rota operations.The routeURL represents a URL to Azure Maps Route operations.

  2. Kimlik bilgileri ve URL'yi ayarladıktan sonra başlangıçtan uç noktasına rota oluşturmak için aşağıdaki JavaScript kodunu ekleyin.After setting up credentials and the URL, add the following JavaScript code to construct the route from start to end point. routeURL İsteklerini Azure haritalar rota yönlerinin hesaplamak için hizmet yönlendirir.The routeURL requests the Azure Maps route service to calculate route directions. Kullanarak bir GeoJSON özellik koleksiyonundan yanıt ayıklanır geojson.getFeatures() yöntemi ve veri kaynağına eklenir.A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source.

    //Start and end point input to the routeURL
    var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
    
    //Make a search route request
    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
        //Get data features from response
        var data = directions.geojson.getFeatures();
        datasource.add(data);
    });
    
  3. MapRoute.html dosyasını kaydedin ve web tarayıcınızı yenileyin.Save the MapRoute.html file and refresh your web browser. Haritalar API’leriyle başarılı bir şekilde bağlantı kurulması için aşağıdakine benzer bir harita görürsünüz.For a successful connection with the Maps APIs, you should see a map similar to the following.

    Azure Harita Denetimi ve Yönlendirme Hizmeti

Sonraki adımlarNext steps

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:In this tutorial, you learned how to:

  • Harita denetimi API’sini kullanarak yeni bir web sayfası oluşturmaCreate a new web page using the map control API
  • Adres koordinatlarını ayarlamaSet address coordinates
  • İlgi çekici noktaya yol tarifi almak için yönlendirme hizmetini sorgulamaQuery the route service for directions to point of interest

Sonraki öğreticide, seyahat modu veya kargo türü gibi kısıtlamalarla bir yol sorgusu oluşturma ve aynı harita üzerinde birden fazla yolu görüntüleme işlemleri gösterilmektedir.The next tutorial demonstrates how to create a route query with restrictions like mode of travel or type of cargo, then display multiple routes on the same map.