diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index fd98985..3f85905 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -1,26 +1,18 @@ import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import dronicon from '../../../assets/control/icon/drone.png'; import { DronMarker } from './dron/DronMarker'; import { DronHistory } from './dron/DronHistory'; - import NaverMapControl from './NaverMapControl'; import { NaverMapSearch } from './search/NaverMapSearch'; import { FeatureAirZone } from './feature/FeatureAirZone'; import geoJson from '../geojson/airArea.json'; -import SensorZone from "./sensor/SensorZone"; import { controlGroupAuthAction } from '../../../modules/control/gp'; import DronPlan from './dron/DronPlan'; -import DronToast from './dron/DronToast'; -import { toast } from 'react-toastify'; export const NaverCustomMap = () => { const dispatch = useDispatch(); - const naver = window.naver; - - // const { controlGpContains } = useSelector(state => state.controlGpFltPlanState); - - const [isMapLoad, setIsMapLoad] = useState(false); + const naver = window.naver; + const [mapObject, setMapObject] = useState(null); const [arrPolyline, setArrPolyline] = useState([]); @@ -39,7 +31,7 @@ export const NaverCustomMap = () => { center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), zoom: 10, zoomControl: true, - mapTypeId: naver.maps.MapTypeId.HYBRID, + mapTypeId: naver.maps.MapTypeId.NORMAR, zoomControlOptions: { position: naver.maps.Position.TOP_LEFT, diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index f61ab98..3bd155c 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -105,6 +105,9 @@ export const DronMarker = props => { marker.setMap(props.map); + // drone 정보 창 + markerInfoWindow(marker); + naver.maps.Event.addListener(marker, 'click', function (e) { handlerDronClick(marker); }); @@ -182,5 +185,43 @@ export const DronMarker = props => { setArrMarkers(arrData); }; + const markerInfoWindow = (marker) => { + controlGpList.forEach(gps => { + + const contents = [ + `
`, + `
`, + ` ${marker.id}`, + `
`, + `
`, + `
`, + ` ${gps.speed}${gps.speedType}`, + `
`, + `
`, + ` ${gps.elev}${gps.elevType}`, + `
`, + `
`, + ` ${gps.heading}`, + `
`, + `
`, + `
` + ].join(''); + + const info = new naver.maps.InfoWindow({ + id: marker.id, + content: contents, + backgroundColor: '#283046', //박스안쪽영역 컬러 + anchorSize: new props.naver.maps.Size(30, -10), + anchorSkew: false, + anchorColor: '#283046', + pixelOffset: new props.naver.maps.Point(20, -20) + }); + + console.log(info); + + info.open(props.map, marker); + }); + } + return null; }; diff --git a/src/components/map/naver/dron/DronPlan.js b/src/components/map/naver/dron/DronPlan.js index bb8e03d..c669b16 100644 --- a/src/components/map/naver/dron/DronPlan.js +++ b/src/components/map/naver/dron/DronPlan.js @@ -11,9 +11,7 @@ const DronPlan = ({ naver, map }) => { const { controlGpList } = useSelector(state => state.controlGpState); const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState); const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); - const { controlGpContains } = useSelector(state => state.controlGpFltPlanState); - - + const [area, setArea] = useState(); // 비행 구역 관리 const [buffer, setBuffer] = useState(); // 버퍼 구역 관리 const [controlId, setControlId] = useState(); // 식별번호 저장 diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index 0eb82f5..116007a 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -1,6 +1,6 @@ // ** Initial State const initialState = { - mapType: 'HYBRID', + mapType: 'NORMAL', objectId: null, isClickObject: false, area0001: true, // 비행금지 구역