|
|
@ -6,80 +6,81 @@ import NaverMapControl from './NaverMapControl'; |
|
|
|
import { NaverMapSearch } from './search/NaverMapSearch'; |
|
|
|
import { NaverMapSearch } from './search/NaverMapSearch'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
|
|
|
|
import testJosn from '../geojson/airTest.json'; |
|
|
|
import { controlGroupAuthAction } from '../../../modules/control/gp'; |
|
|
|
import { controlGroupAuthAction } from '../../../modules/control/gp'; |
|
|
|
import DronPlan from './dron/DronPlan'; |
|
|
|
import DronPlan from './dron/DronPlan'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
|
|
|
|
import SensorZone from './sensor/SensorZone'; |
|
|
|
|
|
|
|
|
|
|
|
export const NaverCustomMap = () => { |
|
|
|
export const NaverCustomMap = () => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const naver = window.naver;
|
|
|
|
const naver = window.naver; |
|
|
|
|
|
|
|
|
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
|
|
|
|
const [arrPolyline, setArrPolyline] = useState([]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let features = geoJson.features; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
NaverMapInit(); |
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
dispatch(controlGroupAuthAction.request()); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
let features = geoJson.features; |
|
|
|
const mapOptions = { |
|
|
|
let test = testJosn.features; |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
|
|
|
|
// zoom: 10,
|
|
|
|
|
|
|
|
zoom: 14, |
|
|
|
|
|
|
|
zoomControl: true, |
|
|
|
|
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAR, |
|
|
|
|
|
|
|
zoomControlOptions: { |
|
|
|
|
|
|
|
position: naver.maps.Position.TOP_LEFT, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
useEffect(() => { |
|
|
|
} |
|
|
|
NaverMapInit(); |
|
|
|
}; |
|
|
|
dispatch(controlGroupAuthAction.request()); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
const NaverMapInit = () => { |
|
|
|
|
|
|
|
const mapOptions = { |
|
|
|
|
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
|
|
|
|
// zoom: 10,
|
|
|
|
|
|
|
|
zoom: 14, |
|
|
|
|
|
|
|
zoomControl: true, |
|
|
|
|
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAR, |
|
|
|
|
|
|
|
zoomControlOptions: { |
|
|
|
|
|
|
|
position: naver.maps.Position.TOP_LEFT, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleHistoryInit = (line) => { |
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
setArrPolyline([...arrPolyline, line]) |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
const handleHistoryInit = line => { |
|
|
|
<> |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh' }}></div> |
|
|
|
}; |
|
|
|
{mapObject != null ? ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<DronMarker |
|
|
|
|
|
|
|
map={mapObject} |
|
|
|
|
|
|
|
naver={naver} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<DronPlan |
|
|
|
return ( |
|
|
|
map={mapObject} |
|
|
|
<> |
|
|
|
naver={naver} |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh' }}></div> |
|
|
|
/> |
|
|
|
{mapObject != null ? ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<DronMarker map={mapObject} naver={naver} /> |
|
|
|
|
|
|
|
|
|
|
|
<NaverMapControl map={mapObject} /> |
|
|
|
<DronPlan map={mapObject} naver={naver} /> |
|
|
|
|
|
|
|
|
|
|
|
<DronHistory |
|
|
|
<NaverMapControl map={mapObject} /> |
|
|
|
map={mapObject} |
|
|
|
|
|
|
|
naver={naver} |
|
|
|
|
|
|
|
arrPolyline={arrPolyline}
|
|
|
|
|
|
|
|
handleHistoryInit={handleHistoryInit} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<DronToast /> |
|
|
|
<DronHistory |
|
|
|
|
|
|
|
map={mapObject} |
|
|
|
|
|
|
|
naver={naver} |
|
|
|
|
|
|
|
arrPolyline={arrPolyline} |
|
|
|
|
|
|
|
handleHistoryInit={handleHistoryInit} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<FeatureAirZone map={mapObject} naver={naver} features={features} /> |
|
|
|
<DronToast /> |
|
|
|
{/* <NaverMapSearch map={mapObject} naver={naver} /> */} |
|
|
|
|
|
|
|
{/* <SensorZone map={mapObject} naver={naver} /> */} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* */} |
|
|
|
<FeatureAirZone |
|
|
|
|
|
|
|
map={mapObject} |
|
|
|
|
|
|
|
naver={naver} |
|
|
|
|
|
|
|
features={features} |
|
|
|
|
|
|
|
test={test} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
{/* <NaverMapSearch map={mapObject} naver={naver} /> */} |
|
|
|
|
|
|
|
{/* <SensorZone map={mapObject} naver={naver} /> */} |
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* */} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|