맵에 그리기 도구 모음 추가

아티클
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 Maps 샘플에서 맵에 그리기 도구 모음 추가를 참조하세요. 이 샘플의 소스 코드는 소스 코드를 매핑하는 그리기 도구 모음 추가를 참조하세요.

다음 코드는 그리기 관리자의 인스턴스를 만들고 맵에 다각형 그리기 도구만 있는 도구 모음을 표시합니다.

//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 표식입니다. 그리기 관리자의 dragHandleStyle 및 secondaryDragHandleStyle 옵션에 HTML 표식 옵션을 전달하여 끌기 핸들의 스타일을 사용자 지정할 수 있습니다.

다음 코드는 그리기 관리자에서 렌더링 레이어를 가져오고 그리기의 렌더링 스타일을 변경하는 옵션을 수정합니다. 이 경우 점은 파란색 표식 아이콘으로 렌더링됩니다. 선은 빨간색이며 너비는 4픽셀입니다. 다각형의 윤곽은 주황색이고 초록색으로 채워집니다. 그런 다음 끌기 핸들의 스타일을 정사각형 아이콘으로 변경합니다.

//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 Maps 샘플에서 그리기 렌더링 스타일 변경을 참조하세요. 이 샘플의 소스 코드는 그리기 렌더링 스타일 변경 소스 코드를 참조하세요.