1. 설치

npm install @jykim0507/hd-map
npm install maplibre-gl

2. 빠른 시작

• 가장 기본적인 지도 초기화 흐름.
• 아래 예시를 기준으로 필요한 옵션 추가

<template>
  <div v-if="isLoading" class="loading">{{ progress }}%</div>
  <!-- 반드시 높이 지정 -->
  <div id="map" style="width: 100%; height: 100vh;" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMap } from '@jykim0507/hd-map'
import '@jykim0507/hd-map/style'

const progress = ref(0)
const isLoading = ref(true)

const mapLib = useMap({
  pmtilesUrl: '/output.pmtiles',

  // 로딩 진행률 콜백 (선택)
  onProgress: (percent) => {
    progress.value = percent
  },

  // 지도 초기화 완료 콜백 (선택)
  onMapReady: () => {
    isLoading.value = false
  },

  // PMTiles 백그라운드 파싱 완료 콜백(선택)
  // initMap 완료 직후가 아닌, 파싱이 끝난 뒤에 호출됨
  onWorkerReady: ({ a2LinkData, b1SignData, b3SurfaceData }) => {
    console.log('파싱 완료:', a2LinkData)
  },
})

const { initMap, addLinkLayer } = mapLib

onMounted(async () => {
  // [필수] 지도 초기화 (반드시 await 사용)
  await initMap('map', {
    center: [126.8312, 37.1995],
    zoom: 18,
  })

  // initMap 완료 후 레이어 추가
  addLinkLayer()
})
</script>

3. 주의사항

컨테이너 높이 필수

반드시 높이를 지정

<!-- ❌ 높이 없으면 지도 안 뜸 -->
<div id="map" />

<!-- ✅ 높이 지정 -->
<div id="map" style="width: 100%; height: 100vh;" />

레이어는 initMap 완료 후 추가

• initMap() 완료 이전에 레이어를 추가해도 동작하지 않음

// ❌ initMap 완료 전 호출 - 동작하지 않음
addLinkLayer()
await initMap('map')

// ✅ 반드시 initMap 완료 후
await initMap('map')
addLinkLayer()

PMTiles 파싱 타이밍

• createSignLayer(), addB3Layer() 는 내부적으로 Worker 파싱 완료까지 자동 대기
• Worker 파싱 중에도 나머지 레이어(addA2Layer 등)는 즉시 추가 가능
• 파싱 데이터(a2LinkData 등)는 onWorkerReady 콜백 이후 접근 권장

4. useMap options

• useMap(options)에 전달하는 옵션 목록

Props (속성)

| Prop | 타입 | 기본값 | 설명 | |-----------------|----------|-----------------------|---------------------------------------------------------------------------| | pmtilesUrl | String | 필수 | PMTiles 파일의 정적 URL 경로 | | center | Array | [126.8312, 37.1995] | 초기 중심 좌표 [경도(lng), 위도(lat)] | | zoom | Number | 18 | 초기 줌 레벨 | | pitch | Number | 0 | 초기 지도 기울기 (0~85) | | bearing | Number | 0 | 초기 지도 방위각/회전 각도 | | theme | String | dark | 지도 테마 설정 | | onProgress | Function | - | 로딩 진행률 콜백 (percent: number) => void | | onMapReady | Function | - | 지도 로드 완료 콜백 (map: MapInstance) => void | | onWorkerReady | Function | - | PMTiles 파싱 완료 콜백 ({ b1SignData, b3SurfaceData, a2LinkData }) => void |

5. 지도 라이프 사이클

초기화 (initMap)

• 지도를 렌더링할 컨테이너 ID를 넘겨 지도를 초기화
• 반드시 await를 사용

await initMap(containerId, options?)

| 인자 | 타입 | 필수 | 설명 | |---------------|--------|------|------------------------| | containerId | String | ✅ | 지도를 렌더링할 div의 id | | options | Object | - | 아래 옵션 참고 |

initMap 옵션

| 옵션 | 타입 | 기본값 | 설명 | |-------------------|---------|-----------------------|-------------------------------| | theme | String | 'dark' | 지도 테마('dark'|'light' )| | center | Array | [126.8312, 37.1995] | 초기 중심 좌표 [lng, lat] | | zoom | Number | 18 | 초기 줌 레벨 | | pitch | Number | 0 | 초기 피치 (0~85) | | bearing | Number | 0 | 초기 방위각 (0~360) | | minZoom | Number | 0 | 최소 줌 레벨 | | maxZoom | Number | 22 | 최대 줌 레벨 |

