Eşlemek için çizim araçları araç çubuğu ekleme

Makale
08/30/2024

Bu makalede Çizim Araçları modülünün nasıl kullanılacağı ve çizim araç çubuğunun haritada nasıl görüntüleneceği gösterilmektedir. Çizim araç çubuğu denetimi, çizim araç çubuğunu haritaya ekler. Yalnızca bir ve tüm çizim araçlarıyla harita oluşturmayı ve çizim yöneticisinde çizim şekillerinin işlenmesini özelleştirmeyi öğreneceksiniz.

Aşağıdaki kod çizim yöneticisinin bir örneğini oluşturur ve araç çubuğunu haritada görüntüler.

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

Haritanıza çizim araç çubuğu eklemeyi gösteren eksiksiz bir çalışma örneği için, Azure Haritalar Örnekleri'nde Eşlemek için çizim araç çubuğu ekleme bölümüne bakın. Bu örneğin kaynak kodu için bkz . Kaynak kodu eşlemek için çizim araç çubuğu ekleme.

Aşağıdaki kod çizim yöneticisinin bir örneğini oluşturur ve araç çubuğunu haritada yalnızca çokgen bir çizim aracıyla görüntüler.

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

Aşağıdaki ekran görüntüsünde, harita üzerinde yalnızca tek bir çizim aracıyla araç çubuğunu görüntüleyen çizim yöneticisi örneğinin bir örneği gösterilmektedir:

Çizim işleme stilini değiştirme

Çizilen şekillerin stili, ve drawingManager.getPreviewLayers() işlevleri kullanılarak drawingManager.getLayers() çizim yöneticisinin temel katmanları alınıp tek tek katmanlardaki seçenekler ayarlanarak özelleştirilebilir. Şekli düzenlerken koordinatlar için görüntülenen sürükleme tutamaçları HTML işaretçileridir. Sürükleme tutamaçlarının stili, HTML işaretçisi seçeneklerini çizim yöneticisinin dragHandleStyle ve secondaryDragHandleStyle seçeneklerine geçirerek özelleştirilebilir.

Aşağıdaki kod, çizim yöneticisinden işleme katmanlarını alır ve çizim için işleme stilini değiştirmek üzere seçeneklerini değiştirir. Bu durumda, noktalar mavi işaretçi simgesiyle işlenir. Çizgiler kırmızı ve dört piksel genişliğindedir. Çokgenler yeşil dolgu rengine ve turuncu ana hatlara sahiptir. Ardından sürükleme tutamaçlarının stillerini kare simgeleri olacak şekilde değiştirir.

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

İşleme katmanlarına erişerek çizim yöneticisindeki çizim şekillerinin işlenmesini özelleştirmeyi gösteren eksiksiz bir çalışma örneği için bkz. Azure Haritalar Örnekleri'nde çizim işleme stilini değiştirme. Bu örneğin kaynak kodu için bkz . Çizim işleme stili kaynak kodunu değiştirme.

Not

Düzenleme modundayken şekiller döndürülebilir. Döndürme MultiPoint, LineString, MultiLineString, ÇokGen, MultiPolygon ve Dikdörtgen geometrilerinden desteklenir. Nokta ve Daire geometrileri döndürülemez.