Öğretici: Azure Haritalar kullanarak farklı seyahat modları için yolları bulma ve görüntüleme

Makale
04/30/2024

Bu öğreticide, hem özel araçlar hem de kargo türüne sahip USHazmatClass2 ticari araçlar (kamyonlar) için yol tariflerini görüntülemek için Azure Haritalar Rota hizmeti ve Harita denetiminin nasıl kullanılacağı gösterilmektedir.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Web sayfasında Harita denetimini oluşturma ve görüntüleme
Gerçek zamanlı trafik verilerini haritada işleme
Özel ve ticari araç rotalarını bir harita üzerinde isteme ve görüntüleme

Önkoşullar

Azure Haritalar hesabı
Abonelik anahtarı

Not

Azure Haritalar kimlik doğrulaması hakkında daha fazla bilgi için bkz. Azure Haritalar kimlik doğrulamasını yönetme.

Harita denetimi API’sini kullanarak yeni bir web sayfası oluşturma

Aşağıdaki adımlarda, bir web sayfasında Harita denetiminin nasıl oluşturulacağı ve görüntüleneceği gösterilmektedir.

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

Aşağıdaki HTML kodunu dosyaya ekleyin:

<!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/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.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>

Yukarıdaki HTML hakkında bilmeniz gereken bazı şeyler:

HTML üst bilgisi, Azure Harita Denetimi kitaplığı tarafından barındırılan CSS ve JavaScript kaynak dosyalarını içerir.
Sayfanın onload gövdesindeki olay, sayfanın gövdesi yüklendiğinde işlevini çağırır GetMap .
İşlev, GetMap Azure Haritalar API'sine erişmek için kullanılan satır içi JavaScript kodunu içerir.

Ardından, son adımda eklenen kodun GetMap hemen altına aşağıdaki JavaScript kodunu işleve ekleyin. Bu kod bir harita denetimi oluşturur ve sağladığınız Azure Haritalar abonelik anahtarlarınızı kullanarak bu denetimi başlatır. Dizeyi <Your Azure Maps Subscription Key> Haritalar hesabınızdan kopyaladığınız Azure Haritalar abonelik anahtarıyla değiştirdiğinizden emin olun.
```
//Instantiate a map object
var map = new atlas.Map("myMap", {
    // Replace <Your Azure Maps Subscription Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});
```
Yukarıdaki JavaScript hakkında bilmeniz gereken bazı şeyler:
- Bu kod, Azure Haritalar hesabınız için Harita Denetimi API'sini başlatan işlevin çekirdeğidirGetMap.
- atlas, Azure Haritalar API'sini ve ilgili görsel bileşenleri içeren ad alanıdır.
- atlas.Map, görsel ve etkileşimli bir web haritası için gerekli denetimi sağlar.
Dosyayı kaydedin ve tarayıcınızda açın. Tarayıcı, Azure Haritalar abonelik anahtarınızı kullanarak arayarak atlas.Map temel bir harita görüntüler.

Gerçek zamanlı trafik verilerini haritada işleme

GetMap işlevinde haritanın başlatıldığı bölümün altına aşağıdaki JavaScript kodunu ekleyin. Bu kod, Eşleme denetiminin ready olay işleyicisini uygular.
```
map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});
```
Yukarıdaki JavaScript hakkında bilmeniz gereken bazı şeyler:
- Bu kod, Eşleme denetiminin ready olay işleyicisini uygular. Bu öğreticideki kodun geri kalanı olay işleyicisinin ready içine yerleştirilir.
- Harita olay işleyicisinde, haritadaki ready trafik akışı ayarı, serbest akışa göre yolun hızı olan olarak ayarlanır relative.
- Daha fazla trafik seçeneği için bkz . TrafficOptions arabirimi.
MapTruckRoute.html dosyasını kaydedin ve tarayıcınızın sayfasını yenileyin. Los Angeles gibi herhangi bir şehri yakınlaştırdığınızda, sokaklar geçerli trafik akışı verileriyle görüntülenir.

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

Bu öğreticide, haritada iki yol hesaplanır. İlk rota özel bir araç (araba) için hesaplanır. İkinci rota, ticari bir araç (kamyon) için sonuçlar arasındaki farkı göstermek üzere hesaplanır. Harita işlendiğinde, yolun başlangıç ve bitiş noktaları için bir simge simgesi ve her yol yolu için farklı renklere sahip rota çizgisi geometrileri görüntüler. Çizgi 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.

Eşleme denetiminin olay işleyicisine ready aşağıdaki kodu ekleyin.


//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: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    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.
}));

Yukarıdaki JavaScript hakkında bilmeniz gereken bazı şeyler:

Eşleme denetiminin ready olay işleyicisinde, yolu baştan sona depolamak için bir veri kaynağı oluşturulur.
İfadeler , yol çizgisi özelliğindeki özelliklerden çizgi genişliğini ve rengini almak için kullanılır.
Yol çizgisinin yol etiketlerini kapsamadığından emin olmak için değeriyle 'labels'ikinci bir parametre geçtik.

Ardından, bir sembol katmanı oluşturulur ve veri kaynağına eklenir. Bu katman, başlangıç ve bitiş noktalarının nasıl işlendiğini belirtir. Her nokta nesnesinde bulunan ö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 temelli stil ifadeleri.

