OpenLayers 버전 v7.4.0
오픈레이어스 선 긋기 예제.. 이거 하나 하느라 몇시간을 불태웠는지.. 후.. 역시 알고나면 아무것도 아닌데, 알기전에는 너무 스트레스다.
html :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
</head>
<body>
<div id="map"></div>
</body>
</html>
js :
// OpenLayers에서 맵을 생성합니다.
var map = new ol.Map({
target: 'map', // 맵이 표시될 영역의 ID를 지정합니다.
layers: [
// 기본적으로 사용할 레이어를 추가합니다. 여기서는 OSM (OpenStreetMap)을 사용합니다.
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([127.0287172, 37.2635620]), // 맵이 초기에 표시될 중심 위치 (경도, 위도)
zoom: 17 // 맵의 초기 줌 레벨
})
});
// 마커를 표시할 위치를 정의합니다.
var markerCoordinate = ol.proj.fromLonLat([127.0287172, 37.2635620]);
// 마커를 생성합니다.
var marker = new ol.Feature({
geometry: new ol.geom.Point(markerCoordinate)
});
// 마커의 스타일을 정의합니다. 아이콘 이미지를 사용할 수 있습니다.
var markerStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'https://openlayers.org/en/v7.3.0/examples/data/icon.png', // 마커 아이콘 이미지 URL
scale: 1 // 이미지 크기를 조정합니다.
})
});
marker.setStyle(markerStyle);
// 마커를 담을 레이어를 생성합니다.
var markerLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
})
});
// 마커를 담을 레이어를 생성합니다.
var markerLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
})
});
// 라인을 그리기 위한 시작점과 끝점의 좌표를 정의합니다.
var lineCoordinates = [
ol.proj.fromLonLat([127.0318677, 37.2616733]), // 시작점 (Eiffel Tower)
ol.proj.fromLonLat([127.0254497, 37.2632773]) // 끝점 (Brandenburg Gate, Berlin)
];
// 라인을 생성합니다.
var line = new ol.Feature({
geometry: new ol.geom.LineString(lineCoordinates)
});
// 라인의 스타일을 정의합니다.
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 10
})
});
line.setStyle(lineStyle);
// 라인을 담을 레이어를 생성합니다.
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [line]
})
});
// 마커 레이어를 맵에 추가합니다.
map.addLayer(markerLayer);
map.addLayer(lineLayer);수원시청 앞에 줄 그어져서 나옴.
728x90
300x250
