1. 자바스크립트 forEach
2. OpenLayers - 벡터 레이어 폴리곤 추가
1. 자바스크립트 forEach
const fruits = ['사과', '바나나', '체리'];
fruits.forEach(function(item, index, array) {
console.log(item, index);
});- item: 배열의 현재 요소입니다.
- index: 현재 요소의 인덱스입니다.
- array: 순회 중인 배열 객체 자체입니다.
function(): 콜백 함수. forEach가 배열의 각 요소에 실행할 동작 지정
- 콜백 함수: forEach 메서드에 전달된 함수입니다. 배열의 각 요소에 대해 이 함수가 실행됩니다. 필요에 따라 요소 값, 인덱스, 원본 배열에 접근할 수 있습니다.
- 순회: forEach는 배열의 첫 번째 요소부터 마지막 요소까지 순서대로 콜백 함수를 실행합니다. 순회는 중간에 멈출 수 없으며, 모든 요소에 대해 콜백 함수가 실행됩니다.
- 사용 사례: 배열의 각 요소에 대해 무언가를 실행해야 할 때 사용됩니다. 예를 들어, 배열의 각 요소를 출력하거나, 각 요소에 대해 특정 계산을 수행하고 그 결과를 사용하는 경우가 있습니다.
유의사항
- forEach 메서드는 배열을 변경하지 않지만, 콜백 함수 내에서 배열 요소를 직접 변경할 수 있습니다.
- forEach는 콜백 함수의 실행 결과를 기반으로 한 값을 반환하지 않습니다. 만약 배열의 각 요소를 기반으로 새로운 배열을 생성하고 싶다면, map 메서드를 사용하는 것이 더 적합합니다.
- forEach는 순회를 중간에 멈출 수 없습니다. 특정 조건을 만족하는 첫 번째 요소를 찾고 싶다면, find 또는 findIndex 메서드를 사용하는 것이 좋습니다.
2. OpenLayers - 벡터 레이어 폴리곤 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenLayers Polygon Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
<style>
.map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
<script>
// OpenLayers 지도 객체 생성
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
// 폴리곤 좌표 정의 (여기서는 간단한 사각형 예시)
var coordinates = [
[
[-5e6, -1e6], [-5e6, 1e6], [5e6, 1e6], [5e6, -1e6], [-5e6, -1e6]
]
];
// 폴리곤 객체 생성
var polygon = new ol.geom.Polygon(coordinates);
// 폴리곤을 피처로 변환
var polygonFeature = new ol.Feature({
geometry: polygon
});
// 벡터 소스 생성 및 폴리곤 피처 추가
var vectorSource = new ol.source.Vector({
features: [polygonFeature]
});
// 벡터 레이어 생성 및 벡터 소스 설정
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF0000',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.5)'
})
})
});
// 벡터 레이어를 지도에 추가
map.addLayer(vectorLayer);
</script>
</body>
</html>
'정리노트 > 메모' 카테고리의 다른 글
| ClassNotFoundException 해결 방법(ContextLoaderListener) (0) | 2024.06.17 |
|---|---|
| 24.06.11. 노트 (0) | 2024.06.11 |
| 24.06.07. 노트 (0) | 2024.06.07 |
| 24.06.04. 노트 (0) | 2024.06.04 |
| 24.06.03. 노트 (0) | 2024.06.03 |