반응형
지도 위에 마커 생성
<!DOCTYPE html>
<html>
<head>
<title>오픈레이어스 클릭 이벤트</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css">
<style>
.map {
height: 960px;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
let map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([128.4, 35.7]),
zoom: 7
})
});
// 클릭 이벤트부분
map.on('click', function(evt){
var feature = new ol.Feature({
geometry: new ol.geom.Point(evt.coordinate)
});
// 마커 스타일 설정
var style = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://map.vworld.kr/images/ol3/marker_blue.png'
}),
});
// feature에 스타일 설정
feature.setStyle(style);
// 마커 레이어에 들어갈 소스 생성
var source = new ol.source.Vector({
features: [feature]
});
// 마커 레이어 생성
var layer = new ol.layer.Vector({
source: source,
name: 'MARKER'
});
// 지도에 마커 추가
map.addLayer(layer);
})
</script>
</body>
</html>
반응형
'공부 > OpenLayers' 카테고리의 다른 글
| OpenLayers(오픈레이어스) 지도 확대, 축소 (0) | 2024.06.16 |
|---|---|
| OpenLayes(오픈레이어스) 클릭 이벤트 (0) | 2024.06.12 |
| OpenLayers(오픈레이어스)란 / 지도 띄우기 (0) | 2024.06.11 |