Class Overlay

미리 저장된 SourceData 를 기반으로 지정된 타입의 Overlay 를 지도에 그립니다.

Example

const overlayLayerOption = {
  type: 'heatmap',                                             // Overlay 타입
  source: 'heatmap-test',                                      // Overlay 를 지도에 그릴 때 사용할 데이터의 별칭
  paint: {                                                     // Overlay 렌더링 옵션
    heatmapRadius: 12,
    heatmapOpacity: 0.8,
    heatmapColor: [
      { density: 0.8, color: { r: 206, g: 0, b: 24 } },
      { density: 0.6, color: { r: 240, g: 154, b: 119 } },
      { density: 0.4, color: { r: 215, g: 226, b: 229 } },
      { density: 0.0, color: { r: 103, g: 182, b: 228 } },
    ],
  },
};
map.overlay.addLayer(overlayLayerOption); // Overlay 지도에 그리기
Copy

Overlay 를 렌더링할 때 사용할 SourceData 를 저장합니다. 각 SourceData 는 임의의 별칭으로 저장해줘야 합니다. map.overlay.addLayer() 호출 시, 해당 별칭으로 SourceData 를 찾아서 사용합니다. 또한, 전달한 url 을 로드해야 하므로, 메서드를 비동기로 호출해줘야 합니다.

Example

const overlaySourceOption = {
  type: 'geojson',                                                             // 데이터 형식
  data: 'https://assets.dabeeomaps.com/upload/geojson/heatmap.geojson',        // 로드할 데이터 url
};
await map.overlay.addSource('heatmap-test', overlaySourceOption);              // Overlay 데이터 저장
Copy

현재 지도위에 그려진 Overlay 를 제거합니다. 각각의 Overlay 는 map.overlay.addLayer() 호출 시점에 전달했던 SourceData 의 별칭으로 구분합니다. 따라서, 그려진 Overlay 를 제거할 때에도, 해당 SourceName 을 인자로 전달해줘야 합니다.

Example

const overlayLayerOption = {
  type: 'heatmap',                                             // Overlay 타입
  source: 'heatmap-test',                                      // Overlay 를 지도에 그릴 때 사용할 데이터의 별칭
  paint: {                                                     // Overlay 렌더링 옵션
    heatmapRadius: 12,
    heatmapOpacity: 0.8,
    heatmapColor: [
      { density: 0.8, color: { r: 206, g: 0, b: 24 } },
      { density: 0.6, color: { r: 240, g: 154, b: 119 } },
      { density: 0.4, color: { r: 215, g: 226, b: 229 } },
      { density: 0.0, color: { r: 103, g: 182, b: 228 } },
    ],
  },
};
map.overlay.addLayer(overlayLayerOption); // Overlay 지도에 그리기

setTimeout(() => {
  map.overlay.removeLayer('heatmap-test'); // Overlay 지도에서 제거하기
}, 2000);
Copy

이전에 저장했던 SourceData 를 제거합니다. SourceData 저장 시점에 사용했던 임의의 SourceName(별칭)을 인자로 전달하면, 해당하는 SourceData 를 찾아 제거합니다.

Example

const overlayLayerOption = {
  type: 'heatmap',                                             // Overlay 타입
  source: 'heatmap-test',                                      // Overlay 를 지도에 그릴 때 사용할 데이터의 별칭
  paint: {                                                     // Overlay 렌더링 옵션
    heatmapRadius: 12,
    heatmapOpacity: 0.8,
    heatmapColor: [
      { density: 0.8, color: { r: 206, g: 0, b: 24 } },
      { density: 0.6, color: { r: 240, g: 154, b: 119 } },
      { density: 0.4, color: { r: 215, g: 226, b: 229 } },
      { density: 0.0, color: { r: 103, g: 182, b: 228 } },
    ],
  },
};
map.overlay.addLayer(overlayLayerOption); // Overlay 지도에 그리기

setTimeout(() => {
  map.overlay.removeLayer('heatmap-test'); // Overlay 지도에서 제거하기
  map.overlay.removeSource('heatmap-test'); // Overlay 데이터 제거하기
}, 2000);
Copy