Harita oluşturma
Bu makalede harita oluşturmanın ve haritaya animasyon eklemenin yolları gösterilmektedir.
Harita yükleme
Eşleme yüklemek için Map sınıfının yeni bir örneğini oluşturun. Eşlemeyi başlatırken, eşlemeyi işlemek için bir DIV öğesi kimliği geçirin ve haritayı yüklerken kullanılacak bir dizi seçenek geçirin. Ad alanında atlas
varsayılan kimlik doğrulama bilgileri belirtilmezse, harita yüklenirken bu bilgilerin harita seçeneklerinde belirtilmesi gerekir. Eşleme, performans için birkaç kaynağı zaman uyumsuz olarak yükler. Bu nedenle, harita örneğini oluşturduktan sonra eşlemeye bir ready
veya load
olayı ekleyin ve ardından olay işleyicisine eşlemeyle etkileşim kuran daha fazla kod ekleyin. Olay, ready
harita program aracılığıyla etkileşime geçmek için yeterli kaynak yüklediği anda tetikleniyor. Olay, load
ilk harita görünümü tamamen yüklendikten sonra tetikleniyor.
Aynı sayfaya birden çok harita yükleyebilirsiniz. Aynı sayfaya birden çok harita yüklemeyi gösteren örnek kod için Azure Haritalar Örnekleri'ndekiBirden Çok Harita'ya bakın. Bu örneğin kaynak kodu için bkz . Birden Çok Haritalar kaynak kodu.
İpucu
Aynı sayfada birden çok harita kullanırken aynı veya farklı kimlik doğrulaması ve dil ayarlarını kullanabilirsiniz.
Dünyanın tek bir kopyasını gösterme
Harita geniş bir ekranda uzaklaştırıldığında, dünyanın birden çok kopyası yatay olarak görünür. Bu seçenek bazı senaryolar için idealdir, ancak diğer uygulamalar için dünyanın tek bir kopyasını görmek tercih edilir. Bu davranış, haritalar renderWorldCopies
seçeneği false
olarak ayarlanarak uygulanır.
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
Harita seçenekleri
Orada bir harita oluştururken, haritanın nasıl çalıştığını özelleştirmek için geçirilebilen birkaç farklı seçenek türü vardır:
- CameraOptions ve CameraBoundOptions , haritanın görüntülemesi gereken alanı belirtmek için kullanılır.
- ServiceOptions , haritanın haritayı destekleyen hizmetlerle nasıl etkileşim kuracağını belirtmek için kullanılır.
- StyleOptions , eşlemenin stillendirilip işlenmesini belirtmek için kullanılır.
- UserInteractionOptions , kullanıcı haritayla etkileşim kurarken haritanın nasıl ulaşacağını belirtmek için kullanılır.
Bu seçenekler, eşleme , , setServiceOptions
setStyle
ve setUserInteraction
işlevleri kullanılarak setCamera
yüklendikten sonra da güncelleştirilebilir.
Harita kamerasını denetleme
Haritanın kamerasını kullanarak haritanın görüntülenen alanını ayarlamanın iki yolu vardır. Haritayı yüklerken kamera seçeneklerini ayarlayabilirsiniz. Alternatif olarak, harita görünümünü program aracılığıyla güncelleştirmek için harita yüklendikten sonra istediğiniz zaman bu seçeneği çağırabilirsiniz setCamera
.
Kamerayı ayarlama
Harita kamerası, harita tuvalinin görünüm penceresi içinde görüntülenenleri denetler. Kamera seçenekleri başlatılırken veya haritalar işlevine geçirilirken harita setCamera
seçeneklerine geçirilebilir.
// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
center: [-122.33, 47.6],
zoom: 12
//Additional map options.
};
//Update the map camera at anytime using setCamera function.
map.setCamera({
center: [-110, 45],
zoom: 5
});
Orta ve yakınlaştırma düzeyi gibi harita özellikleri, CameraOptions özelliklerinin bir parçasıdır.
Kamera sınırlarını ayarlama
Harita kamerasını güncelleştirmek için sınırlayıcı bir kutu kullanılabilir. Sınırlayıcı kutu nokta verilerinden hesaplandıysa, simge boyutunu dikkate almak için genellikle kamera seçeneklerinde bir piksel doldurma değeri belirtmek yararlı olur. Bu piksel doldurma, noktaların harita görünüm penceresi kenarından düşmemesini sağlamaya yardımcı olur.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
Aşağıdaki kodda, aracılığıyla new atlas.Map()
bir Map nesnesi oluşturulur. gibi CameraBoundsOptions
eşleme özellikleri, Map sınıfının setCamera işlevi aracılığıyla tanımlanabilir. Sınırlar ve doldurma özellikleri kullanılarak setCamera
ayarlanır.
Harita görünümüne animasyon ekleme
Haritanın kamera seçeneklerini ayarlarken animasyon seçenekleri de ayarlanabilir. Bu seçenekler, kamerayı taşımak için geçmesi gereken animasyon türünü ve süresini belirtir.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
Aşağıdaki kodda, ilk kod bloğu bir harita oluşturur ve enter ve yakınlaştırma eşleme stillerini ayarlar. İkinci kod bloğunda animasyon düğmesi için bir tıklama olayı işleyicisi oluşturulur. Bu düğme seçildiğinde, setCamera
işlev CameraOptions ve AnimationOptions için bazı rastgele değerlerle çağrılır.
<!DOCTYPE html>
<html>
<head>
<!-- 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 type="text/javascript">
var map;
function InitMap()
{
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
style: 'road',
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Get an Azure Maps key at https://azuremaps.com/.
authType: 'subscriptionKey',
subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
}
});
}
/* Animate map view to set camera location
to random points on the map*/
function animateMap() {
map.setCamera({
zoom: Math.random() *2 + 12,
duration: 1000,
type: 'fly'
});
}
</script>
<style>
button {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<html style='width:100%;height:100%;'>
<body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'>
<div id='myMap' style='position:relative;width:100%;height:100%;'></div>
<button onclick="animateMap()">Animate Maps</button>
<div id="my-text-box"></div>
</body>
</html>
İstek dönüştürmeleri
Bazen harita denetimi tarafından yapılan HTTP isteklerini değiştirebilmek yararlı olabilir. Örneğin:
- Parola korumalı hizmetler için kutucuk isteklerine daha fazla üst bilgi ekleyin.
- İstekleri ara sunucu hizmeti aracılığıyla çalıştırmak için URL'leri değiştirin.
Haritanın hizmet seçenekleri , eşleme tarafından yapılan tüm istekleri yapılmadan önce değiştirmek için kullanılabilecek bir transformRequest
seçeneğine sahiptir.
transformRequest
seçeneği, iki parametre alan bir işlevdir: dize URL'si ve isteğin ne için kullanıldığını gösteren bir kaynak türü dizesi. Bu işlev bir RequestParameters sonucu döndürmelidir.
transformRequest: (url: string, resourceType: string) => RequestParameters
İstek dönüşümü kullanırken, en az bir RequestParameters
özellik içeren bir url
nesne döndürmeniz gerekir. Bir nesneye dahil RequestParameters
edilebilecek özellikler şunlardır.
Seçenek | Tür | Açıklama |
---|---|---|
body | string | POST isteği gövdesi. |
Kimlik bilgileri | 'same-origin' | 'include' |
Çıkış noktaları arası istek (COR) kimlik bilgileri ayarını belirtmek için kullanılır. Çıkış noktaları arası isteklerle tanımlama bilgileri göndermek için 'include' kullanın. |
Üstbilgi | object | İstekle birlikte gönderilecek üst bilgiler. nesnesi, dize değerlerinin anahtar değer çiftidir. |
method | 'GET' | 'POST' | 'PUT' |
Yapılacak istek türü.
'GET' varsayılan değerdir. |
tür | 'string' | 'json' | 'arrayBuffer' |
POST yanıt gövdesinin biçimi. |
url | string | İstenecek URL. |
Haritaya eklediğiniz içerikle en ilgili kaynak türleri aşağıdaki tabloda listelenmiştir:
Kaynak Türü | Açıklama |
---|---|
Görüntü | SymbolLayer veya ImageLayer ile kullanılacak görüntü isteği. |
Kaynak | TileJSON isteği gibi kaynak bilgileri için istek. Temel eşleme stillerinden gelen bazı istekler de kaynak bilgilerini yüklerken bu kaynak türünü kullanır. |
Kutucuk | Kutucuk katmanından gelen istek (raster veya vektör). |
WFS | Uzamsal GÇ modülündeki bir WfsClient OGC Web Özellik Hizmeti'ne yönelik istek. Daha fazla bilgi için bkz. WFS hizmetine bağlanma. |
WebMapService | Uzamsal GÇ modülündeki dosyasından OgcMapLayer bir WMS veya WMTS hizmetine yönelik istek. Daha fazla bilgi için bkz. Open Geospatial Consortium'dan (OGC) harita katmanı ekleme. |
burada, genellikle yoksayılan ve istek dönüşümünden geçirilen ve temel eşleme stilleriyle ilgili bazı kaynak türleri verilmiştir: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glifler, İlişkilendirme.
Aşağıdaki örnekte, isteğe üst bilgi olarak bir kullanıcı adı ve parola ekleyerek tüm isteklerin boyutuna https://example.com
nasıl değiştirileceği gösterilmektedir.
var map = new atlas.Map('myMap', {
transformRequest: function (url, resourceType) {
//Check to see if the request is to the specified endpoint.
if (url.indexOf('https://examples.com') > -1) {
//Add custom headers to the request.
return {
url: url,
header: {
username: 'myUsername',
password: 'myPassword'
}
};
}
//Return the URL unchanged by default.
return { url: url };
},
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
Sonraki adımlar
Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:
Uygulamanıza işlevsellik eklemek için kod örneklerine bakın: