OpenLayers 3
지도 표출 예제
OpenLayers에서는 벡터 타일 레이어에 대해 별도의 스타일 지원을 제공하지 않습니다.
대신, 각 레이어의 피처 속성(properties)을 통해 직접 필터링하고 스타일을 적용해야 합니다.
이 가이드에서는 벡터 타일 레이어를 설정하고, 피처 속성을 사용하여 스타일을 다르게 적용하는 방법을 설명합니다.
레이어 및 레이어 별 properties 문서는 추후 별도로 첨부될 예정입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers 예제</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.5.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.5.0/build/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
// 기본 지도 설정
const map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([126.8276859293457, 37.20550677121028]),
zoom: 13
})
});
// 벡터 타일 소스 설정
const vectorTileSource = new ol.source.VectorTile({
format: new ol.format.MVT(),
url: 'https://hdmap.mqnicrnd5.com/vector?x={x}&y={y}&z={z}'
});
// 벡터 타일 레이어 설정
const vectorTileLayer = new ol.layer.VectorTile({
source: vectorTileSource,
style: function(feature) {
const layerId = feature.get('layer');
const properties = feature.getProperties();
let style;
switch(layerId) {
case 'a2_link':
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
})
});
break;
case 'b1_safetysign':
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({ color: 'red' }),
stroke: new ol.style.Stroke({ color: 'black', width: 1 })
})
});
break;
case 'b2_surfacelinemark':
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 2
})
});
break;
case 'b3_surfacemark':
style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'green'
})
});
break;
case 'c1_trafficlight':
style = new ol.style.Style({
image: new ol.style.Icon({
src: 'https://path/to/trafficlight/icon.png',
scale: 0.1
})
});
break;
default:
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 1
})
});
break;
}
return style;
}
});
// 벡터 타일 레이어를 지도에 추가
map.addLayer(vectorTileLayer);
</script>
</body>
</html>Last updated