pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

시뮬레이션 폴더 정리

pull/2/head
junh_eee(이준희) 10 months ago
parent
2a30ccbc3c
commit
0c11d227e8
7 changed files with 207 additions and 317 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/analysis/simulation/AnalysisSimuationInfo.js
  2. 185
      src/components/analysis/simulation/AnalysisSimulationMap.js
  3. 46
      src/components/analysis/simulation/AnalysisSimulationMarker.js
  4. 26
      src/components/analysis/simulation/AnalysisSimulationPolyline.js
  5. 230
      src/components/map/nhn/NMap.js
  6. 19
      src/containers/analysis/simulator/AnalysisSimulationContainer.js
  7. 14
      src/containers/basis/flight/plan/FlightPlanAreaContainer.js

2
src/components/analysis/simulation/AnalysimuationInfo.js → src/components/analysis/simulation/AnalysisSimuationInfo.js
Unescape View File

@ -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);

185
src/components/analysis/simulation/AnalysisSimulationMap.js
Unescape View File

@ -1,5 +1,184 @@
import { NMap } from '../../map/nhn/NMap';
import { useEffect, useRef } from 'react';
export const AnalysisSimulationMap = () => {
return <NMap />;
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 (
<div
id='map'
ref={mapContainer}
style={{ width: '100%', height: '100vh' }}
></div>
);
};

46
src/components/map/nhn/NMapMarker.js → src/components/analysis/simulation/AnalysisSimulationMarker.js
Unescape View File

@ -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;

26
src/components/map/nhn/NMapPolyline.js → src/components/analysis/simulation/AnalysisSimulationPolyline.js
Unescape View File

@ -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;
};

230
src/components/map/nhn/NMap.js
Unescape View File

@ -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 (
<div
id='map'
ref={mapContainer}
style={{ width: '100%', height: '100vh' }}
></div>
);
};

19
src/containers/analysis/simulator/AnalysisSimulationContainer.js
Unescape View File

@ -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 (
// <CustomMainLayout title={titleName}>
<div className='pal-container'>
<div className='map'>
<NMap setMapObject={setMapObject} />
{/* <MapBoxMap /> */}
<AnalysisSimulationMap setMapObject={setMapObject} />
</div>
<AnalysisSimulationMenu
@ -248,7 +245,7 @@ export const AnalysisSimulationContainer = props => {
handlerOpenReportList={handlerOpenReportList}
/>
<AnalysimuationInfo
<AnalysisSimulationInfo
data={list}
count={count}
handlerDetail={handlerDetail}
@ -278,14 +275,14 @@ export const AnalysisSimulationContainer = props => {
dronLength={dronLength}
countArray={countArray}
/>
<NMapPolyline
<AnalysisSimulationPolyline
data={log}
info={info}
map={mapObject}
selPolyline={selPolyline}
setSelPolyline={setSelPolyline}
/>
<NMapMarker
<AnalysisSimulationMarker
data={log}
info={info}
map={mapObject}

14
src/containers/basis/flight/plan/FlightPlanAreaContainer.js
Unescape View File

@ -5,7 +5,6 @@ import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAc
import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap';
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
import FlightPlanAreaDetailContainer from './FlightPlanAreaDetailContainer';
import { FlightPlanAreaMapBox } from '../../../../components/basis/flight/plan/FlightPlanAreaMapBox';
const FlightPlanAreaContainer = ({ handleModal, isDone, isDisabled }) => {
const dispatch = useDispatch();
@ -39,13 +38,12 @@ const FlightPlanAreaContainer = ({ handleModal, isDone, isDisabled }) => {
<Row>
<Col md={6} lg={6}>
{airArea != null ? (
// <FlightPlanAreaMap
// airArea={airArea}
// handleConfirm={handleConfirm}
// isDone={isDone}
// isDisabled={isDisabled}
// />
<FlightPlanAreaMapBox isDone={isDone} isDisabled={isDisabled} />
<FlightPlanAreaMap
airArea={airArea}
handleConfirm={handleConfirm}
isDone={isDone}
isDisabled={isDisabled}
/>
) : null}
</Col>
<Col md={6} lg={6}>

Write Preview
Loading…
Cancel
Save