FR 페이지를 띄었으니 이제 어떤 것을 넣을지 생각해야 한다.
일단, 산불 페이지이기 때문에 지도가 필요했다.
kakaomap을 사용했다.
const getMaps = useCallback(() => {
kakao.maps.load(async () => {
let container = document.getElementById('kakaoMap');
if (!container) return;
const p = [
[36.86244204861359, 129.18772975343038],
[36.86234206059776, 129.18772820530532],
[36.86244006705946, 129.1877480732057],
[36.86234581151657, 129.1877814781849],
[36.86236718582345, 129.1878791671761],
[36.86241718270318, 129.1879657715179],
[36.862356580033165, 129.18804531594816],
[36.86239032216932, 129.18795118057622],
[36.86248843489101, 129.1879318442415],
[36.86241341931384, 129.18786571812575],
[36.86233867595321, 129.18779928447432],
[36.86242670833353, 129.1877518471471],
[36.86252668081043, 129.187749501116],''']
const position = [
[36.86244204861359, 129.18772975343038],
[36.86234206059776, 129.18772820530532],
[36.86244006705946, 129.1877480732057],
[36.86234581151657, 129.1877814781849],
[36.86236718582345, 129.1878791671761],
[36.86241718270318, 129.1879657715179],
[36.862356580033165, 129.18804531594816],
[36.86239032216932, 129.18795118057622],
[36.86248843489101, 129.1879318442415],
[36.86241341931384, 129.18786571812575],
[36.86233867595321, 129.18779928447432],
[36.86242670833353, 129.1877518471471],
[36.86252668081043, 129.187749501116],
[36.862498162558246, 129.18765365379318],''']
const center = { lat: 36.862247489451526, lng: 129.18753851687072};
let options = {
center: new kakao.maps.LatLng(center.lat, center.lng),
//center : position,
level: 2, //줌 레벨(숫자가 클수록 더 넓은 영역 표시)
};
const map = new window.kakao.maps.Map(container, options);
여기서 P와 Position 데이터는 내가 그냥 직접 넣어줬다. (아직 데이터가 없기 때문에)
kakaomap을 사용하기 위해 container을 만들어줘야한다. (지도가 들어갈 위치라고 이해하면 된다.)
그리고 필요 option을 설정해줘야한다. center은 가운데의 위치를 설정해준다. 지도가 처음 보여질 때 이 center의 위치가 가운데가 되어 보여진다.
level은 지도가 보여질 영역이다. level숫자가 커질수록 영역이 넓어져서 보여진다.
처음에는 position값만 보여주고 그 position을 화살표 방향으로 보여주는 코드를 작성했다.
position.forEach((a, i) => {
let location = new kakao.maps.LatLng(a[0], a[1]); // 배열 인덱스 수정
const marker = new kakao.maps.Marker({ position: location, image: redMarkerImage });
marker.setMap(map); // 지도에 마커 추가
});
position.forEach((a, i) => {
setTimeout(() => {
if (i < position.length - 1) {
const linePath = [
new kakao.maps.LatLng(a[0], a[1]),
new kakao.maps.LatLng(position[i + 1][0], position[i + 1][1])
];
const redIntensity = Math.min(255, 100 + i * 0.5); // 🔹 빨강 값 증가 (최대 255)
const strokeColor = `rgb(0, 0, ${redIntensity})`; // 빨간색 값 점점 증가
const polyline = new kakao.maps.Polyline({
path: linePath,
strokeWeight: 5, //선의 두께
strokeColor: strokeColor, // 🔹 점점 진한 빨강
strokeOpacity: 1, //선의 투명
strokeStyle: 'solid',
endArrow: true
});
polyline.setMap(map);
}
}, i * 100);
});polyline을 사용했고, position 배열을 하나씩 화살표를 보여주기 위해 setTimeout을 사용해서 0.1초마다 화살표 방향을 표시해 산불의 방향을 표시하도록 하였다.
하지만, 위에 사진과 같이 제대로 표현이 되지 않았다.
위에 사진은 position의 모든 값을 이어나갔다.
산불이 나서 울린 기기만 표시하기 위해, 일단은 모든 기기의 위치를 p에 저장해두었다. 그런 다음 산불이 난 위치만 position에 저장했다.
p는 map이 보여질 때 같이 보여지도록 설정했고, 산불이 난 기기는 배열의 순서에 따라 0.1초씩 보여주며 산불의 방향, 위치를 더 자세하게 표현했다.
p.forEach((a, i) => {
let location = new kakao.maps.LatLng(a[0], a[1]); // 배열 인덱스 수정
const marker = new kakao.maps.Marker({ position: location, image: greenMarkerImage});
marker.setMap(map); // 지도에 마커 추가
});
position.forEach((a, i) => {
setTimeout(() => {
if (i < position.length - 1) {
let location = new kakao.maps.LatLng(a[0], a[1]); // 배열 인덱스 수정
let markerImage = i === 0 ? firstMarkerImage : redMarkerImage;
const marker = new kakao.maps.Marker({ position: location, image: markerImage, zIndex: i === 0 ? 100: 1, });
marker.setMap(map); // 지도에 마커 추가
kakao.maps.event.addListener(marker, 'click', function(){
let geocoder = new kakao.maps.services.Geocoder();
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
const arr ={ ...result};
const _arr = arr[0].address.address_name;
//console.log(arr);
setSelectedLocation({arr : _arr});
}
}
geocoder.coord2Address(location.getLng(), location.getLat(), callback);
setSelectedPosition({ lat: location.getLat(), lng: location.getLng() });
document.getElementById("map").style.width = "80%";
document.getElementById("map_i").style.width = "20%";
map.setCenter(location);
//var level = map.getLevel() - 1;
//map.setLevel(level, {anchor: this.getPosition()});
});
}
}, i * 100);
}); 
처음에 보여지는 방향보다는 이렇게 작성하는 것이 더 눈에 띄고, 보기 편안했다.
여기서, 최초 발화 지점을 표시하기 위해
다른 마커를 사용했고, zindex를 제일 위로 표현했다.
let markerImage = i === 0 ? firstMarkerImage : redMarkerImage;
const marker = new kakao.maps.Marker({ position: location, image: markerImage, zIndex: i === 0 ? 100: 1, });