新增繪圖工具工具列至地圖

發行項
08/30/2024

本文說明如何使用繪圖工具模組，並在地圖上顯示繪圖工具列。繪圖工具列控制項在地圖上新增繪圖工具列。您將了解如何建立只有一個工具和所有繪圖工具的地圖，以及如何在繪圖管理員中自訂繪圖圖形的轉譯。

下列程式碼會建立繪圖管理員的執行個體，並在地圖上顯示工具列。

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

如需完整工作範例以示範如何將繪圖工具列新增至地圖，請參閱 Azure 地圖服務範例中的將繪圖工具列新增至地圖。如需此範例的原始程式碼，請參閱將繪圖工具列新增至地圖原始程式碼。

下列程式碼會建立繪圖管理員的執行個體，並顯示工具列，地圖上只有一個多邊形繪圖工具。

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

下列螢幕擷取畫面示範繪圖管理員的範例，地圖上顯示僅單一繪圖工具的工具列：

變更繪圖轉譯樣式

使用 drawingManager.getLayers() 和 drawingManager.getPreviewLayers() 函式擷取繪圖管理員的基礎層，然後在個別圖層上設定選項，即可自訂所繪製圖形的樣式。編輯圖形時，針對座標顯示的拖曳控點即為 HTML 標記。將 HTML 標記選項傳遞至繪圖管理員的 dragHandleStyle 和 secondaryDragHandleStyle 選項，即可自訂拖曳控點的樣式。

下列程式碼會從繪圖管理員取得轉譯圖層，並修改其選項以變更繪圖的轉譯樣式。在此情況下，點會以藍色標記圖示轉譯。線條為紅色，寬度為四像素。多邊形以綠色填滿，外框為橘色。然後，它會將拖曳控點的樣式變更為方形圖示。

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

如需完整工作範例以示範如何透過存取轉譯圖層以在繪圖管理員中自訂繪圖形狀轉譯，請參閱 Azure 地圖服務範例中的變更繪圖轉譯樣式。如需此範例的原始程式碼，請參閱變更繪圖轉譯樣式原始程式碼。