|
|
@ -24,40 +24,62 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
|
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit();
|
|
|
|
NaverMapInit();
|
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
setIsMapLoad(true); |
|
|
|
setIsMapLoad(true); |
|
|
|
}, [airArea]); |
|
|
|
}, [airArea]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
ModeInit(); |
|
|
|
ModeInit(); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
// NaverMapInit();
|
|
|
|
setMapAreaCoordList(areaCoordList) |
|
|
|
setMapAreaCoordList(areaCoordList) |
|
|
|
}, [areaCoordList]); |
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ModeInit = () => { |
|
|
|
const ModeInit = () => { |
|
|
|
setMode(mapControl.drawType) |
|
|
|
setMode(mapControl.drawType) |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
const NaverMapInit = () => { |
|
|
|
console.log(areaCoordList); |
|
|
|
const mapOptions = { |
|
|
|
const NaverMapInit = () => { |
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
const center = {}; |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
const bufferzoom ={}; |
|
|
|
// zoom: 10,
|
|
|
|
if(areaCoordList) { |
|
|
|
zoom: 15, |
|
|
|
center.lat = areaCoordList[0].coordList[0].lat === 0 ? 37.520357 : areaCoordList[0].coordList[0].lat; |
|
|
|
zoomControl: true, |
|
|
|
center.lon = areaCoordList[0].coordList[0].lon === 0 ? 126.610166 : areaCoordList[0].coordList[0].lon; |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
if(areaCoordList[0].bufferZone>=0 && areaCoordList[0].bufferZone<2000){ |
|
|
|
zoomControlOptions: { |
|
|
|
bufferzoom.bufferzoom =13; |
|
|
|
position: naver.maps.Position.LEFT_CENTER, |
|
|
|
} |
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
else if(areaCoordList[0].bufferZone>=2000 && areaCoordList[0].bufferZone <5000){ |
|
|
|
} |
|
|
|
bufferzoom.bufferzoom =12; |
|
|
|
}; |
|
|
|
} |
|
|
|
setMap(new naver.maps.Map('map', mapOptions)); |
|
|
|
else if(areaCoordList[0].bufferZone>=5000 && areaCoordList[0].bufferZone <=9000){ |
|
|
|
|
|
|
|
bufferzoom.bufferzoom =11; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
else{ |
|
|
|
|
|
|
|
bufferzoom.bufferzoom =10; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log("bufferzoom>>",bufferzoom); |
|
|
|
|
|
|
|
console.log(center); |
|
|
|
|
|
|
|
const mapOptions2 = { |
|
|
|
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
|
|
|
|
center: new naver.maps.LatLng(center.lat, center.lon), |
|
|
|
|
|
|
|
// zoom: 10,
|
|
|
|
|
|
|
|
zoom: bufferzoom.bufferzoom, |
|
|
|
|
|
|
|
zoomControl: true, |
|
|
|
|
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
|
|
|
|
zoomControlOptions: { |
|
|
|
|
|
|
|
position: naver.maps.Position.LEFT_CENTER, |
|
|
|
|
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
setMap(new naver.maps.Map('map', mapOptions2)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawType = val => { |
|
|
|
const handlerDrawType = val => { |
|
|
|