Öğretici: Azure haritalar 'ı kullanarak bir ilgi noktasına yönlendirmeTutorial: Route 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, S1 Fiyatlandırma Katmanı içeren bir Azure Maps hesabı aboneliği oluşturmak için Hesabı Yönet bölümündeki yönergeleri izleyin ve hesabınıza ilişkin birincil abonelik anahtarını almak için birincil anahtar al bölümündeki adımları izleyin.Before you proceed, follow instructions in manage account to create an Azure Maps account subscription with S1 pricing tier and follow the steps in get primary key to get the primary 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/service/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 onload işlevini çağıracak olan GetMap 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 <Your Azure Maps Key>, haritalar hesabınızdan kopyaladığınız birincil anahtarla değiştirin.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şlemeyi başlattıktan 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.
        }));
    });
    

    Haritalar ready olay işleyicisinde, yol satırının yanı sıra başlangıç ve bitiş noktalarını depolamak için bir veri kaynağı 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. Haritalar ready olay işleyicisinde 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, yolun başlangıç ve bitiş noktalarını temsil eden iki coğrafi JSON noktası nesnesi oluşturur ve bu noktaları veri kaynağına 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. Son blok, haritanın Setcamera özelliğini kullanarak başlangıç ve bitiş noktalarının Enlem ve boylam bilgilerini kullanarak kamera görünümünü ayarlar.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. Artık harita Seattle üzerinden ortalanıyor ve başlangıç noktasını işaret eden mavi PIN 'i ve bitiş noktasını işaret eden yuvarlak mavi PIN 'i 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, belirli bir başlangıç noktasından bitiş noktasına yolu bulmak için Azure Maps Route hizmeti API 'sinin nasıl kullanılacağı gösterilmektedir.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. Eşleme kaynakları erişilmeye başladıktan sonra yüklendiklerinden emin olmak için, aşağıdaki işlevlerin hepsi Map Ready eventListener içine eklenmelidir.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, JavaScript koduna aşağıdakini 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, Azure Maps 'a yönelik HTTP isteklerinin kimliğini abonelik anahtarıyla doğrulamak için bir SubscriptionKeyCredentialPolicy oluşturur.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline(), SubscriptionKeyCredential ilkesinde sürer ve bir işlem hattı örneği oluşturur.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL, Azure Maps yönlendirme işlemlerine yönelik bir URL 'yi temsil eder.The routeURL represents a URL to Azure Maps Route operations.

  2. Kimlik bilgilerini ve URL 'YI ayarladıktan sonra, yolu baştan sona noktaya 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 yol yönlerini hesaplamak için Azure Maps Route hizmetini ister.The routeURL requests the Azure Maps route service to calculate route directions. Yanıttan bir GeoJSON Özellik koleksiyonu daha sonra geojson.getFeatures() yöntemi kullanılarak ayıklanır 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.