Öğretici: Azure Haritalar Yönlendirme hizmeti ve Harita denetimi kullanarak rota yönergelerini görüntüleme

  • Makale
  • Okumak için 5 dakika

Bu öğreticide, azure Haritalar Yönlendirme hizmeti API'si ve Harita denetimi kullanarak baştan sona yol tarifini görüntüleme gösterilir. Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Örneğin tam kaynak kodunu buradan edinebilirsiniz. Canlı bir örnek burada bulunabilir.

Önkoşullar

  1. Azure Haritalar hesabı yapma
  2. Birincil anahtar veya abonelik anahtarıolarak da bilinen birincil abonelik anahtarını alın.

Harita denetimi oluşturma ve görüntüleme

Aşağıdaki adımlarda, bir web sayfasında Harita denetimi oluşturma ve görüntüleme adımları gösterilir.

  1. Yerel makinenizde yeni bir dosya oluşturun ve bu dosyayı MapRoute.html olarak adlandırın.

  2. Aşağıdaki HTML işaretlemesini kopyalayıp dosyaya yapıştırın.

    <!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 bilgisi, Azure Harita Denetimi kitaplığı tarafından barındırılan CSS ve JavaScript kaynak dosyalarını içerir. Gövdenin olayı onload işlevini GetMap çağıran bir olaydır. Sonraki adımda Harita denetimi başlatma kodunu ekleyacağız.

  3. GetMap işlevine aşağıdaki JavaScript kodunu ekleyin. <Your Azure Maps Key>dizesini, Haritalar hesabınızdan kopyalanan birincil anahtarla değiştirin.

    //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>'
    }
});

  4. Dosyayı kaydedin ve tarayıcınızda açın. Basit bir görüntülenir.

    Harita denetimi için temel harita işleme

Rota görüntüleme işlemeyi tanımlama

Bu öğreticide, bir çizgi katmanı kullanarak yolu işleyebilirsiniz. Başlangıç ve bitiş noktaları bir sembol katmanı kullanılarak işlenir. Satır katmanları ekleme hakkında daha fazla bilgi için bkz. Haritaya çizgi katmanı ekleme. Sembol katmanları hakkında daha fazla bilgi edinmek için bkz. Haritaya sembol katmanı ekleme.

  1. İşleve aşağıdaki JavaScript kodunu GetMap ekleme. Bu kod, Harita denetimi olay ready işleyicisini uygulamaya almaktadır. Bu öğreticide yer alan kodun geri kalanı olay ready işleyicisine yerleştirilir.

    //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.
    }));
});

    Harita denetimi olay ready işleyicisinde, başlangıç noktasından bitiş noktasına giden yolu depolamak için bir veri kaynağı oluşturulur. Rota çizgisinin nasıl işleneceklerini tanımlamak için bir satır katmanı oluşturulur ve veri kaynağına iliştirilmiş olur. Yol çizgisinin yol etiketlerini kapsmaması için değerine sahip ikinci bir parametreyi 'labels' iletiriz.

    Ardından, bir sembol katmanı oluşturulur ve veri kaynağına iliştirilmiş olur. Bu katman, başlangıç ve bitiş noktalarının nasıl işleneceklerini belirtir. Her nokta nesnesinde özelliklerden simge görüntüsü ve metin etiketi bilgilerini almak için ifadeler eklendi. İfadeler hakkında daha fazla bilgi edinmek için bkz. Veri odaklı stil ifadeleri.

  2. Başlangıç noktasını Microsoft, bitiş noktasını ise Seattle'daki bir benzin istasyonu olarak ayarlayın. Harita denetimi olay ready işleyicisinde aşağıdaki kodu ekleyin.

    //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, başlangıç ve bitiş noktalarını temsil etmek için veri kaynağına eklenen iki GeoJSON Noktası nesnesi oluşturur.

    Son kod bloğu, başlangıç ve bitiş noktalarının enlem ve boylamını kullanarak kamera görünümünü ayarlar. Başlangıç ve bitiş noktaları veri kaynağına eklenir. Başlangıç ve bitiş noktaları için sınırlayıcı kutu, atlas.data.BoundingBox.fromData işlevi kullanılarak hesaplanır. Bu sınırlayıcı kutu, işlevini kullanarak harita kameraları görünümünü tüm yol üzerinde ayarlamak için map.setCamera kullanılır. Simge simgelerinin piksel boyutlarını dengelemek için doldurma eklenir. Harita denetimi setCamera özelliği hakkında daha fazla bilgi için bkz. setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions) özelliği.

  3. Dosyayı MapRoute.html ve tarayıcınızı yenileyin. Harita artık Seattle üzerinde ortalandı. Göz yaşartıcı mavi pin, başlangıç noktasını işaretler. Yuvarlak mavi pin, bitiş noktasını işaretler.

    Yolların başlangıç ve bitiş noktasını haritada görüntüleme

Rota yönergelerini alın

Bu bölümde, rota yönlerini ve bir noktadan diğerine tahmini varış Haritalar için Azure Rota Yönergeleri API'sini nasıl kullanabileceğiniz açıklanıyor.

İpucu

Azure Haritalar Route hizmetleri, rotaları kullanılan mesafeye, trafik koşullarına ve aktarım moduna göre en hızlı, en kısa, ekonomik veya heyecan verici yollar gibi farklı rota türlerine göre planlamak için API'ler sunar. Hizmet ayrıca kullanıcıların geçmiş trafik koşullarına göre gelecekteki yolları planlamalarına da olanak sağlar. Kullanıcılar, herhangi bir zaman için rota sürelerinin tahminini görebilir. Daha fazla bilgi için bkz. Rota yönergeleri API'sini al.

  1. GetMapişlevinde, denetimin olay ready işleyicisi içinde JavaScript koduna aşağıdakini ekleyin.

    // 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 SubscriptionKeyCredentialPolicy Azure'a yapılan HTTP isteklerinin kimliğini doğrulamak Haritalar anahtarıyla bir oluşturur. atlas.service.MapsURL.newPipeline(), ilkeyi SubscriptionKeyCredential alır ve bir İşlem Hattı örneği oluşturur. , routeURL Yönlendirme işlemleri için Azure Haritalar URL'sini temsil eder.

  2. Kimlik bilgilerini ve URL'yi ayarlandıktan sonra denetimin olay işleyicisinde aşağıdaki ready kodu ekleyin. Bu kod, başlangıç noktasından bitiş noktasına giden yolu oluşturma. Azure routeURL Haritalar Yönlendirme hizmeti API'sini talep ediyor. Ardından, yöntemi kullanılarak yanıttan bir GeoJSON özellik geojson.getFeatures() koleksiyonu ayıklanır ve veri kaynağına eklenir.

    //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. Harita artık başlangıç noktasından bitiş noktasına giden yolu görüntülemeli.

    Azure Harita denetimi ve Yönlendirme hizmeti

Örneğin tam kaynak kodunu buradan edinebilirsiniz. Canlı bir örnek burada bulunabilir.

Kaynakları temizleme

Temizleme gerektiren bir kaynak yoktur.

Sonraki adımlar

Sonraki öğreticide, seyahat modu veya yük türü gibi kısıtlamalara sahip bir yol sorgusu oluşturma hakkında bilgi edinebilirsiniz. Daha sonra aynı haritada birden çok yol görüntüleniyor.

Farklı seyahat modları için yolları bulma