Membuat peta

Artikel ini memperlihatkan kepada Anda cara untuk membuat peta dan menganimasikan peta.

Memuat peta

Untuk memuat peta, buat instans baru Kelas peta. Saat menginisialisasi peta, teruskan ID elemen DIV untuk merender peta dan meneruskan serangkaian opsi untuk digunakan saat memuat peta. Jika informasi autentikasi default tidak ditentukan pada atlas namespace, informasi ini perlu ditentukan dalam opsi peta saat memuat peta. Peta memuat beberapa sumber daya secara asinkron untuk performa. Dengan demikian, setelah membuat instans peta, lampirkan ready atau load peristiwa ke peta lalu tambahkan lebih banyak kode yang berinteraksi dengan peta ke penanganan aktivitas. Peristiwa ready ini terjadi segera setelah peta memiliki sumber daya yang cukup yang dimuat untuk berinteraksi secara terprogram. Peristiwa load terjadi setelah tampilan peta awal selesai dimuat sepenuhnya.

Anda juga dapat memuat beberapa peta di halaman yang sama, untuk kode sampel yang menunjukkan pemuatan beberapa peta di halaman yang sama, lihat Beberapa Peta di sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Beberapa kode sumber Maps.

Cuplikan layar yang memperlihatkan kisi lekatan di peta.

Tip

Anda dapat menggunakan pengaturan autentikasi dan bahasa yang sama atau berbeda saat menggunakan beberapa peta di halaman yang sama.

Tampilkan satu salinan dunia

Saat peta diperkecil di layar lebar, beberapa salinan dunia muncul secara horizontal. Opsi ini sangat bagus untuk beberapa skenario, tetapi untuk aplikasi lain, sebaiknya hanya satu salinan dunia yang dilihat. Perilaku ini diimplementasikan dengan mengatur opsi renderWorldCopies peta ke false.

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Opsi peta

Saat membuat peta di sana, ada beberapa jenis opsi berbeda yang dapat diteruskan untuk menyesuaikan cara peta berfungsi:

  • CameraOptions dan CameraBoundOptions digunakan untuk menentukan area yang harus ditampilkan peta.
  • ServiceOptions digunakan untuk menentukan bagaimana peta harus berinteraksi dengan layanan yang menggerakkan peta.
  • StyleOptions digunakan untuk menentukan bagaimana peta harus ditata dan dirender.
  • UserInteractionOptions digunakan untuk menentukan bagaimana peta harus dijangkau ketika pengguna berinteraksi dengan peta.

Opsi ini juga dapat diperbarui setelah peta dimuat menggunakan fungsi setCamera, setServiceOptions, setStyle, setUserInteraction.

Mengontrol kamera peta

Ada dua cara untuk mengatur area peta yang ditampilkan menggunakan kamera peta. Anda dapat mengatur opsi kamera saat memuat peta. Atau, Anda dapat menghubungi opsi setCamera kapan saja setelah peta dimuat untuk memperbarui tampilan peta secara terprogram.

Mengatur kamera

Kamera peta mengontrol apa yang ditampilkan di port tampilan kanvas peta. Opsi kamera dapat diteruskan ke opsi peta saat diinisialisasi atau diteruskan ke fungsi setCamera peta.

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

Properti peta, seperti pusat dan tingkat perbesar tampilan, adalah bagian dari properti CameraOptions .

Mengatur batas kamera

Kotak pembatas dapat digunakan untuk memperbarui kamera peta. Jika kotak pembatas dihitung dari data titik, sering kali berguna untuk menentukan nilai padding piksel dalam opsi kamera untuk memperhitungkan ukuran ikon. Padding piksel ini membantu memastikan bahwa titik tidak jatuh dari tepi viewport peta.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

Dalam kode berikut, objek Peta dibangun melalui new atlas.Map(). Properti peta seperti CameraBoundsOptions dapat didefinisikan melalui fungsi setCamera dari kelas Peta. Batas dan properti pengisi diatur menggunakan setCamera.

