diff --git a/src/components/analysis/simulation/AnalysimuationInfo.js b/src/components/analysis/simulation/AnalysisSimuationInfo.js
similarity index 98%
rename from src/components/analysis/simulation/AnalysimuationInfo.js
rename to src/components/analysis/simulation/AnalysisSimuationInfo.js
index 95b65d3..f7a3d72 100644
--- a/src/components/analysis/simulation/AnalysimuationInfo.js
+++ b/src/components/analysis/simulation/AnalysisSimuationInfo.js
@@ -3,7 +3,7 @@ import { useEffect, useState, useRef, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { Spinner } from 'reactstrap';
-export const AnalysimuationInfo = props => {
+export const AnalysisSimulationInfo = props => {
const [target, setTarget] = useState(null);
const { loading } = useSelector(state => state.loadingReducer);
diff --git a/src/components/analysis/simulation/AnalysisSimulationMap.js b/src/components/analysis/simulation/AnalysisSimulationMap.js
index 7b92ba5..c3db44f 100644
--- a/src/components/analysis/simulation/AnalysisSimulationMap.js
+++ b/src/components/analysis/simulation/AnalysisSimulationMap.js
@@ -1,5 +1,184 @@
-import { NMap } from '../../map/nhn/NMap';
+import { useEffect, useRef } from 'react';
-export const AnalysisSimulationMap = () => {
- return ;
+import { MAPBOX_TOKEN } from '../../../configs/constants';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+import { Threebox } from 'threebox-plugin';
+import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
+
+export const AnalysisSimulationMap = props => {
+ const mapContainer = useRef(null);
+
+ useEffect(() => {
+ mapBoxMapInit();
+ }, []);
+
+ const mapBoxMapInit = () => {
+ mapboxgl.accessToken = MAPBOX_TOKEN;
+
+ const map = new mapboxgl.Map({
+ container: 'map', // container ID
+ style: 'mapbox://styles/mapbox/streets-v12', // style URL
+ center: [127.85101412107547, 37.520357], // starting position [lng, lat]
+ zoom: 8.5, // starting zoom
+ antialias: true
+ });
+
+ const language = new MapboxLanguage();
+ map.addControl(language);
+
+ map.on('style.load', () => {
+ const layers = map.getStyle().layers;
+
+ const labelLayerId = layers.find(
+ layer => layer.type === 'symbol' && layer.layout['text-field']
+ ).id;
+
+ // 지형 3d start
+ map.addSource('mapbox-dem', {
+ type: 'raster-dem',
+ url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+ tileSize: 512,
+ maxZoom: 16
+ });
+ map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
+ map.addLayer({
+ id: 'contour-labels',
+ type: 'symbol',
+ source: {
+ type: 'vector',
+ url: 'mapbox://mapbox.mapbox-terrain-v2'
+ },
+ 'source-layer': 'contour',
+ layout: {
+ visibility: 'visible',
+ 'symbol-placement': 'line',
+ 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
+ },
+ paint: {
+ 'icon-color': '#877b59',
+ 'icon-halo-width': 1,
+ 'text-color': '#877b59',
+ 'text-halo-width': 1
+ }
+ });
+ map.addLayer({
+ id: 'sky',
+ type: 'sky',
+ paint: {
+ 'sky-type': 'atmosphere',
+ 'sky-atmosphere-sun': [0.0, 90.0],
+ 'sky-atmosphere-sun-intensity': 15
+ }
+ });
+ // 지형 3d end
+ // 등고선 start
+ map.addLayer({
+ id: 'contours',
+ type: 'line',
+ source: {
+ type: 'vector',
+ url: 'mapbox://mapbox.mapbox-terrain-v2'
+ },
+ 'source-layer': 'contour',
+ layout: {
+ visibility: 'visible',
+ 'line-join': 'round',
+ 'line-cap': 'round'
+ },
+ paint: {
+ 'line-color': '#877b59',
+ 'line-width': 1
+ }
+ });
+ // 등고선 end
+ // 3d building
+ map.addLayer(
+ {
+ id: 'add-3d-buildings',
+ source: 'composite',
+ 'source-layer': 'building',
+ filter: ['==', 'extrude', 'true'],
+ type: 'fill-extrusion',
+ minzoom: 15,
+ paint: {
+ 'fill-extrusion-color': '#aaa',
+ 'fill-extrusion-height': [
+ 'interpolate',
+ ['linear'],
+ ['zoom'],
+ 15,
+ 0,
+ 15.05,
+ ['get', 'height']
+ ],
+ 'fill-extrusion-base': [
+ 'interpolate',
+ ['linear'],
+ ['zoom'],
+ 15,
+ 0,
+ 15.05,
+ ['get', 'min_height']
+ ],
+ 'fill-extrusion-opacity': 0.6
+ }
+ },
+ labelLayerId
+ );
+
+ // 3d building
+ props.setMapObject(map);
+ });
+
+ map.on('load', () => {
+ window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {});
+ map.addLayer({
+ id: '3d-line',
+ type: 'custom',
+ renderingMode: '3d',
+ onAdd: function () {
+ for (let i = 0; i < gimPo.features.length; i++) {
+ let line;
+ var options = {
+ path: gimPo.features[i].geometry.coordinates
+ };
+
+ for (let j = 0; j < options.path.length; j++) {
+ const lngLat = {
+ lng: options.path[j][0],
+ lat: options.path[j][1]
+ };
+ const elevation = Math.floor(map.queryTerrainElevation(lngLat));
+ // 지형 고도를 라인의 z 좌표로 설정합니다.
+ options.path[j][2] += elevation;
+ // console.log(options.path[j][2]);
+ }
+
+ let lineGeometry = options.path;
+ line = tb.line({
+ geometry: lineGeometry,
+ width: gimPo.features[i].properties['stroke-width'],
+ color: gimPo.features[i].properties.stroke
+ });
+
+ tb.add(line);
+ }
+ },
+ render: function () {
+ tb.update();
+ }
+ });
+ });
+ };
+
+ return (
+
+ );
};
diff --git a/src/components/map/nhn/NMapMarker.js b/src/components/analysis/simulation/AnalysisSimulationMarker.js
similarity index 57%
rename from src/components/map/nhn/NMapMarker.js
rename to src/components/analysis/simulation/AnalysisSimulationMarker.js
index 010abe6..0a0e201 100644
--- a/src/components/map/nhn/NMapMarker.js
+++ b/src/components/analysis/simulation/AnalysisSimulationMarker.js
@@ -1,10 +1,8 @@
-import { useEffect, useState } from 'react';
-import DronIcon from '../../../assets/images//drone-marker-icon.png';
+import { useEffect } from 'react';
+import DronIcon from '../../../assets/images/drone-marker-icon.png';
import mapboxgl from 'mapbox-gl';
-export const NMapMarker = props => {
- // const naver = window.naver;
- const [markerOption, setMarkerOption] = useState([]);
- // 드론 마커
+
+export const AnalysisSimulationMarker = props => {
const el = document.createElement('div');
el.className = 'marker';
el.style.width = '30px';
@@ -29,14 +27,10 @@ export const NMapMarker = props => {
}
}
setMarkerOption(val);
-
- props.data?.map((item, index) => {});
}
}, [props.data]);
useEffect(() => {
- // props.selMarker?.setPosition(position);
-
if (props.isPlay) {
if (props.marker) {
// 기존 마커 삭제
@@ -51,43 +45,14 @@ export const NMapMarker = props => {
.addTo(props.map);
props.setMarker(movemarker);
}
- // moveMarkers(props.selMarker, position);
}, [props.info]);
- useEffect(() => {}, [props.isPlay]);
const addMarkers = (position, id) => {
- //이미 지정된 마커 제거
- // var marker = new naver.maps.Marker({
- // position: position,
- // title: id,
- // id: id,
- // icon: {
- // url: DronIcon,
- // origin: new naver.maps.Point(0, 0),
- // anchor: new naver.maps.Point(15, 15)
- // }
- // });
+ // 이미 지정된 마커 제거
if (props.marker) {
props.marker.remove();
}
- const bounds = new mapboxgl.LngLatBounds(
- props.data[0][0],
- props.data[0][1]
- );
-
- // Extend the 'LngLatBounds' to include every coordinate in the bounds result.
- // bounds.extend();
-
- // props.map.fitBounds(bounds, {
- // padding: {
- // top: 0,
- // right: 0,
- // bottom: 400, // 하단에 패딩 추가
- // left: 350
- // },
- // zoom: 13
- // });
props.map.flyTo({
center: position,
zoom: 13,
@@ -104,9 +69,6 @@ export const NMapMarker = props => {
.addTo(props.map);
props.setMarker(newMarker);
props.setSelMarker(props.marker);
- // props.map.setCenter(position);
- // props.map.setZoom(14);
- //marker.setMap(props.0map);
};
return null;
diff --git a/src/components/map/nhn/NMapPolyline.js b/src/components/analysis/simulation/AnalysisSimulationPolyline.js
similarity index 67%
rename from src/components/map/nhn/NMapPolyline.js
rename to src/components/analysis/simulation/AnalysisSimulationPolyline.js
index 4192c8f..305b4c1 100644
--- a/src/components/map/nhn/NMapPolyline.js
+++ b/src/components/analysis/simulation/AnalysisSimulationPolyline.js
@@ -1,12 +1,7 @@
-import { useEffect, useState } from 'react';
-import mapboxgl from 'mapbox-gl';
+import { useEffect } from 'react';
-export const NMapPolyline = props => {
- // const naver = window.naver;
- let polyline;
- let polylinePath = [];
- const [check, setCheck] = useState(false);
- const [current, setCurrent] = useState(null);
+export const AnalysisSimulationPolyline = props => {
+ const polylinePath = [];
useEffect(() => {
// 기존 폴리라인 삭제 처리
@@ -18,26 +13,19 @@ export const NMapPolyline = props => {
if (props.map.getLayer('route')) {
props.map.removeLayer('route');
props.map.removeSource('route');
-
- // props.map.remove();
- } //
+ }
addPolyline();
}
}, [props.data]);
const addPolyline = () => {
- // if (check) {
- // return;
- // }
-
if (props.data && props.map) {
props.data.forEach(item => {
if (item.lat > 0 && item.lon > 0) {
polylinePath.push([item.lon, item.lat]);
}
});
- // props.map.on('load', () => {
props.map.addSource('route', {
type: 'geojson',
data: {
@@ -63,12 +51,8 @@ export const NMapPolyline = props => {
'line-width': 4
}
});
- // });
- //polyline.setPath(polylinePath);
-
- //polyline.setMap(props.map);
- //props.setSelPolyline(polyline);
}
};
+
return null;
};
diff --git a/src/components/map/nhn/NMap.js b/src/components/map/nhn/NMap.js
deleted file mode 100644
index 9cf0501..0000000
--- a/src/components/map/nhn/NMap.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-import { MAPBOX_TOKEN } from '../../../configs/constants';
-import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import mapboxgl from 'mapbox-gl';
-import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
-import { Threebox } from 'threebox-plugin';
-
-export const NMap = props => {
- const naver = window.naver;
- const [isMapLoaded, setMapLoaded] = useState(false);
- const [mapObject, setMapObject] = useState(null);
- const mapContainer = useRef(null);
-
- useEffect(() => {
- // mapInit();
- mapBoxMapInit();
- // setIsMapLoad(true);
- }, []);
- const mapBoxMapInit = () => {
- mapboxgl.accessToken = MAPBOX_TOKEN;
- // 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 map = new mapboxgl.Map({
- container: 'map', // container ID
- style: 'mapbox://styles/mapbox/streets-v12', // style URL
- center: [127.85101412107547, 37.520357], // starting position [lng, lat]
- zoom: 8.5, // starting zoom
- antialias: true
- // pitch: 64.9,
- // bearing: 172.5
- });
-
- const language = new MapboxLanguage();
- map.addControl(language);
-
- map.on('style.load', () => {
- const layers = map.getStyle().layers;
-
- const labelLayerId = layers.find(
- layer => layer.type === 'symbol' && layer.layout['text-field']
- ).id;
-
- // 지형 3d start
- map.addSource('mapbox-dem', {
- type: 'raster-dem',
- url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
- tileSize: 512,
- maxZoom: 16
- });
- map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
- map.addLayer({
- id: 'contour-labels',
- type: 'symbol',
- source: {
- type: 'vector',
- url: 'mapbox://mapbox.mapbox-terrain-v2'
- },
- 'source-layer': 'contour',
- layout: {
- visibility: 'visible',
- 'symbol-placement': 'line',
- 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
- },
- paint: {
- 'icon-color': '#877b59',
- 'icon-halo-width': 1,
- 'text-color': '#877b59',
- 'text-halo-width': 1
- }
- });
- map.addLayer({
- id: 'sky',
- type: 'sky',
- paint: {
- 'sky-type': 'atmosphere',
- 'sky-atmosphere-sun': [0.0, 90.0],
- 'sky-atmosphere-sun-intensity': 15
- }
- });
- // 지형 3d end
- // 등고선 start
- map.addLayer({
- id: 'contours',
- type: 'line',
- source: {
- type: 'vector',
- url: 'mapbox://mapbox.mapbox-terrain-v2'
- },
- 'source-layer': 'contour',
- layout: {
- visibility: 'visible',
- 'line-join': 'round',
- 'line-cap': 'round'
- },
- paint: {
- 'line-color': '#877b59',
- 'line-width': 1
- }
- });
- // 등고선 end
- // 3d building
- map.addLayer(
- {
- id: 'add-3d-buildings',
- source: 'composite',
- 'source-layer': 'building',
- filter: ['==', 'extrude', 'true'],
- type: 'fill-extrusion',
- minzoom: 15,
- paint: {
- 'fill-extrusion-color': '#aaa',
-
- // Use an 'interpolate' expression to
- // add a smooth transition effect to
- // the buildings as the user zooms in.
- 'fill-extrusion-height': [
- 'interpolate',
- ['linear'],
- ['zoom'],
- 15,
- 0,
- 15.05,
- ['get', 'height']
- ],
- 'fill-extrusion-base': [
- 'interpolate',
- ['linear'],
- ['zoom'],
- 15,
- 0,
- 15.05,
- ['get', 'min_height']
- ],
- 'fill-extrusion-opacity': 0.6
- }
- },
- labelLayerId
- );
-
- // 3d building
- props.setMapObject(map);
- setMapLoaded(true);
- });
-
- map.on('load', () => {
- window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {
- // realSunlight: true,
- // enableSelectingObjects: true,
- // enableTooltips: true
- });
- map.addLayer({
- id: '3d-line',
- type: 'custom',
- renderingMode: '3d',
- onAdd: function () {
- for (let i = 0; i < gimPo.features.length; i++) {
- let line;
- var options = {
- path: gimPo.features[i].geometry.coordinates
- };
-
- for (let j = 0; j < options.path.length; j++) {
- const lngLat = {
- lng: options.path[j][0],
- lat: options.path[j][1]
- };
- const elevation = Math.floor(map.queryTerrainElevation(lngLat));
- // 지형 고도를 라인의 z 좌표로 설정합니다.
- options.path[j][2] += elevation;
- // console.log(options.path[j][2]);
- }
-
- let lineGeometry = options.path;
- line = tb.line({
- geometry: lineGeometry,
- width: gimPo.features[i].properties['stroke-width'],
- color: gimPo.features[i].properties.stroke
- });
-
- tb.add(line);
- }
- },
- render: function () {
- tb.update();
- }
- });
- });
- // const mapInit = () => {
- // const mapOptions = {
- // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
- // zoom: 10,
- // zoomControl: true,
- // mapTypeId: naver.maps.MapTypeId.HYBRID,
- // zoomControlOptions: {
- // position: naver.maps.Position.TOP_LEFT,
- // style: naver.maps.ZoomControlStyle.SMALL
- // }
- // };
-
- // map = ;
- // props.setMapObject(new naver.maps.Map('map', mapOptions));
- // naver.maps.Event.addListener(map, 'click', function (e) {
-
- // });
-
- // naver.maps.Event.addListener(map, 'idle', function (e) {
-
- // });
- };
- return (
-
- );
-};
diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
index 2b52de8..5f37dae 100644
--- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js
+++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
@@ -4,13 +4,12 @@ import { useDispatch, useSelector } from 'react-redux';
import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail';
import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu';
import { AnalysisSimulationReport } from '../../../components/analysis/simulation/AnalysisSimulationReport';
-import { AnalysimuationInfo } from '../../../components/analysis/simulation/AnalysimuationInfo';
-import { NMap } from '../../../components/map/nhn/NMap';
-import { NMapMarker } from '../../../components/map/nhn/NMapMarker';
-import { NMapPolyline } from '../../../components/map/nhn/NMapPolyline';
+import { AnalysisSimulationInfo } from '../../../components/analysis/simulation/AnalysisSimuationInfo';
+import { AnalysisSimulationMap } from '../../../components/analysis/simulation/AnalysisSimulationMap';
+import { AnalysisSimulationPolyline } from '../../../components/analysis/simulation/AnalysisSimulationPolyline';
+import { AnalysisSimulationMarker } from '../../../components/analysis/simulation/AnalysisSimulationMarker';
import * as Actions from '../../../modules/analysis/simulation/actions/analysisSimulatorAction';
import * as Action from '../../../modules/account/login/actions/authAction';
-import MapBoxMap from '../../../components/map/mapbox/MapBoxMap';
let playCount = 0;
let playCounts = 0;
@@ -227,11 +226,9 @@ export const AnalysisSimulationContainer = props => {
[oepnReportList]
);
return (
- //
{
handlerOpenReportList={handlerOpenReportList}
/>
- {
dronLength={dronLength}
countArray={countArray}
/>
-
- {
const dispatch = useDispatch();
@@ -39,13 +38,12 @@ const FlightPlanAreaContainer = ({ handleModal, isDone, isDisabled }) => {
{airArea != null ? (
- //
-
+
) : null}