사용 예시

await initMap('map', {
  theme: 'light',
  center: [126.8312, 37.1995],
  zoom: 18,
  pitch: 45,
  bearing: 90,
})

자원 해제 (Cleanup)

• 지도 인스턴스와 등록된 모든 자원(이벤트 리스너, 마커, 이미지 등)을 해제

cleanup()

• 일반적인 경우: 컴포넌트 언마운트 시 onUmounted 내부에서 자동 해제되므로 별도 호출이 필요 없음
• 수동 호출이 필요한 경우: 컴포넌트 언마운트 이전에 지도를 파기해야 하는 특수한 상황에서만 직접 호출

| 함수 | 인자 타입 | 설명 | |-------------|-----------|------------------------------------------| | cleanup() | - | 지도 인스턴스 및 등록된 모든 자원 수동 해제 |

const handleDestroy = () => {
  cleanup()
}

커스텀 레이어(map.addLayer()로 직접 추가한 레이어)도 cleanup() 대상에 포함 (내부에서 map.remove() 호출하여 map 인스턴스에 추가된 모든 레이어 제거)

6. 레이어 제어

• 모든 레이어 메서드는 await initMap() 완료 이후에 호출
• 이미 존재하는 레이어를 추가하거나, 없는 레이어를 삭제해도 에러가 발생하지 않음
• 삭제한 레이어를 복수하려면 addXxx() 메서드로 재추가

A. 도로 네트워크

| 추가 메서드 | 삭제 메서드 | 설명 | 레이어명 | |----------------------|-------------------------|------------------------------|----------------------| | addNodeLayer() | removeNodeLayer() | 노드 | A1_NODE | | addRoadBaseLayer() | removeRoadBaseLayer() | 도로 밑바탕 | A2_LINK | | addLinkLayer() | removeLinkLayer() | 도로 중심선 | A2_LINK | | addKind1Layer() | removeKind1Layer() | 특수 주행 구간 (터널, 교량 등) | A3_DRIVEWAYSECTION | | addKind7Layer() | removeKind7Layer() | 자율주행 금지 구간 | A3_DRIVEWAYSECTION | | addSidewalkLayer() | removeSidewalkLayer() | 보도 | A4_SUBSIDIARYSECTION | | addBicycleLayer() | removeBicycleLayer() | 자전거 도로 | A4_SUBSIDIARYSECTION |

B. 교통 표지 및 노면 표시

| 추가 메서드 | 삭제 메서드 | 설명 | 레이어명 | |-------------------------|----------------------------|-----------------|--------------------| | createSignLayer() | deleteSignLayer() | 안전표지 아이콘 | B1_SAFETYSIGN | | addSurfaceLineLayer() | removeSurfaceLineLayer() | 노면선 표시 | B2_SURFACELINEMARK | | createArrowLayer() | deleteArrowLayer() | 진행 방향 화살표 | B3_SURFACEMARK | | addCrosswalkLayer() | removeCrosswalkLayer() | 횡단보도 | B3_SURFACEMARK |

createArrowLayer()/deleteArrowLayer() (진행 방향 화살표, B3_SURFACEMARK)는 A2-B3 LinkId 불인치로 인해 비활성화 상태

C. 도로 시설물

| 추가 메서드 | 삭제 메서드 | 설명 | 레이어명 | |-----------------------------|--------------------------------|--------------------|-----------------------------| | addVehicleLightLayer() | removeVehicleLightLayer() | 차량용 신호등 | C1_TRAFFICLIGHT | | addPedestrianLightLayer() | removePedestrianLightLayer() | 보행자/자전거 신호등 | C1_TRAFFICLIGHT | | addEtcLightLayer() | removeEtcLightLayer() | 기타 신호등 |C1_TRAFFICLIGHT | | addGuardrailLayer() | removeGuardrailLayer() | 차량방호안전시설 | C3_VEHICLEPROTECTIONSAFETY | | addSpeedbumpLayer() | removeSpeedbumpLayer() | 과속방지턱 | C4_SPEEDBUMP | | addHeightBarrierLayer() | removeHeightBarrierLayer() | 높이장애물 | C5_HEIGHTBARRIER | | addPostPointLayer() | removePostPointLayer() | 지주 | C6_POSTPOINT | | addStationLayer() | removeStationLayer() | 버스 정류장 | - |

레이어 그룹 단위 제어

• 관련 레이어를 한 번에 추가/삭제 할 수 있는 그룹 메서드

| 추가 메서드 | 삭제 메서드 | 포함 레이어 | |----------------|-------------------|--------------------------------------------------------| | addA2Layer() | removeA2Layer() | RoadBaseLayer, LinkLayer | | addA3Layer() | removeA3Layer() | Kind1Layer, Kind7Layer | | addA4Layer() | removeA4Layer() | SideWalkLayer, BicycleLayer | | addB3Layer() | removeB3Layer() | ArrowLayer, CrosswalkLayer (arrowLayer는 현재 비활성화) | | addC1Layer() | removeC1Layer() | VehicleLightLayer, PedestrianLightLayer, EtcLightLayer |

7. 아이콘 마커

• 이미지를 지도 위에 마커로 추가

addIcon

const { imageId, sourceId, layerId } = await addIcon(imageUrl, options)

addIcon 인자

| 인자 | 타입 |필수 | 기본값 | 설명 | |------------------|----------|-----|-----------|-----------------------------------------------------------------------------| | imageUrl | String | ✅ | - | 아이콘 이미지 경로 | | options.id | String | ✅ | - | 아이콘 고유 ID (source·layer 식별에 사용) | | options.lngLat | Array | ✅ | - | 마커 위치 [lng, lat] | | options.size | Number | ❌ | 0.25 | 아이콘 크기 배율 | | options.anchor | String | ❌ | 'bottom' | 아이콘 기준점 ('bottom' | 'center' | 'top' | 'left' | 'right') |

반환값

| 키 | 타입 | 설명 | |------------|----------|-------------------------------------| | imageId | String | 등록된 이미지 ID (icon-image-{id}) | | sourceId | String | 등록된 소스 ID (icon-source-{id}) | | layerId | String | 등록된 레이어 ID (icon-layer-{id}) |

removeIcon/ removeAllIcons

| 함수 | 인자 | 설명 | |------------------|----------------------------------|-----------------------| | removeIcon(id) | id-addIcon의 options.id 값 | 특정 아이콘 마커 삭제 | | removeAllIcons | - | 추가된 모든 아이콘 삭제 |

addCustomImage

• map.addLayer()로 직접 레이어를 추가할 때 icon-image로 참조할 이미지를 등록

await addCustomImage(url, id)

| 인자 | 타입 | 필수 | 설명 | |-------|--------|------|----------------------------------------------| | url | String | ✅ | 이미지 경로 또는 URL | | id | String | ✅ | 이미지 고유 ID (레이어에서 icon-image로 참조) |

사용 예시

import marker from '@/icons/marker.png';

onMounted(async () => {
  await initMap('map')

  await addIcon(marker, {
    id: 'my-marker',
    lngLat: [126.9784, 37.5665],
    size: 0.3,
    anchor: 'bottom'
  })
})

8. 파싱 데이터 (onWorkerReady)

• PMTiles 파일은 initMap() 완료 후 백그라운드 Worker에서 비동기로 파싱
• 파싱이 완료되면, onWorkerReady 콜백이 호출되며, 이 시점부터 전체 데이터에 접근할 수 있음

let a2Data = ref(null)

const mapLib = useMap({
  pmtilesUrl: '/output.pmtiles',
  onWorkerReady: ({
    a2LinkData,     // GeoJSON FeatureCollection - A2 도로 링크 전체
    b1SignData,     // GeoJSON FeatureCollection - B1 안전표지 전체
    b3SurfaceData,  // GeoJSON FeatureCollection - B3 노면표시 전체
  }) => {
    a2Data.value = a2LinkData
  }
})

| 속성 | 타입 | 설명 | |-----------------|---------------------|-------------------------------| | a2LinkData | FeatureCollection | a2_link 전체 GeoJSON 데이터 | | b1SignData | FeatureCollection | b1_sign 전체 GeoJSON 데이터 | | b3SurfaceData | FeatureCollection | b3_surface 전체 GeoJSON 데이터 |

