단순 데이터 레이어 추가

공간 IO 모듈은 SimpleDataLayer 클래스를 제공합니다. 이 클래스를 사용하면 지도에서 스타일이 지정된 기능을 쉽게 렌더링할 수 있습니다. 스타일 속성을 가진 데이터 세트와 혼합 기하학 유형을 포함하는 데이터 세트를 렌더링할 수도 있습니다. 단순 데이터 레이어는 여러 렌더링 레이어를 래핑하고 스타일 식을 사용하여 이 기능을 수행합니다. 스타일 식은 이러한 래핑된 레이어 내에서 기능의 공통 스타일 속성을 검색합니다. atlas.io.read 함수 및 atlas.io.write 함수는 이러한 속성을 사용하여 스타일을 읽고 지원되는 파일 형식으로 씁니다. 지원되는 파일 형식에 속성을 추가한 후에는 다양한 용도로 파일을 사용할 수 있습니다. 예를 들어 파일을 사용하여 지도에 스타일이 지정된 기능을 표시할 수 있습니다.

스타일링 기능 외에도 SimpleDataLayer는 팝업 템플릿을 사용하여 기본 제공 팝업 기능을 제공합니다. 기능을 선택하면 팝업이 표시됩니다. 원하는 경우 기본 팝업 기능을 사용하지 않도록 설정할 수 있습니다. 이 레이어는 클러스터형 데이터도 지원합니다. 클러스터를 클릭하면 맵이 클러스터를 확대하여 개별 포인트 및 하위 클러스터로 확장됩니다.

SimpleDataLayer 클래스는 여러 기하학 유형과 기능에 적용되는 많은 스타일이 포함된 대량 데이터 세트에서 사용하기 위한 것입니다. 이 클래스를 사용하는 경우 스타일 식이 포함된 6개 레이어의 오버헤드를 추가합니다. 따라서 핵심 렌더링 레이어를 사용하는 것이 더 효율적일 수 있습니다. 예를 들어 핵심 레이어를 사용하여 기능에 몇 가지 기하학 유형 및 스타일을 렌더링합니다.

단순 데이터 레이어 사용

SimpleDataLayer 클래스는 다른 렌더링 레이어가 사용되는 것과 같은 방식으로 사용됩니다. 다음 코드는 맵에서 단순 데이터 계층을 사용하는 방법을 보여 줍니다.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

다음 코드 조각은 간단한 데이터 계층을 사용하여 온라인 원본의 데이터를 참조하는 방법을 보여 줍니다.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.967605, 40.780452],
    zoom: 12,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    },
  });    

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    const dataSet = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        },
        "properties": {
            "color": "red"
        }
    };
    
    loadDataSet(dataSet);

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

데이터 원본에 기능을 추가하면 간단한 데이터 계층은 해당 데이터를 렌더링하는 가장 좋은 방법을 고려합니다. 개별 기능에 대한 스타일을 기능 속성으로 설정할 수 있습니다.

다음 코드에서는 color 속성이 red로 설정된 GeoJSON 포인트 기능을 보여 줍니다.

이 샘플 코드는 간단한 데이터 계층을 사용하여 점 기능을 렌더링하고 다음과 같이 표시됩니다.

단순 데이터 레이어의 실제 강력한 기능은 다음과 같은 경우에 나타납니다.

• 데이터 원본에 여러 가지 유형의 기능이 있는 경우
• 데이터 세트의 기능에 개별적으로 설정된 여러 가지 스타일 속성이 있는 경우
• 데이터 세트에 정확하게 포함된 내용이 확실하지 않을 경우

예를 들어 XML 데이터 피드를 구문 분석할 때 기능의 정확한 스타일 및 기하학 유형을 모를 수 있습니다. 단순 데이터 계층 옵션 샘플에서는 KML 파일의 기능을 렌더링하여 단순 데이터 레이어의 강력한 기능을 보여 줍니다. 또한 단순 데이터 레이어 클래스에서 제공하는 다양한 옵션을 보여 줍니다. 이 샘플의 소스 코드는 GitHub의 Azure Maps 코드 샘플에서 Simple data layer options.html을 참조하세요.

