그리기 도구 모듈 사용

아티클
02/23/2024

Azure Maps 웹 SDK는 그리기 도구 모듈을 제공합니다. 이 모듈을 사용하면 마우스나 터치 화면 같은 입력 장치를 사용하여 맵에서 도형을 쉽게 그리거나 편집할 수 있습니다. 이 모듈의 핵심 클래스는 그리기 관리자입니다. 그리기 관리자는 맵에서 도형을 그리거나 편집하는 데 필요한 모든 기능을 제공합니다. 이는 직접 사용할 수 있으며, 사용자 지정 도구 모음 UI와 통합됩니다. 또한 기본 제공 클래스를 사용할 수 있습니다.

웹 페이지에서 그리기 도구 모듈 로드

새 HTML 파일을 만들고 평소와 같이 맵을 구현합니다.
Azure Maps 그리기 도구 모듈을 로드합니다. 다음 두 가지 방법 중 한 가지로 로드할 수 있습니다.
- Azure Maps 서비스 모듈의 전역적으로 호스트된 Azure Content Delivery Network 버전을 사용합니다. 파일의 <head> 요소에서 JavaScript 및 CSS에 대한 참조를 추가합니다.
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
```
- 또는 azure-maps-drawing-tools npm 패키지를 사용하여 Azure Maps 웹 SDK 소스 코드의 그리기 도구 모듈을 로컬로 로드한 다음 앱을 사용하여 호스트할 수 있습니다. 이 패키지에는 TypeScript 정의도 포함됩니다. 다음 명령을 실행합니다.
  
  npm install azure-maps-drawing-tools
  
  그런 다음, 원본 파일에서 JavaScript를 가져옵니다.
```
import * as drawing from "azure-maps-drawing-tools";
```
  또한 다양한 컨트롤이 올바르게 표시되도록 CSS를 포함해야 합니다. JavaScript 번들러를 사용하여 종속성을 번들로 묶고 코드를 패키지하는 경우 수행 방법에 대해 번들러 설명서를 참조하세요. Webpack의 경우 이 작업은 일반적으로 style-loader에서 사용할 수 있는 설명서와 style-loader 및 css-loader 조합을 통해 수행됩니다.
  
  시작하려면 style-loader 및 css-loader를 설치합니다.
```
npm install --save-dev style-loader css-loader
```
  원본 파일 내에서 atlas-drawing.min.css를 가져옵니다.
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  그런 다음, Webpack 구성의 모듈 규칙 부분에 로더를 추가합니다.
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  자세한 내용은 Azure Maps 맵 컨트롤 npm 패키지를 사용하는 방법을 참조하세요.

그리기 관리자 직접 사용

그리기 도구 모듈이 응용 프로그램에 로드되면 그리기 관리자를 통해 그리기와 편집 기능을 사용할 수 있습니다. 그리기 관리자를 인스턴스화하거나 drawingManager.setOptions() 함수를 대안으로 사용하는 동안 그리기 관리자 옵션을 지정할 수 있습니다.

그리기 모드 설정

다음 코드는 그리기 관리자의 인스턴스를 만들고, 그리기 모드 옵션을 설정합니다.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon"
});

다음 이미지는 DrawingManager의 그리기 모드의 예입니다. 맵에서 임의의 위치를 선택하여 다각형 그리기를 시작합니다.

A screenshot of a map showing central park in New York City where the drawing manager is demonstrated by drawing line.

상호 작용 유형 설정

그리기 관리자는 맵과 상호 작용하여 도형을 그릴 수 있는 세 가지 다른 방법을 지원합니다.

click - 마우스 또는 터치스크린을 클릭하면 좌표가 추가됩니다.
freehand - 맵에서 마우스 또는 터치스크린을 끌면 좌표가 추가됩니다.
hybrid - 마우스 또는 터치스크린을 클릭하거나 끌면 좌표가 추가됩니다.

다음 코드는 다각형 그리기 모드를 사용하고, 그리기 관리자가 freehand를 준수해야 하는 그리기 상호 작용 유형을 설정합니다.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon",
    interactionType: "freehand"
});

그리기 옵션 사용자 지정

이전 예제에서는 그리기 관리자를 인스턴스화하면서 그리기 옵션을 사용자 지정하는 방법을 설명했습니다. drawingManager.setOptions() 함수를 사용하여 그리기 관리자 옵션도 설정할 수 있습니다.

그리기 관리자 옵션을 사용하여 setOptions 함수에서 그리기 관리자에 대한 모든 옵션의 사용자 지정을 테스트할 수 있습니다. 이 샘플의 소스 코드는 그리기 관리자 옵션 소스 코드를 참조하세요.

A screenshot of a map of Seattle with a panel on the left showing the drawing manager options that can be selected to see the effects they make to the map.

도형을 편집 모드로 전환

기존 도형을 그리기 관리자 edit 함수에 전달하여 프로그래밍 방식으로 편집 모드로 전환합니다. 도형이 GeoJSON 기능인 경우 전달하기 전에 atls.Shape 클래스로 래핑합니다.

프로그래밍 방식으로 편집 모드에서 도형을 가져오려면 도면 관리자 모드를 idle로 설정합니다.

//If you are starting with a GeoJSON feature, wrap it with the atlas.Shape class.
var feature = { 
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
        },
    "properties":  {}
};

var shape = new atlas.Shape(feature);

//Pass the shape into the edit function of the drawing manager.
drawingManager.edit(shape);

//Later, to programmatically take shape out of edit mode, set mode to idle. 
drawingManager.setOptions({ mode: 'idle' });

참고 항목

도형이 그리기 관리자의 edit 함수에 전달되면 그리기 관리자가 유지 관리하는 데이터 원본에 추가됩니다. 도형이 이전에 다른 데이터 원본에 있었던 경우 해당 데이터 원본에서 제거됩니다.

최종 사용자가 보고 편집할 수 있도록 도형을 그리기 관리자에 추가하되 프로그래밍 방식으로 편집 모드로 전환하지 않으려면 그리기 관리자에서 데이터 원본을 검색하고 도형을 추가합니다.

//The shape(s) you want to add to the drawing manager so 
var shape = new atlas.Shape(feature);

//Retrieve the data source from the drawing manager.
var source = drawingManager.getSource();

//Add your shape.
source.add(shape);

//Alternatively, load in a GeoJSON feed using the sources importDataFromUrl function.
source.importDataFromUrl('yourFeatures.json');

다음 표에서는 다양한 유형의 도형 기능에서 지원하는 편집 유형을 나열합니다.