From e0631f680f374e5a767e2ff28c262049e7024889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?sanguu516=28=EB=B0=95=EC=83=81=ED=98=84=29?= Date: Fri, 16 Jun 2023 23:08:40 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EC=97=AD=20=EA=B3=A0=EB=8F=84=20?= =?UTF-8?q?=EA=B0=92=20=ED=99=94=EB=A9=B4=20=EA=B9=A8=EC=A7=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 67 ++++++++++++++++++- src/components/map/naver/NaverMap.js | 26 ++++--- src/views/control/main/ControlMain.js | 6 +- 3 files changed, 85 insertions(+), 14 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 6cd5ad3..6b9b880 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -24,7 +24,7 @@ import { } from '../../../../modules/basis/flight/actions/basisFlightAction'; import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi'; import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer'; - +import gimpo from '../../../map/geojson/airportAirArea.json'; const FlightPlanAreaMap = props => { const dispatch = useDispatch(); const naver = window.naver; @@ -49,8 +49,50 @@ const FlightPlanAreaMap = props => { const [number, setNumber] = useState(0); const [formModal, setFormModal] = useState(false); + + const [coordCenter, setCoordCenter] = useState([]); // 격자 센터값 + + let gimPofeatures = gimpo.features; + useEffect(() => { NaverMapInit(); + + const coords = []; + gimPofeatures.map(air => { + coords.push({ + lat: + (Math.max( + air.geometry.coordinates[0][0][1], + air.geometry.coordinates[0][1][1], + air.geometry.coordinates[0][2][1], + air.geometry.coordinates[0][3][1] + ) + + Math.min( + air.geometry.coordinates[0][0][1], + air.geometry.coordinates[0][1][1], + air.geometry.coordinates[0][2][1], + air.geometry.coordinates[0][3][1] + )) / + 2, + lng: + (Math.max( + air.geometry.coordinates[0][0][0], + air.geometry.coordinates[0][1][0], + air.geometry.coordinates[0][2][0], + air.geometry.coordinates[0][3][0] + ) + + Math.min( + air.geometry.coordinates[0][0][0], + air.geometry.coordinates[0][1][0], + air.geometry.coordinates[0][2][0], + air.geometry.coordinates[0][3][0] + )) / + 2, + airspace: air.properties.airspace + }); + }); + setCoordCenter(coords); + return () => { dispatch(AREA_DETAIL_INIT()); }; @@ -64,6 +106,25 @@ const FlightPlanAreaMap = props => { setIsMapLoad(true); }, [airArea]); + useEffect(() => { + coordCenter.map((val, idx) => { + const position = new naver.maps.LatLng( + val.lat.toFixed(6), + val.lng.toFixed(6) + ); + const marker = new naver.maps.Marker({ + position: position, + map: map, + icon: { + content: `
${val.airspace}
`, + size: new naver.maps.Size(0, 0), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(7, 5), + align: 'center' + } + }); + }); + }, [coordCenter]); useEffect(() => { ModeInit(); }, [mapControl.drawType]); @@ -118,8 +179,8 @@ const FlightPlanAreaMap = props => { } const mapOptions = { // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - center: new naver.maps.LatLng(37.520357, 126.610166), - zoom: !areaCoordList ? 14 : bufferzoom.bufferzoom, + center: new naver.maps.LatLng(37.558522, 126.793722), + zoom: !areaCoordList ? 11 : bufferzoom.bufferzoom, zoomControl: true, mapTypeId: naver.maps.MapTypeId.NORMAL, zoomControlOptions: { diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index b6de1c3..8553a6c 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -128,6 +128,9 @@ export const NaverCustomMap = () => { airPort?.map((air, idx) => polyArea(air, idx)); // airPort?.map((air, idx) => airlist(air, idx)); // airPort?.map((air, idx) => polyArea(air, idx)); + airPort?.map((air, idx) => { + gridgrid(air, idx); + }); gimPofeatures.map(air => { coords.push({ lat: @@ -168,7 +171,6 @@ export const NaverCustomMap = () => { uamPosition.map(uam => { const name = uam.name; const position = new naver.maps.LatLng(uam.lat, uam.lon); - const cont = name.substr(0, 1) == 'R' ? [ @@ -191,16 +193,23 @@ export const NaverCustomMap = () => { } }); }); - + // coordCenter = new nl(); coordCenter.map((val, idx) => { - const position = new naver.maps.LatLng(val.lat, val.lng); - const cont = `
${val.airspace}
`; + const position = new naver.maps.LatLng( + val.lat.toFixed(6), + val.lng.toFixed(6) + ); + + // const cont = `
${val.airspace}
`; const marker = new naver.maps.Marker({ position: position, map: mapObject, icon: { - content: [cont].join(''), - anchor: new naver.maps.Point(20, 20) + content: `
${val.airspace}
`, + size: new naver.maps.Size(0, 0), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(5, 5), + align: 'center' } }); }); @@ -230,10 +239,10 @@ export const NaverCustomMap = () => { const NaverMapInit = () => { const mapOptions = { - center: new naver.maps.LatLng(37.520357, 126.610166), + center: new naver.maps.LatLng(37.558522, 126.793722), // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), // zoom: 10, - zoom: 14, + zoom: 12, zoomControl: true, mapTypeId: naver.maps.MapTypeId.NORMAR, zoomControlOptions: { @@ -485,6 +494,7 @@ export const NaverCustomMap = () => { const latlngJson = [tt.lng(), tt.lat(), 0]; arr.push(latlngJson); }); + arr.push([path[0].lng(), path[0].lat(), 0]); setSquarePaths(prev => [...prev, arr]); }; diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index e4dc7b2..1f7b265 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -133,8 +133,8 @@ const ControlMain = () => { }; //날씨 API const rq = { - nx: 37.4562557, - ny: 126.7052062 + nx: 37.558522, + ny: 126.793722 }; useEffect(() => { dispatch(controlweatherAction.request(rq)); @@ -229,7 +229,7 @@ const ControlMain = () => {
{!isClickObject - ? '인천광역시' + ? '김포공항' : !controlDetail?.stAreaNm ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` : controlDetail?.stAreaNm}