맵에 기호 계층 추가

아티클
02/26/2024

기호를 데이터 원본에 연결한 후 이를 사용해 지정된 점에서 아이콘 또는 텍스트를 렌더링합니다.

기호 계층은 WebGL을 사용하여 렌더링됩니다. 기호 계층을 사용하여 맵에 대용량 점 컬렉션을 렌더링합니다. HTML 표식에 비해 기호 계층은 더 나은 성능으로 맵에 많은 수의 점 데이터를 렌더링합니다. 그러나 기호 계층은 스타일에 대한 기존 CSS/HTML 요소를 지원하지 않습니다.

팁

기본적으로 기호 계층은 데이터 원본에 있는 모든 도형의 좌표를 렌더링합니다. 점 기하 도형만 렌더링하도록 레이어를 제한하려면 레이어의 filter 속성을 ['==', ['geometry-type'], 'Point'] 또는 ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]로 설정하거나, 원하는 경우 MultiPoint 기능을 포함하면 됩니다.

맵 이미지 스프라이트 관리자는 기호 계층에서 사용하는 사용자 지정 이미지를 로드합니다. 지원되는 이미지 형식은 다음과 같습니다.

JPEG
PNG
SVG
BMP
GIF(애니메이션 없음)

기호 계층 추가

맵에 기호 계층을 추가하려면 몇 가지 단계를 수행해야 합니다. 먼저 데이터 원본을 만들어 맵에 추가합니다. 기호 계층을 만듭니다. 그런 다음, 데이터 원본을 기호 계층에 전달하여 데이터 원본에서 데이터를 검색합니다. 마지막으로, 렌더링할 수 있도록 데이터를 데이터 원본에 추가합니다.

다음 코드는 맵이 로드된 후 맵에 추가되어야 하는 항목을 보여 줍니다. 이 샘플에서는 기호 계층을 사용하여 맵에 단일 점을 렌더링합니다.

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

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

맵에 추가할 수 있는 점 데이터 유형은 다음의 네 가지가 있습니다.

GeoJSON 점 기하 도형 - 이 개체는 점의 좌표만 포함하고, 그 외에는 아무것도 포함하지 않습니다. atlas.data.Point 도우미 클래스를 사용하여 이러한 개체를 쉽게 만들 수 있습니다.
GeoJSON MultiPoint 기하 도형 - 이 개체는 여러 점의 좌표를 포함하고, 그 외에는 아무것도 포함하지 않습니다. atlas.data.MultiPoint 도우미 클래스를 사용하여 이러한 개체를 쉽게 만들 수 있습니다.
GeoJSON 기능 - 이 개체는 모든 GeoJSON 기하 도형 및 기하 도형에 연결된 메타데이터를 포함하는 속성 집합으로 구성됩니다. atlas.data.Feature 도우미 클래스를 사용하여 이러한 개체를 쉽게 만들 수 있습니다.
atlas.Shape 클래스는 GeoJSON 기능과 비슷합니다. 둘 다 GeoJSON 기하 도형 및 기하 도형에 연결된 메타데이터를 포함하는 속성 집합으로 구성됩니다. GeoJSON 개체가 데이터 원본에 추가되는 경우, 계층에서 쉽게 렌더링할 수 있습니다. 그러나 해당 GeoJSON 개체의 좌표 속성이 업데이트되는 경우, 데이터 원본과 맵이 변경되지 않습니다. JSON 개체에 업데이트를 트리거하는 메커니즘이 없기 때문입니다. 도형 클래스는 포함된 데이터를 업데이트하는 함수를 제공합니다. 변경 내용이 적용되면 데이터 원본과 맵이 자동으로 알림을 받고 업데이트됩니다.

다음 코드 샘플에서는 GeoJSON 점 기하 도형을 만들어 atlas.Shape 클래스에 전달함으로써 쉽게 업데이트할 수 있도록 합니다. 맵의 중심은 처음에 기호를 렌더링하는 데 사용됩니다. 클릭 이벤트가 맵에 추가됩니다. 이렇게 하면 마우스 좌표가 도형 setCoordinates 함수에서 사용됩니다. 마우스 좌표는 클릭 이벤트가 발생했을 때 기록됩니다. 그러면 setCoordinates에서 맵의 기호 위치를 업데이트합니다.

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

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            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);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

A screenshot of map with a pin added using the symbol layer.

팁

기본적으로 기호 계층은 겹치는 기호를 숨겨서 기호 렌더링을 최적화합니다. 확대하면 숨겨진 기호가 표시됩니다. 이 기능을 사용하지 않도록 설정하고 모든 기호를 항상 렌더링하려면, iconOptions 옵션의 allowOverlap 속성을 true로 설정합니다.

기호 계층에 사용자 지정 아이콘 추가

기호 계층은 WebGL을 사용하여 렌더링됩니다. 아이콘 이미지와 같은 이러한 모든 리소스는 WebGL 컨텍스트에 로드해야 하기 때문입니다. 이 샘플에서는 맵 리소스에 사용자 지정 아이콘을 추가하는 방법을 보여 줍니다. 이 아이콘은 맵에서 사용자 지정 기호를 사용하여 점 데이터를 렌더링하는 데 사용됩니다. 기호 계층의 textField 속성에는 식을 지정해야 합니다. 이 경우, 온도 속성을 렌더링하려고 합니다. 온도는 숫자이므로 문자열로 변환해야 합니다. 또한 "° F"를 추가하고자 합니다. 식을 사용하여 이 연결을 수행할 수 있습니다(['concat', ['to-string', ['get', 'temperature']], '°F']).

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

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

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/showers.png').then(function () {

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

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}