Ardından, başlangıç noktasını Seattle'da Fabrikam adlı kurgusal bir şirket olarak, bitiş noktasını ise Microsoft ofisi olarak ayarlayın. Eşleme denetiminin olay işleyicisine ready aşağıdaki kodu ekleyin.
```
//Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});
```
Yukarıdaki JavaScript hakkında:
- Bu kod, başlangıç ve bitiş noktalarını göstermek için iki GeoJSON Noktası nesnesi oluşturur ve bu nesneler daha sonra veri kaynağına eklenir.
- 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 map.setCamera harita kameraları görünümünü tüm rota üzerinde ayarlamak için kullanılır.
- Doldurma, sembol simgelerinin piksel boyutlarını dengelemek için eklenir.
- Daha fazla bilgi için Microsoft teknik belgelerindeki set Kamera işlevine bakın.
TruckRoute.html kaydedin ve tarayıcınızı yenileyin. Harita şimdi Seattle üzerinde ortalandı. Mavi damla raptiye başlangıç noktasını işaretler. Yuvarlak mavi raptiye bitiş noktasını işaretler.

Özel ve ticari araç rotalarını bir harita üzerinde isteme ve görüntüleme

Bu bölümde, taşıma modunuz temelinde bir noktadan diğerine yol tarifleri almak için Azure Haritalar Rota hizmetini nasıl kullanacağınız gösterilmektedir. İki taşıma modu kullanılır: kamyon ve araba.

İpucu

Rota hizmeti, mesafeye, trafik koşullarına ve kullanılan taşıma moduna göre en hızlı, en kısa, ekonomik veya heyecan verici yolları planlamak için API'ler sağlar. Hizmet ayrıca kullanıcıların geçmiş trafik koşullarına göre gelecekteki yolları planlamasına da olanak tanır. Kullanıcılar herhangi bir süre için rota sürelerinin tahminini görebilir. Daha fazla bilgi için bkz . Yol tarifleri API'sini alma.

işlevinde GetMap , denetimin ready olay işleyicisinin içine başlangıç noktasından bitiş noktalarına bir kamyon yolu oluşturmak için aşağıdaki JavaScript kodunu ekleyin. Bu rota, sınıflandırılmış kargo taşıyan USHazmatClass2 bir kamyon için oluşturulur ve görüntülenir.

//Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});

Yukarıdaki JavaScript hakkında:

Bu kod, Azure Haritalar Yol Tarifleri API'sini kullanarak Azure Haritalar Yönlendirme hizmetini sorgular.
Rota çizgisi daha sonra yanıttan her dönüşün koordinatlarından oluşturulur.
Yol çizgisi daha sonra veri kaynağına eklenir.
Kamyon rota hattına iki özellik eklenir: mavi vuruş rengi #2272B9ve dokuz piksel vuruş genişliği.
Kamyon yolunun veri kaynağındaki diğer satırlardan önce işlendiğinden emin olmak için rota çizgisine 0 dizini verilir. Bunun nedeni, kamyon rotası hesaplamasının genellikle araba rotası hesaplamasından daha yavaş olmasıdır. Kamyon rota hattı, araba rotasının ardından veri kaynağına eklenirse, bunun üzerinde işlenir.

İpucu

Azure Haritalar Yol Tarifleri API'sinin tüm olası seçeneklerini ve değerlerini görmek için bkz. Rota Sonrası Yol Tarifleri için URI Parametreleri.

Ardından, aşağıdaki JavaScript kodunu ekleyerek bir araba için yol oluşturun.

var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

Yukarıdaki JavaScript hakkında:

Bu kod, Azure Haritalar Yol Tarifleri API'si yöntemi aracılığıyla Azure Haritalar yönlendirme hizmetini sorgular.
Rota çizgisi daha sonra her dönüşün koordinatlarından oluşturulur ve veri kaynağına eklenir.
Kamyon rota hattına iki özellik eklenir: mor vuruş rengi #B76DABve beş piksel vuruş genişliği.

TruckRoute.html dosyasını kaydedin ve web tarayıcınızı yenileyin. Harita artık hem kamyon hem de araba rotalarını göstermelidir.
- Kamyon rotası kalın mavi bir çizgi kullanılarak, araba yolu ise ince mor çizgi kullanılarak görüntülenir.
- Araba rotası I-90 üzerinden Washington Gölü'nün üzerinden geçer, yerleşim alanlarının altındaki tünellerden geçer. Tüneller yerleşim alanlarında olduğundan tehlikeli atık yükü kısıtlanır. Kargo türünü belirten USHazmatClass2 kamyon rotası, bu kısıtlamaya sahip olmayan farklı bir rota kullanmaya yönlendirilir.

Bu öğreticide kullanılan tamamlanmış kod için GitHub'daki Truck Route öğreticisine bakın.
Bu örneği canlı görüntülemek için bkz. Azure Haritalar Kod Örnekleri sitesinde seyahatmoduna göre birden çok yol.
Veri temelli stil ifadelerini de kullanabilirsiniz.

Sonraki adımlar

Sonraki öğreticide, Azure Haritalar kullanarak basit bir depo bulucu oluşturma işlemi gösterilmektedir.

Azure Haritalar kullanarak mağaza bulucu oluşturma