pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

김포공항 관제권 장애물표현 geojson 파일 생성

pull/2/head
김장현 1 year ago
parent
6e495befef
commit
ae3e9331c0
2 changed files with 3003 additions and 129 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. 2870
      src/components/map/geojson/gimpoAirportAirArea.json
  2. 262
      src/components/map/mapbox/MapBoxMap.js

2870
src/components/map/geojson/gimpoAirportAirArea.json
View File

File diff suppressed because it is too large Load Diff

262
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -11,7 +11,7 @@ import { DronMarker } from './dron/DronMarker';
// import { NaverMapSearch } from './search/NaverMapSearch';
import { FeatureAirZone } from './feature/FeatureAirZone';
import geoJson from '../../map/geojson/airArea.json';
import gimPo from '../../map/geojson/airportAirArea.json';
import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
// import DronPlan from './dron/DronPlan';
// import NewDronPlan from './dron/NewDronPlan';
// import { NewDronHistory } from './dron/NewDronHistroy';
@ -224,7 +224,6 @@ export default function MapBoxMap() {
useEffect(() => {
if (mapObject) {
console.log('????');
uamPosition.features.map(uam => {
const el = document.createElement('div');
const elChild = document.createElement('span');
@ -247,11 +246,87 @@ export default function MapBoxMap() {
}
}, [mapObject]);
// useEffect(() => {
// if (mapObject) {
// mapObject.setStyle('mapbox://styles/mapbox/streets-v12');
// }
// }, [mapControl, mapObject]);
useEffect(() => {
if (mapObject) {
console.log(mapControl);
handlerCreateAirSpace(mapObject);
}
}, [
mapControl.area0001,
mapControl.area0002,
mapControl.area0003,
mapControl.area0004,
mapControl.area0005,
mapControl.area0006
]);
const handlerCreateAirSpace = (
map,
useGeoJson = {
...geoJson,
features: [...geoJson.features, ...gimPo.features]
}
) => {
if (map.getLayer('maine')) {
map.removeLayer('maine');
map.removeSource('maine');
}
let arrGeoJson = [];
useGeoJson.features.map(item => {
if (item.properties.type === '0001' && mapControl.area0001) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FF3648' }
});
} else if (item.properties.type === '0002' && mapControl.area0002) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FFA1AA' }
});
} else if (item.properties.type === '0003' && mapControl.area0003) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FFA800' }
});
} else if (item.properties.type === '0004' && mapControl.area0004) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#A16B00' }
});
} else if (item.properties.type === '0005' && mapControl.area0005) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#AB40FF' }
});
} else if (item.properties.type === '0006' && mapControl.area0006) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#009cad' }
});
}
});
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon');
// 공역 생성 start
map.addSource('maine', {
type: 'geojson',
data: {
...useGeoJson
}
});
map.addLayer({
id: 'maine',
type: 'fill',
source: 'maine',
layout: {},
paint: {
'fill-color': ['get', 'color'],
// 'fill-extrusion-height': 3000,
'fill-opacity': 0.5
}
});
};
const mapBoxMapInit = () => {
mapboxgl.accessToken = MAPBOX_TOKEN;
@ -262,11 +337,13 @@ export default function MapBoxMap() {
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);
// 드래그 제한 2d
map.dragRotate.disable();
// const tb = (window.tb = new threebox.Threebox(
// map,
// map.getCanvas().getContext('webgl'),
@ -286,13 +363,15 @@ export default function MapBoxMap() {
).id;
// 지형 3d start
map.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxZoom: 14
});
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
// map.addSource('mapbox-dem', {
// type: 'raster-dem',
// url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
// tileSize: 512,
// maxZoom: 14,
// pitch: 0, // Set pitch to 0 for a 2D view
// bearing: 0 // Set bearing to 0 for a north-up view
// });
// map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
// map.addLayer({
// id: 'contour-labels',
@ -345,122 +424,47 @@ export default function MapBoxMap() {
// });
// 등고선 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
let arrGeoJson = [];
const useGeoJson = {
...geoJson,
features: [...geoJson.features, ...gimPo.features]
};
// if (mapControl.mapType === 'NORMAL') {
// props.map.setStyle('mapbox://styles/mapbox/streets-v12');
// } else if (mapControl.mapType === 'TERRAIN') {
// // props.map.setMapTypeId(naver.maps.MapTypeId.TERRAIN);
// } else if (mapControl.mapType === 'HYBRID') {
// props.map.setStyle('mapbox://styles/mapbox/satellite-streets-v11');
// 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
// }
if (map.getLayer('maine')) {
map.removeLayer('maine');
map.removeSource('maine');
}
// },
// labelLayerId
// );
// 3d building
// 공역 색상 및 공역 표출 정보에 따른 노출
useGeoJson.features.map(item => {
if (item.properties.type === '0001' && mapControl.area0001) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FF3648' }
});
} else if (item.properties.type === '0002' && mapControl.area0002) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FFA1AA' }
});
} else if (item.properties.type === '0003' && mapControl.area0003) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#FFA800' }
});
} else if (item.properties.type === '0004' && mapControl.area0004) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#A16B00' }
});
} else if (item.properties.type === '0005' && mapControl.area0005) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#AB40FF' }
});
} else if (item.properties.type === '0006' && mapControl.area0006) {
arrGeoJson.push({
...item,
properties: { ...item.properties, color: '#009cad' }
});
}
});
useGeoJson.features = arrGeoJson.filter(
i => i.geometry.type === 'Polygon'
);
// 공역 생성 start
map.addSource('maine', {
type: 'geojson',
data: {
...useGeoJson
}
});
map.addLayer({
id: 'maine',
type: 'fill-extrusion',
source: 'maine',
layout: {},
paint: {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': 3000,
'fill-extrusion-opacity': 0.5
}
});
// 공역 생성 end
handlerCreateAirSpace(map);
setMapLoaded(true);
});
setMapObject(map);

Write Preview
Loading…
Cancel
Save