세 데이터는 모두 현재 뷰포트에 관계없이 전체 링크 데이터를 포함 querySourceFeatures와 달리 화면 밖 데이터도 접근 가능

a2LinkData - 도로 링크 (A2_LINK)

• 도로 중심선 벡터 데이터. 각 Feature는 하나의 도로 링크(구간)를 나타냄
• geometry 타입: MultiLineString (3D 좌표 - 경도, 위도, 고도)

properties 필드

| 필드 | 타입 | 설명 | |--------------|--------|--------------------------------------| | ID | String | 링크 고유 ID (예: A2249C500030) | | AdminCode | String | 행정구역 코드 | | RoadRank | String | 도로 등급 (아래 코드표 참고) | | RoadType | String | 도로 유형 (일반/터널/교량 등) | | RoadNo | String | 도로 번호 (없으면 null) | | LinkType | String | 링크 유형 (일반/연결로/회전교차로 등) | | LaneNo | Number | 차로 수 | | R_LinkID | String | 우측 대향 링크 ID (없으면 null) | | L_LinkID | String | 좌측 대향 링크 ID (없으면 null) | | FromNodeID | String | 시작 노드 ID | | ToNodeID | String | 종료 노드 ID | | Length | Number | 링크 길이 (단위: m) | | ITSLinkID | String | ITS 연계 링크 ID | | Maker | String | 데이터 제작사 | | UpdateDate | String | 최종 수정일 (YYYYMMDD) | | Version | String | 데이터 버전 |

RoadRank 코드표

| 값 | 의미 | |----|-------------| | 1 | 고속도로 | | 2 | 도시고속도로 | | 3 | 국도 | | 4 | 국가지원지방도 | | 5 | 지방도 | | 6 | 시군도 | | 8 | 기타 |

RoadType 코드표

| 값 | 의미 | |----|--------------| | 1 | 일반도로 | | 2 | 지하차도 (하부) | | 3 | 교량 (상부) | | 4 | 터널 (내부) | | 5 | 고가도로 |

LinkType 코드표

| 값 | 의미 | |----|----------------| | 1 | 일반 | | 3 | 교차로 내부 | | 5 | 회전교차로 | | 6 | 연결로 (IC/JC) | | 7 | 유턴 | | 8 | 비도로구간 |

접근 예시

// 전체 링크 순회
a2LinkData.features.forEach(feature => {
  const { ID, LaneNo, RoadRank, Length, FromNodeID, ToNodeID } = feature.properties
  const coordinates = feature.geometry.coordinates[0]  // [[lng, lat, alt], ...]
})
 
// 특정 링크 ID로 조회
const link = a2LinkData.features.find(f => f.properties.ID === 'A2249C500030')
 
// 2차선 이상 도로만 필터
const multiLane = a2LinkData.features.filter(f => f.properties.LaneNo >= 2)

8.2 b1SignData — 안전표지 (B1_SAFETYSIGN)

• 도로변 안전표지판 데이터. 각 Feature는 표지판 하나의 면적(폴리곤)을 나타냄
• geometry 타입: MultiPolygon (3D 좌표 — 표지판의 실제 설치 위치와 높이)

properties 필드

| 필드 | 타입 | 설명 | |-------------|--------|-----------------------------------------| | ID | String | 표지판 고유 ID (예: B1249C500095) | | AdminCode | String | 행정구역 코드 | | Type | String | 표지 유형 (아래 코드표 참고) | | LinkID | String | 연결된 도로 링크 ID (a2LinkData.ID 참조) | | Ref_Lane | Number | 참조 차로 번호 | | PostID | String | 지주(C6) ID | | Maker | String | 데이터 제작사 | | UpdateDate| String | 최종 수정일 (YYYYMMDD) | | Version | String | 데이터 버전 |

Type 코드표

| 값 | 의미 | |----|---------| | 1 | 주의표지 | | 2 | 규제표지 | | 3 | 지시표지 | | 4 | 보조표지 | | 5 | 노면표시 |

접근 예시

// 규제표지(Type=2)만 필터
const regulatory = b1SignData.features.filter(f => f.properties.Type === '2')
 
// 특정 링크에 속한 표지판 조회
const signsOnLink = b1SignData.features.filter(f => f.properties.LinkID === 'A2249C500030')
 
// 표지판 중심 좌표 (폴리곤 첫 번째 꼭짓점)
const lng = feature.geometry.coordinates[0][0][0][0]
const lat = feature.geometry.coordinates[0][0][0][1]

8.3 b3SurfaceData — 노면표시 (B3_SURFACEMARK)

• 도로 노면에 그려진 표시(화살표, 횡단보도, 속도제한 등) 데이터
• geometry 타입: MultiPolygon (3D 좌표 — 노면 표시의 실제 면적)

properties 필드

| 필드 | 타입 | 설명 | |-------------|--------|-----------------------------------------| | ID | String | 노면표시 고유 ID (예: B3249C501977) | | AdminCode | String | 행정구역 코드 | | Type | String | 표시 유형 (1: 노면표시) | | Kind | String | 표시 종류 (아래 코드표 참고) | | LinkID | String | 연결된 도로 링크 ID (a2LinkData.ID 참조) | | Maker | String | 데이터 제작사 | | UpdateDate| String | 최종 수정일 (YYYYMMDD) | | Version | String | 데이터 버전 |

Kind 코드표 (주요)

| 값 | 의미 | |------|---------------| | 5321 | 횡단보도 | | 533 | 자전거 횡단도 | | 5371 | 속도제한 표시 | | 5381 | 횡단보도 표시 | | 5431 | 정지선 |

접근 예시

// 횡단보도(Kind=5321)만 필터
const crosswalks = b3SurfaceData.features.filter(f => f.properties.Kind === '5321')
 
// 특정 링크의 노면표시 조회
const marksOnLink = b3SurfaceData.features.filter(f => f.properties.LinkID === 'A2249C502200')

8.4 데이터 간 연관관계

• b1SignData / b3SurfaceData의 LinkID는 a2LinkData의 ID를 참조
• b1SignData의 PostID는 지주(C6_POSTPOINT) ID를 참조

const targetLinkId = 'A2249C500030'
 
// 해당 링크 정보
const link = a2LinkData.features.find(f => f.properties.ID === targetLinkId)
 
// 해당 링크에 설치된 안전표지
const signs = b1SignData.features.filter(f => f.properties.LinkID === targetLinkId)
 
// 해당 링크의 노면표시
const marks = b3SurfaceData.features.filter(f => f.properties.LinkID === targetLinkId)

9. 커스텀 레이어 추가

• mapLib.map으로 MapLibre 인스턴스에 직접 접근해 레이어를 추가할 수 있음
• mapLib.map은 await initMap() 완료 이후에만 유효
• 내장 소스 ID martin-hd-map을 재사용하면 별도 파싱 없이 원하는 데이터를 바로 필터링해 표출 가능

9.1 기본 패턴

onMounted(async () => {
  await initMap('map')
 
  // ① GeoJSON 소스를 직접 추가하는 경우
  mapLib.map.addSource('my-source', {
    type: 'geojson',
    data: { type: 'FeatureCollection', features: [] },
  })
  mapLib.map.addLayer({
    id: 'my-layer',
    type: 'circle',
    source: 'my-source',
    paint: { 'circle-radius': 6, 'circle-color': '#ff0000' },
  })
 
  // ② martin-hd-map 소스 재사용 (소스 추가 불필요)
  mapLib.map.addLayer({
    id: 'my-layer',
    type: 'fill',
    source: 'martin-hd-map',
    'source-layer': 'a3_drivewaysection',
    filter: ['==', ['get', 'Kind'], '1'],
    paint: { 'fill-color': '#ff0000', 'fill-opacity': 0.4 },
  })
})

// 레이어 존재 여부 확인 후 추가 (중복 오류 방지)
if (!mapLib.map.getLayer('my-layer')) {
  mapLib.map.addLayer({ id: 'my-layer', ... })
}
 
// 커스텀 레이어/소스 수동 삭제
mapLib.map.removeLayer('my-layer')
mapLib.map.removeSource('my-source')  // GeoJSON 소스만 해당

9.2 PMTiles 소스 레이어 목록

소스 ID: martin-hd-map (initMap 시 자동 등록)

현재 tb_ms_link_add 소스 레이어가 a2_link 대신 임시로 사용 중입니다.
기존 데이터와의 연계 관계 없이 독립적으로 사용되는 임시 데이터입니다.

| sourceLayer | 권장 type | 설명 | 필터 필드 | |------------------------------|-----------|----------------------|-------------------| | a1_node | circle | 노드 (교차점) | - | | a2_link | line | 도로 중심선 | LaneNo, RoadRank | | a2_roadbase_buffer | fill | 도로 면적 버퍼 | - | | a2_link_id | line | 링크 ID 전용 레이어 | - | | a3_drivewaysection | fill | 특수 주행 구간 | Kind | | a4_subsidiarysection | fill | 보도 / 자전거도로 | SubType | | b1_safetysign | fill | 안전표지 | Type | | b2_surfacelinemark | line | 노면 차선 | Type | | b3_surfacemark | fill | 노면표시 (횡단보도 등) | Type, Kind | | c1_trafficlight | circle | 신호등 | Type | | c3_vehicleprotectionsafety | line | 차량방호안전시설 | - | | c4_speedbump | fill | 과속방지턱 | - | | c5_heightbarrier | line | 높이장애물 | - | | c6_postpoint | circle | 지주 | - | | tb_ms_station | circle | 버스 정류장 | - |

MapLibre 인스턴스 직접 제어

mapLib.map으로 maplibre 인스턴스에 직접 접근

자세한 내용은 maplibre 공식 문서 참고

카메라 제어

| 함수명 | 기능 | 매개변수 | |-----------------------|-----------------------------|----------------------------------------------| | setCenter(center) | 지도 중심 좌표 이동 | [lng, lat] | | getCenter() | 현재 지도 중심 좌표 반환 | - | | setZoom(zoom) | 줌 레벨 설정 | Number | | getZoom() | 현재 줌 레벨 반환 | - | | setPitch(pitch) | 지도 기울기 설정 | Number (0~85) | | getPitch() | 현재 기울기 반환 | - | | setBearing(bearing) | 지도 방위각 설정 | Number (0~360) | | getBearing() | 현재 방위각 반환 | - | | flyTo(options) | 애니메이션과 함께 카메라 이동 | { center, zoom, bearing, pitch, duration } | | easeTo(options) | 부드럽게 카메라 이동 | { center, zoom, bearing, pitch, duration } | | jumpTo(options) | 애니메이션 없이 카메라 이동 | { center, zoom, bearing, pitch } |

mapLib.map.setCenter([126.8312, 37.1995])
mapLib.map.setZoom(18)
mapLib.map.flyTo({ center: [126.8312, 37,1995], zoom: 18, duration: 1500})

마커

| 함수명 | 기능 | 매개변수 | |---------------------------|-----------------|------------------------| | new maplibregl.Marker() | 마커 생성 | { color, draggable } | | .setLngLat([lng, lat]) | 마커 위치 설정 | [lng, lat] | | .addTo(map) | 지도에 마커 추가 | map 인스턴스 | | .remove() | 마커 삭제 | - |

import maplibregl from 'maplibre-gl'

const marker = new maplibregl.Marker({ color: '#ff0000' })
  .setLngLat([126.8312, 37.1995])
  .addTo(mapLib.map)

// 삭제
marker.remove()

팝업

| 함수명 | 기능 | 매개변수 | |--------------------------|-----------------|----------------------------------| | new maplibregl.Popup() | 팝업 생성 | { closeButton, closeOnClick } | | .setLngLat([lng, lat]) | 팝업 위치 설정 | [lng, lat] | | .setHTML(html) | 팝업 내용 설정 | String | | .addTo(map) | 지도에 팝업 추가 | map 인스턴스 |

import maplibregl from 'maplibre-gl'

new maplibregl.Popup({ closeButton: false })
  .setLngLat([126.8312, 37.1995])
  .setHTML('<p>팝업 내용</p>')
  .addTo(mapLib.map)

레이어/소스

| 함수명 | 기능 | 매개변수 | |--------------------------------------|------------------------|---------------------------| | addSource(id, source) | 데이터 소스 추가 | String, Object | | removeSource(id) | 데이터 소스 삭제 | String | | getSource(id) | 소스 존재 여부 확인 | String | | addLayer(layer) | 레이어 추가 | Object | | removeLayer(id) | 레이어 삭제 | String | | getLayer(id) | 레이어 존재 여부 확인 | String | | setLayoutProperty(id, name, value) | 레이어 layout 속성 변경 | String, String, Any | | setPaintProperty(id, name, value) | 레이어 paint 속성 변경 | String, String, Any |