Menambahkan toolbar alat menggambar ke peta

Artikel ini memperlihatkan cara menggunakan modul Alat Menggambar dan menampilkan toolbar menggambar di peta. Kontrol bilah alat Menggambar menambahkan bilah alat gambar di peta. Anda mempelajari cara membuat peta hanya dengan satu dan semua alat gambar dan cara menyesuaikan penyajian bentuk gambar di manajer gambar.

Menambah toolbar menggambar

Kode berikut membuat instans dari manajer menggambar dan menampilkan toolbar pada peta.

//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: 'dark'
        })
    });

Untuk sampel kerja lengkap yang menunjukkan cara menambahkan toolbar gambar ke peta Anda, lihat Menambahkan toolbar gambar untuk memetakan di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Menambahkan toolbar gambar untuk memetakan kode sumber.

Membatasi opsi toolbar yang ditampilkan

Kode berikut membuat instans dari manajer menggambar dan menampilkan toolbar hanya dengan alat menggambar poligon di peta.

//Create an instance of the drawing manager and display the drawing toolbar with polygon drawing tool.
drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: 'light',
            buttons: ["draw-polygon"]
        })
    });

Cuplikan layar berikut menunjukkan sampel instans manajer gambar yang menampilkan toolbar hanya dengan satu alat menggambar di peta:

Mengubah gaya penyajian gambar

Gaya bentuk yang digambar dapat disesuaikan dengan mengambil lapisan dasar pengelola gambar dengan menggunakan fungsi drawingManager.getLayers() dan drawingManager.getPreviewLayers(), lalu menyetel opsi pada masing-masing lapisan. Handel seret yang muncul untuk koordinat saat mengedit bentuk adalah penanda HTML. Gaya handel seret dapat disesuaikan dengan meneruskan opsi penanda HTML ke dalam opsi dragHandleStyle dan secondaryDragHandleStyle manajer menggambar.

Kode berikut mendapatkan lapisan penyajian dari manajer menggambar dan memodifikasi opsi mereka untuk mengubah gaya penyajian untuk menggambar. Dalam hal ini, titik dirender dengan ikon penanda biru. Garis berwarna merah dan lebar empat piksel. Poligon memiliki warna isian hijau dan kerangka oranye. Itu kemudian mengubah gaya handel seret menjadi ikon persegi.

//Get rendering layers of drawing manager.
var layers = drawingManager.getLayers();

//Change the icon rendered for points.
layers.pointLayer.setOptions({
    iconOptions: {
        image: 'marker-blue'
    }
});

//Change the color and width of lines.
layers.lineLayer.setOptions({
    strokeColor: 'red',
    strokeWidth: 4
});

//Change fill color of polygons.
layers.polygonLayer.setOptions({
    fillColor: 'green'
});

//Change the color of polygon outlines.
layers.polygonOutlineLayer.setOptions({
    strokeColor: 'orange'
});


//Get preview rendering layers from the drawing manager and modify line styles to be dashed.
var previewLayers = drawingManager.getPreviewLayers();
previewLayers.lineLayer.setOptions({ strokeColor: 'red', strokeWidth: 4, strokeDashArray: [3,3] });
previewLayers.polygonOutlineLayer.setOptions({ strokeColor: 'orange', strokeDashArray: [3, 3] });

//Update the style of the drag handles that appear when editing.
drawingManager.setOptions({
    //Primary drag handle that represents coordinates in the shape.
    dragHandleStyle: {
        anchor: 'center',
        htmlContent: '<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="15" height="15" style="stroke:black;fill:white;stroke-width:4px;"/></svg>',
        draggable: true
    },

    //Secondary drag handle that represents mid-point coordinates that users can grab to add new coordinates in the middle of segments.
    secondaryDragHandleStyle: {
        anchor: 'center',
        htmlContent: '<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="10" height="10" style="stroke:white;fill:black;stroke-width:4px;"/></svg>',
        draggable: true
    }
});  

Untuk sampel kerja lengkap yang menunjukkan cara menyesuaikan penyajian bentuk gambar di manajer gambar dengan mengakses lapisan penyajian, lihat Mengubah gaya penyajian gambar di sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Mengubah kode sumber gaya penyajian gambar.

Catatan

Saat dalam mode edit, bentuk dapat diputar. Rotasi didukung dari geometri MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon, dan Rectangle. Geometri Point dan Circle tidak dapat diputar.

Langkah berikutnya

Pelajari cara menggunakan lebih banyak fitur modul alat gambar:

Dapatkan data bentuk

Bereaksi terhadap peristiwa menggambar

Jenis interaksi dan pintasan papan ketik

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

Peta

Toolbar gambar

Manajer menggambar