|
|
@ -5,7 +5,11 @@ import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import geoJson from '../components/map/geojson/airArea.json'; |
|
|
|
import geoJson from '../components/map/geojson/airArea.json'; |
|
|
|
import flatGimpo from '../components/map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
import flatGimpo from '../components/map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
|
|
|
|
|
|
|
|
// geojson Feature 형식으로 반환
|
|
|
|
/** |
|
|
|
|
|
|
|
* geojson Feature 형식으로 반환 |
|
|
|
|
|
|
|
* @param {'LineString' | 'Polygon' | 'Point'} type geometry 타입 |
|
|
|
|
|
|
|
* @param {string} id 생성할 obj의 Id |
|
|
|
|
|
|
|
*/ |
|
|
|
export const InitFeature = (type, id) => { |
|
|
|
export const InitFeature = (type, id) => { |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: 'Feature', |
|
|
|
type: 'Feature', |
|
|
@ -17,7 +21,11 @@ export const InitFeature = (type, id) => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//소수점 7자리까지만 자름 / coord = [lng, lat]
|
|
|
|
/** |
|
|
|
|
|
|
|
* 소수점 7자리까지만 자름 |
|
|
|
|
|
|
|
* @param {[number, number]} coord [lng, lat] |
|
|
|
|
|
|
|
* @returns |
|
|
|
|
|
|
|
*/ |
|
|
|
export const FormattingCoord = coord => { |
|
|
|
export const FormattingCoord = coord => { |
|
|
|
const resultArr = []; |
|
|
|
const resultArr = []; |
|
|
|
|
|
|
|
|
|
|
@ -33,7 +41,12 @@ export const FormattingCoord = coord => { |
|
|
|
return resultArr; |
|
|
|
return resultArr; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 거리 계산(meters로 리턴)
|
|
|
|
/** |
|
|
|
|
|
|
|
* center로부터 mouse까지의 거리 계산 |
|
|
|
|
|
|
|
* @param {[number, number]} mouse 현재 마우스가 위치한 좌표 |
|
|
|
|
|
|
|
* @param {[number, number]} center 기준점 좌표 |
|
|
|
|
|
|
|
* @returns meter단위로 리턴 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const CalculateDistance = (mouse, center) => { |
|
|
|
export const CalculateDistance = (mouse, center) => { |
|
|
|
const centerCoord = turf.point(center); |
|
|
|
const centerCoord = turf.point(center); |
|
|
|
const mouseCoord = turf.point(mouse); |
|
|
|
const mouseCoord = turf.point(mouse); |
|
|
@ -47,19 +60,34 @@ export const CalculateDistance = (mouse, center) => { |
|
|
|
return distance; |
|
|
|
return distance; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 미터 반환(m붙여서)
|
|
|
|
/** |
|
|
|
|
|
|
|
* 입력 값에 m 붙여줌 |
|
|
|
|
|
|
|
* @param {number} meters |
|
|
|
|
|
|
|
* @returns ex) 100 -> 100m |
|
|
|
|
|
|
|
*/ |
|
|
|
export const fromMetersToText = meters => { |
|
|
|
export const fromMetersToText = meters => { |
|
|
|
meters = meters || 0; |
|
|
|
meters = meters || 0; |
|
|
|
const text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
const text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
return text; |
|
|
|
return text; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 두 좌표 간의 중간 지점 좌표 반환
|
|
|
|
/** |
|
|
|
|
|
|
|
* 두 좌표 간의 중간 지점 좌표 반환 |
|
|
|
|
|
|
|
* @param {[number, number]} dis1 좌표1 |
|
|
|
|
|
|
|
* @param {[number, number]} dis2 좌표2 |
|
|
|
|
|
|
|
* @returns 중간 지점 좌표 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerGetMidPoint = (dis1, dis2) => { |
|
|
|
export const handlerGetMidPoint = (dis1, dis2) => { |
|
|
|
|
|
|
|
console.log(dis1, dis2, '--'); |
|
|
|
return [(dis1[0] + dis2[0]) / 2, (dis1[1] + dis2[1]) / 2]; |
|
|
|
return [(dis1[0] + dis2[0]) / 2, (dis1[1] + dis2[1]) / 2]; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// html Content 반환
|
|
|
|
/** |
|
|
|
|
|
|
|
* html Content 반환 |
|
|
|
|
|
|
|
* @param {number} distance |
|
|
|
|
|
|
|
* @param {string} id obj의 id |
|
|
|
|
|
|
|
* @returns |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerGetHtmlContent = (distance, id) => { |
|
|
|
export const handlerGetHtmlContent = (distance, id) => { |
|
|
|
const text = |
|
|
|
const text = |
|
|
|
typeof distance === 'number' |
|
|
|
typeof distance === 'number' |
|
|
@ -74,7 +102,12 @@ export const handlerGetHtmlContent = (distance, id) => { |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// circle 360도 좌표 반환
|
|
|
|
/** |
|
|
|
|
|
|
|
* circle 360도 좌표 반환 |
|
|
|
|
|
|
|
* @param {[number, number]} center 원의 중심 좌표 |
|
|
|
|
|
|
|
* @param {number} distance meter단위 거리 |
|
|
|
|
|
|
|
* @returns |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerGetCircleCoord = (center, distance) => { |
|
|
|
export const handlerGetCircleCoord = (center, distance) => { |
|
|
|
const options = { |
|
|
|
const options = { |
|
|
|
steps: 63, |
|
|
|
steps: 63, |
|
|
@ -83,7 +116,13 @@ export const handlerGetCircleCoord = (center, distance) => { |
|
|
|
return turf.circle(center, distance / 1000, options).geometry.coordinates; |
|
|
|
return turf.circle(center, distance / 1000, options).geometry.coordinates; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 포인트 생성
|
|
|
|
/** |
|
|
|
|
|
|
|
* 포인트 생성 |
|
|
|
|
|
|
|
* @param {[number, number]} coord 포인트 생성할 좌표 |
|
|
|
|
|
|
|
* @param {number} index 좌표 순서 |
|
|
|
|
|
|
|
* @param {string} type |
|
|
|
|
|
|
|
* @returns |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerCreatePoint = (coord, index, type) => { |
|
|
|
export const handlerCreatePoint = (coord, index, type) => { |
|
|
|
const wayPoint = { |
|
|
|
const wayPoint = { |
|
|
|
type: 'Feature', |
|
|
|
type: 'Feature', |
|
|
@ -98,7 +137,13 @@ export const handlerCreatePoint = (coord, index, type) => { |
|
|
|
return wayPoint; |
|
|
|
return wayPoint; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 그려진 도형이 지도 전체화면에 보여지도록
|
|
|
|
/** |
|
|
|
|
|
|
|
* 그려진 도형이 지도 전체화면에 보여지도록 |
|
|
|
|
|
|
|
* @param {*} map 지도 오브젝트 |
|
|
|
|
|
|
|
* @param {*} paths obj의 좌표 |
|
|
|
|
|
|
|
* @param {number} padding 도형과 지도 사이의 padding값 |
|
|
|
|
|
|
|
* @param {string} type custom 타입 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerFitBounds = (map, paths, padding, type) => { |
|
|
|
export const handlerFitBounds = (map, paths, padding, type) => { |
|
|
|
const bounds = new mapboxgl.LngLatBounds(paths[0], paths[0]); |
|
|
|
const bounds = new mapboxgl.LngLatBounds(paths[0], paths[0]); |
|
|
|
|
|
|
|
|
|
|
@ -115,21 +160,30 @@ export const handlerFitBounds = (map, paths, padding, type) => { |
|
|
|
map.fitBounds(bounds, { padding: padding }); |
|
|
|
map.fitBounds(bounds, { padding: padding }); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// drawMode에 따른 drawType 매칭
|
|
|
|
/** |
|
|
|
|
|
|
|
* drawMode에 따른 drawType 매칭 |
|
|
|
|
|
|
|
* @param {string} mode drawobj.getMode로 얻은 값 |
|
|
|
|
|
|
|
* @returns custom 타입 반환 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerReturnMode = mode => { |
|
|
|
export const handlerReturnMode = mode => { |
|
|
|
if (mode.includes('line') || mode.includes('Line')) return 'LINE'; |
|
|
|
if (mode.includes('line') || mode.includes('Line')) return 'LINE'; |
|
|
|
if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON'; |
|
|
|
if (mode.includes('polygon') || mode.includes('Polygon')) return 'POLYGON'; |
|
|
|
if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE'; |
|
|
|
if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE'; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 지도에 있는 모든 마커 삭제
|
|
|
|
/** |
|
|
|
|
|
|
|
* 지도에 있는 모든 마커 삭제 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerRemoveAllMarker = () => { |
|
|
|
export const handlerRemoveAllMarker = () => { |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const eleArr = Array.from(ele); |
|
|
|
const eleArr = Array.from(ele); |
|
|
|
eleArr?.forEach(marker => marker.remove()); |
|
|
|
eleArr?.forEach(marker => marker.remove()); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 해당되는 id의 마커 삭제
|
|
|
|
/** |
|
|
|
|
|
|
|
* 해당되는 id의 마커 삭제 |
|
|
|
|
|
|
|
* @param {string} id obj의 id |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerRemoveGroupMarker = id => { |
|
|
|
export const handlerRemoveGroupMarker = id => { |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const eleArr = Array.from(ele); |
|
|
|
const eleArr = Array.from(ele); |
|
|
@ -138,7 +192,15 @@ export const handlerRemoveGroupMarker = id => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 개별 마커 생성
|
|
|
|
/** |
|
|
|
|
|
|
|
* 개별 마커 생성 |
|
|
|
|
|
|
|
* @param {*} map 지도 오브젝트 |
|
|
|
|
|
|
|
* @param {*} anchor |
|
|
|
|
|
|
|
* @param {*} lngLat 마커가 위치할 좌표 |
|
|
|
|
|
|
|
* @param {*} text |
|
|
|
|
|
|
|
* @param {string} id obj의 id |
|
|
|
|
|
|
|
* @returns |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerCreateOneMarker = (map, anchor, lngLat, text, id) => { |
|
|
|
export const handlerCreateOneMarker = (map, anchor, lngLat, text, id) => { |
|
|
|
if (!id) return; |
|
|
|
if (!id) return; |
|
|
|
|
|
|
|
|
|
|
@ -152,7 +214,12 @@ export const handlerCreateOneMarker = (map, anchor, lngLat, text, id) => { |
|
|
|
.addTo(map); |
|
|
|
.addTo(map); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 해당되는 id의 마커 생성
|
|
|
|
/** |
|
|
|
|
|
|
|
* 해당되는 id의 마커 생성 |
|
|
|
|
|
|
|
* @param {*} map 지도 오브젝트 |
|
|
|
|
|
|
|
* @param {*} data |
|
|
|
|
|
|
|
* @param {string} mode custom 타입 |
|
|
|
|
|
|
|
*/ |
|
|
|
export const handlerCreateGroupMarker = (map, data, mode) => { |
|
|
|
export const handlerCreateGroupMarker = (map, data, mode) => { |
|
|
|
if (mode !== 'CIRCLE') { |
|
|
|
if (mode !== 'CIRCLE') { |
|
|
|
const coord = mode === 'LINE' ? data.coord : data.coord[0]; |
|
|
|
const coord = mode === 'LINE' ? data.coord : data.coord[0]; |
|
|
|