지원되는 기본 스타일 속성

앞서 설명한 대로 단순 데이터 레이어는 거품형, 기호, 선, 다각형 및 돌출 다각형의 몇 가지 핵심 렌더링 레이어를 래핑합니다. 그런 다음, 식을 사용하여 개별 기능에 대해 유효한 스타일 속성을 검색합니다.

Azure Maps 및 GitHub 스타일 속성은 지원되는 속성 이름의 두 가지 주요 세트입니다. 다양한 Azure 맵 레이어 옵션의 속성 이름 대부분은 단순 데이터 레이어에서 기능의 스타일 속성으로 지원됩니다. GitHub에서 일반적으로 사용되는 스타일 속성 이름을 지원하기 위해 일부 레이어 옵션에 식이 추가되었습니다. GitHub의 GeoJSON 맵 지원은 이러한 속성 이름을 정의하며, 플랫폼 내에서 저장되고 렌더링되는 GeoJSON 파일의 스타일을 지정하는 데 사용됩니다. marker-symbol 스타일링 속성을 제외한 모든 GitHub의 스타일링 속성은 단순 데이터 레이어에서 지원됩니다.

판독기가 덜 일반적인 스타일 속성을 발견하는 경우 가장 가까운 Azure Maps 스타일 속성으로 변환합니다. 또한 단순 데이터 레이어의 getLayers 함수를 사용하여 레이어의 옵션을 업데이트하면 기본 스타일 식이 재정의될 수 있습니다.

다음 섹션에서는 단순 데이터 레이어에서 지원되는 기본 스타일 속성에 대해 자세히 설명합니다. 지원되는 속성 이름의 순서도 속성의 우선 순위입니다. 같은 레이어 옵션에 대해 두 개의 스타일 속성이 정의된 경우 목록의 첫 번째 속성이 우선 순위가 높습니다. 색은 HEX, RGB, RGBA, HSL, HSLA 또는 명명된 색 값 등 CSS3 색 값이 될 수 있습니다.

거품형 레이어 스타일 속성

기능이 Point 또는 MultiPoint이고 기능에 포인트를 기호로 렌더링하는 사용자 지정 아이콘으로 사용되는 image 속성이 없는 경우, 기능이 BubbleLayer와 함께 렌더링됩니다.

[1] size 및 scale 값은 스칼라 값으로 간주되며 8을 곱합니다.

[2] GitHub marker-size 옵션을 지정하면 다음 값이 반경에 사용됩니다.

클러스터도 거품형 레이어를 사용하여 렌더링됩니다. 기본적으로 클러스터의 반경은 16으로 설정됩니다. 다음 표에 정의된 대로 클러스터의 색은 클러스터의 포인트 수에 따라 달라집니다.

기호 스타일 속성

기능이 Point 또는 MultiPoint이고 기능에 포인트를 기호로 렌더링하는 사용자 지정 아이콘으로 사용되는 image 속성이 없는 경우, 기능이 SymbolLayer와 함께 렌더링됩니다.

[1] GitHub marker-size 옵션을 지정하면 다음 값이 아이콘 크기 옵션에 사용됩니다.

포인트 기능이 클러스터인 경우 point_count_abbreviated 속성은 텍스트 레이블로 렌더링됩니다. 이미지가 렌더링되지 않습니다.

선 스타일 속성

기능이 LineString, MultiLineString, Polygon 또는 MultiPolygon인 경우 기능이 LineLayer로 렌더링됩니다.

다각형 스타일 속성

기능이 Polygon 또는 MultiPolygon이고 기능에 height 속성이 없거나 height 속성이 0인 경우 이 기능은 PolygonLayer를 사용하여 렌더링됩니다.

돌출 다각형 스타일 속성

기능이 Polygon 또는 MultiPolygon이고 0보다 큰 값을 갖는 height 속성이 있는 경우 이 기능은 PolygonExtrusionLayer를 사용하여 렌더링됩니다.

다음 단계

이 문서에서 사용된 클래스 및 메서드에 대해 자세히 알아봅니다.

맵에 추가할 더 많은 코드 예제를 보려면 다음 문서를 참조하세요.