|
|
@ -48,6 +48,80 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'V1', |
|
|
|
|
|
|
|
lat: 37.4797865, |
|
|
|
|
|
|
|
lon: 126.540668 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'V2', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
lat: 37.521245, |
|
|
|
|
|
|
|
lon: 126.6107763 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'V3', |
|
|
|
|
|
|
|
lat: 37.5609465, |
|
|
|
|
|
|
|
lon: 126.7414201 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'V4', |
|
|
|
|
|
|
|
lat: 37.3658236, |
|
|
|
|
|
|
|
lon: 126.6650669 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'V5', |
|
|
|
|
|
|
|
lat: 37.4520753, |
|
|
|
|
|
|
|
lon: 126.7074861 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R1', |
|
|
|
|
|
|
|
lat: 37.492581, |
|
|
|
|
|
|
|
lon: 126.5801572 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R2', |
|
|
|
|
|
|
|
lat: 37.542031, |
|
|
|
|
|
|
|
lon: 126.6036588 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R3', |
|
|
|
|
|
|
|
lat: 37.5764269, |
|
|
|
|
|
|
|
lon: 126.6005224 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R4', |
|
|
|
|
|
|
|
lat: 37.5699471, |
|
|
|
|
|
|
|
lon: 126.7536302 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R5', |
|
|
|
|
|
|
|
lat: 37.524016, |
|
|
|
|
|
|
|
lon: 126.649562 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R6', |
|
|
|
|
|
|
|
lat: 37.5319855, |
|
|
|
|
|
|
|
lon: 126.745071 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R7', |
|
|
|
|
|
|
|
lat: 37.4712333, |
|
|
|
|
|
|
|
lon: 126.6023981 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R8', |
|
|
|
|
|
|
|
lat: 37.4046495, |
|
|
|
|
|
|
|
lon: 126.6202759 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'R9', |
|
|
|
|
|
|
|
lat: 37.3450207, |
|
|
|
|
|
|
|
lon: 126.6296542 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
let features = geoJson.features; |
|
|
|
let features = geoJson.features; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -55,6 +129,34 @@ export const NaverCustomMap = () => { |
|
|
|
airPort?.map(air => polyArea(air)); |
|
|
|
airPort?.map(air => polyArea(air)); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
uamPosition.map(uam => { |
|
|
|
|
|
|
|
const name = uam.name; |
|
|
|
|
|
|
|
const position = new naver.maps.LatLng(uam.lat, uam.lon); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const cont = |
|
|
|
|
|
|
|
name.substr(0, 1) == 'R' |
|
|
|
|
|
|
|
? [ |
|
|
|
|
|
|
|
'<div style="border-radius:50%; background:#429629; border: 4px solid #ffffff; padding:5px;">', |
|
|
|
|
|
|
|
`<span style="color:#ffffff">${name}</span>`, |
|
|
|
|
|
|
|
'</div>' |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
: [ |
|
|
|
|
|
|
|
'<div style="border-radius:50%; background:#ffffff; border: 4px solid #15298A; padding:5px;">', |
|
|
|
|
|
|
|
`<span style="color:#000000">${name}</span>`, |
|
|
|
|
|
|
|
'</div>' |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
|
|
|
|
position: position, |
|
|
|
|
|
|
|
map: mapObject, |
|
|
|
|
|
|
|
icon: { |
|
|
|
|
|
|
|
content: cont.join('') |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, [mapObject]); |
|
|
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
const NaverMapInit = () => { |
|
|
|
const mapOptions = { |
|
|
|
const mapOptions = { |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
@ -73,6 +175,24 @@ export const NaverCustomMap = () => { |
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const createUamArea = uam => { |
|
|
|
|
|
|
|
const title = uam.title; |
|
|
|
|
|
|
|
const position = new naver.maps.LatLng(uam.lat, uam.lon); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const circle = new naver.maps.Circle({ |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
fillColor: '#7367F0', |
|
|
|
|
|
|
|
fillOpacity: 0.1, |
|
|
|
|
|
|
|
center: position, |
|
|
|
|
|
|
|
// map: mapObject,
|
|
|
|
|
|
|
|
radius: 100, |
|
|
|
|
|
|
|
clickable: true |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// circle.setMap(mapObject);
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleHistoryInit = line => { |
|
|
|
const handleHistoryInit = line => { |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
}; |
|
|
|
}; |
|
|
|