OpenLayers Basic

1. Map

OpenLayers의 핵심 구성 요소는 맵(ol/Map 모듈의)입니다. 대상 컨테이너 (div 요소)로 렌더링됩니다.
import { Map } from 'ol';

const map = new Map({ target:'map', view: new View({ center: fromLonLat([ ..., ...]), zoom:12 }), layers:[...., ...] })

2. View

Map은  지도의 중심, 확대/축소 수준, 투영과 같은 사항에 대해 책임을 지지 않습니다. 대신 이는 ol/View 인스턴스의 속성입니다.
import { Map, View } from 'ol';

View에는 투영도(Projection) 있습니다. 투영은 center(중심)의 좌표계와 지도 해상도 계산 단위를 결정합니다. 지정하지 않은 경우 기본 투영은 Spherical Mercator(EPSG:3857)이며 미터 단위로 사용합니다.

zoom 은  해상도를 지정하는 편리한 방법입니다. 사용 가능한 확대/축소 수준은 maxZoom(기본값: 28), ZoomFactor(기본값: 2) 및 maxResolution(기본값은 투영의 유효 범위가 256x256 픽셀 타일에 맞는 방식으로 계산됨)에 의해 결정됩니다. 픽셀당 maxResolution 단위의 해상도로 줌 수준 0에서 시작하여 줌수준 maxZoom에 도달할 때까지 이전 줌수준의 해상도를 ZoomFactor로 나누어 후속 확대/축소 수준을 계산합니다.

 

. Source

레이어에 대한 원격 데이터를 얻기 위해 OpenLayers는 ol/source/Source 하위 클래스를 사용합니다. OpenStreetMap 또는 Bing과 같은 무료 상용 지도 타일 서비스, WMS 또는 WMTS와 같은 OGC(Open Geospatial Consortium) 소스, GeoJSON 또는 KML과 같은 형식의 벡터 데이터에 사용할 수 있습니다.

 

주요소스는 다음과 같습니다.
OSM (OpenStreetMap)

• OSM 소스는 OpenStreetMap 서비스의 타일을 사용하여 지도를 렌더링합니다. OpenStreetMap은 자유롭게 사용할 수 있는 세계 지도 데이터 세트로, 전 세계의 자원봉사자들이 만든 데이터입니다.
• OSM은 기본적으로 제공되는 URL과 함께 사용되며, 추가 설정 없이 간편하게 지도를 표시할 수 있습니다. 예를 들어, new ol.layer.Tile({ source: new ol.source.OSM() })를 사용하여 OpenLayers 지도에 OSM 레이어를 추가할 수 있습니다.

XYZ

• XYZ 소스는 사용자가 지정한 URL 패턴에 따라 지도 타일을 불러옵니다. 이 URL은 {x}, {y}, {z} (타일 좌표와 줌 레벨)를 포함한 템플릿을 사용하여 타일을 요청합니다.
• XYZ 소스는 다양한 외부 타일 서비스와 호환될 수 있어, 사용자가 특정 타일 서버의 URL을 설정해 사용할 수 있습니다. 예: new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png', projection: 'EPSG:3857 }) }).

Vector Source

• 벡터 데이터를 로드하기 위한 소스. 다양한 형식(GeoJSON, TopoJSON 등)의 데이터를 지도 위에 표시할 수 있습니다.

ImageWMS

• Web Map Service (WMS)를 사용하여 지도 이미지를 가져오는 소스. 서버에서 지도 이미지를 생성하고 클라이언트로 전송합니다.

TileWMS

• WMS 서비스에서 타일 형식으로 이미지를 가져오는 소스. ImageWMS와 유사하지만 타일 단위로 데이터를 로드합니다.

TileArcGISRest

• ArcGIS 서버에서 제공하는 REST 서비스를 사용하여 타일을 로드하는 소스. ArcGIS 플랫폼과의 통합을 제공합니다.

TileJSON

• TileJSON 형식의 메타데이터를 통해 타일 레이어 정보를 제공하는 소스. TileJSON은 타일 기반 맵 레이어의 설명을 포함하는 JSON 형식입니다.

WebGLPoints

• WebGL을 사용하여 포인트 데이터를 렌더링하는 소스. 대규모 포인트 데이터셋을 효율적으로 처리할 수 있습니다.

 

4. Layer

레이어는 source 데이터를 시각적으로 표현한 것입니다. OpenLayers에는 네 가지 기본 유형의 레이어가 있습니다.

• ol/layer/Tile - 그리드에 타일 이미지를 제공하는 소스들을 렌더링합니다. 그리드(grids)는 특정해상도 을 위해 줌레벨로 형성되어있습니다.
• ol/layer/Image - 지도 이미지를 제공하는 소스를 렌더링합니다. 지도이미지는 임의의 해상도와 범위로 제공됩니다. 
• ol/layer/Vector -벡터 데이터를 클라이언트 측에 렌더링합니다.
• ol/layer/VectorTile - 벡터 타일로 제공되는 데이터를 렌더링합니다.

import './style.css';
import {Map, View,} from 'ol';
import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Style, Icon } from 'ol/style'

import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ'
import VectorSource from 'ol/source/Vector';

import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';


// const source = OSM()

const osmStandard = new TileLayer({ 
  source: new OSM(),
  title: 'OSMStandard',
  visible: true,
});

const vworldLayer = new TileLayer({ 
  source: new XYZ({
      url: 'http://api.vworld.kr/req/wmts/1.0.0/{api_Key}/Base/{z}/{y}/{x}.png',
      projection: 'EPSG:3857',
  }),
  title: '브이월드',
  visible: false,
  preload: 5,
});

const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([126.9780, 37.5665]), // 서울의 좌표
    // center: ol.proj.fromLonLat([126.9780, 37.5665]), // 서울의 좌표
    // center: [14129640.414119221, 4523441.218824256],
    zoom: 12
  }),
  
  layers: [osmStandard, vworldLayer]
  
});
const marker = new Feature({
  geometry: new Point(fromLonLat([126.9780, 37.5665]))
});

const vectorLayer = new VectorLayer({
  source: new VectorSource({
      features: [marker]
  }),
  style: new Style({
      image: new Icon({
          anchor: [0.5, 1],// 아이콘의 하단 중심이 위치를 가리키게 설정
          src: '/pin_marker.png'
      })
  })
});
map.addLayer(vectorLayer);

const layerSelect = document.getElementById('layer-select');
layerSelect.onchange = function () {
    let selectedLayerTitle = this.value;
    map.getLayers().forEach(function (layer) {
        if (layer.get('title')) {
            layer.setVisible(layer.get('title') === selectedLayerTitle);
        }
    });
};