Menganimasikan tampilan peta

Saat mengatur opsi kamera peta, opsi animasi juga dapat diatur. Opsi ini menentukan jenis animasi dan durasi untuk memindahkan kamera.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

Dalam kode berikut, blok kode pertama membuat peta dan mengatur gaya enter dan perbesar tampilan peta. Di blok kode kedua, penanganan aktivitas klik dibuat untuk tombol animasikan. Ketika tombol ini dipilih, setCamera fungsi dipanggil dengan beberapa nilai acak untuk CameraOptions dan AnimationOptions.

<!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>

Cuplikan layar memperlihatkan peta dengan tombol berlabel Animasikan Peta yang saat ditekan, menyebabkan peta memperbesar atau memperkecil tampilan.

Meminta transformasi

Terkadang berguna untuk dapat memodifikasi permintaan HTTP yang dibuat oleh kontrol peta. Contohnya:

  • Tambahkan lebih banyak header ke permintaan petak peta untuk layanan yang dilindungi kata sandi.
  • Ubah URL untuk menjalankan permintaan melalui layanan proksi.

Opsi layanan peta memiliki transformRequest yang dapat digunakan untuk memodifikasi semua permintaan yang dibuat oleh peta sebelum dibuat. Opsi transformRequest ini adalah fungsi yang mengambil dua parameter; URL string, dan string jenis sumber daya yang menunjukkan untuk apa permintaan digunakan. Fungsi ini harus menampilkan hasil RequestParameters.

transformRequest: (url: string, resourceType: string) => RequestParameters

Saat menggunakan transformasi permintaan, Anda harus mengembalikan RequestParameters objek yang berisi url properti minimal. Berikut ini adalah properti yang dapat disertakan dalam RequestParameters objek .

Opsi Jenis Deskripsi
isi string Isi permintaan POST.
informasi masuk 'same-origin' | 'include' Digunakan untuk menentukan pengaturan kredensial permintaan lintas asal (IR). Gunakan 'include' untuk mengirim cookie dengan permintaan lintas asal.
header objek Header yang akan dikirim dengan permintaan. Objek adalah pasangan nilai kunci dari nilai string.
metode 'GET' | 'POST' | 'PUT' Jenis permintaan yang akan dibuat. Defaultnya adalah 'GET'.
jenis 'string' | 'json' | 'arrayBuffer' Format isi respons POST.
url string Url yang akan diminta.

Jenis sumber daya yang paling relevan dengan konten yang Anda tambahkan ke peta tercantum dalam tabel berikut:

Jenis Sumber Daya Deskripsi
Gambar Permintaan gambar untuk digunakan dengan SymbolLayer atau ImageLayer.
Sumber Permintaan informasi sumber, seperti permintaan TileJSON. Beberapa permintaan dari gaya peta dasar juga menggunakan jenis sumber daya ini saat memuat informasi sumber.
Petak petak Permintaan dari lapisan petak peta (raster atau vektor).
WFS Permintaan dari WfsClient dalam modul IO Spasial ke Layanan Fitur Web OGC. Untuk informasi selengkapnya, lihat Menyambungkan ke layanan WFS.
WebMapService Permintaan dari OgcMapLayer dalam modul IO Spasial ke layanan WMS atau WMTS. Untuk informasi selengkapnya, lihat Menambahkan lapisan peta dari Open Geospatial Consortium (OGC).

Berikut adalah beberapa jenis sumber daya, biasanya diabaikan, yang diteruskan melalui transformasi permintaan dan terkait dengan gaya peta dasar: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Atribusi.

Contoh berikut menunjukkan cara mengubah semua permintaan ke ukuran https://example.com dengan menambahkan nama pengguna dan kata sandi sebagai header ke permintaan.

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

Langkah berikutnya

Pelajari selengkapnya tentang kelas dan metode yang digunakan dalam artikel ini:

Map

Lihat contoh kode untuk menambahkan fungsionalitas ke aplikasi Anda: