VectorSource, VectorLayer

이 둘은 OpenLayers에서 쓰이는 클라스(Class)로 구현되어 있습니다. 특히 마커를 표현하려면 두 클라스로 구현한 객체들의 메소드와 속성을 사용하여 기능을 구현합니다.

1. VectorSource: 이 클래스는 벡터 데이터를 저장하는 소스로 사용됩니다. 벡터 데이터는 지리적 객체들을 포함할 수 있으며, 이 데이터는 GeoJSON, KML 등 다양한 형식에서 로드할 수 있습니다.
2. VectorLayer: 이 클래스는 VectorSource를 사용하여 지도 위에 벡터 데이터를 표시하는 레이어를 만듭니다. 레이어는 지도 상의 시각적 표현을 담당하며, 스타일링, 이벤트 처리 등의 기능을 제공합니다.

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

// 벡터 소스 생성
const vectorSource = new VectorSource({
  markers.forEach((marker) => {
      const markerFeature = new Feature({
        geometry: new Point(fromLonLat(marker.position)),
      });
      markerFeature.setStyle(
        new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: "/pin_marker.png",
          }),
        })
      );
      vectorSource.addFeature(markerFeature);
});

// 벡터 레이어 생성 및 소스 연결
const vectorLayer = new VectorLayer({
  source: vectorSource
});

위의 과정처럼 vectorLayer 에 언져서 map 객체에 올리는 것입니다.

map.addLayer(vectorLayer);​

이 것을 묶어 하나의 마커를 올리는 함수로 처리하면 됩니다.

const addMarkers = (map) => {....}