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

김포공항 공역 색상 변경 및 재구분

master
junh_eee(이준희) 2 months ago
parent
69d8f9e8e7
commit
ebc875ef93
4 changed files with 164 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      src/components/map/geojson/flatGimpoAirportAirArea.json
  2. 100
      src/components/map/mapbox/MapBoxMap.js
  3. 51
      src/utility/MapUtils.js
  4. 61
      src/views/control/setting/ControlSetting.js

39
src/components/map/geojson/flatGimpoAirportAirArea.json
Unescape View File

@ -597,7 +597,8 @@
"properties": { "properties": {
"name": "120m 이하1", "name": "120m 이하1",
"description": "겉위 -> 겉아래", "description": "겉위 -> 겉아래",
"type": "0003" "type": "0003",
"divCd": "원추"
} }
}, },
{ {
@ -1316,7 +1317,8 @@
"properties": { "properties": {
"name": "120m 이하2", "name": "120m 이하2",
"description": "겉아래 -> 겉위", "description": "겉아래 -> 겉위",
"type": "0003" "type": "0003",
"divCd": "원추"
} }
}, },
{ {
@ -2299,8 +2301,8 @@
"properties": { "properties": {
"name": "81~100m 이하1", "name": "81~100m 이하1",
"description": "겉위 -> 겉아래", "description": "겉위 -> 겉아래",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -3107,8 +3109,8 @@
"properties": { "properties": {
"name": "61~80m 이하1", "name": "61~80m 이하1",
"description": "", "description": "",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -4087,8 +4089,8 @@
"properties": { "properties": {
"name": "45~60m 이하1", "name": "45~60m 이하1",
"description": "", "description": "",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -4817,8 +4819,8 @@
"properties": { "properties": {
"name": "81~100m 이하2", "name": "81~100m 이하2",
"description": "겉아래 -> 겉위", "description": "겉아래 -> 겉위",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -5370,8 +5372,8 @@
"properties": { "properties": {
"name": "61~80m 이하2", "name": "61~80m 이하2",
"description": "", "description": "",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -6097,8 +6099,8 @@
"properties": { "properties": {
"name": "45~60m 이하2", "name": "45~60m 이하2",
"description": "", "description": "",
"divCd": "3cut", "type": "0003",
"type": "0006" "divCd": "수평"
} }
}, },
{ {
@ -7200,7 +7202,8 @@
"properties": { "properties": {
"name": "비행불가", "name": "비행불가",
"description": "", "description": "",
"type": "0001" "type": "0003",
"divCd": "금지"
} }
}, },
{ {
@ -7291,7 +7294,8 @@
"properties": { "properties": {
"name": "비행불가1", "name": "비행불가1",
"description": "tl, tr, br, bl", "description": "tl, tr, br, bl",
"type": "0001" "type": "0003",
"divCd": "금지"
} }
}, },
{ {
@ -7368,7 +7372,8 @@
"properties": { "properties": {
"name": "비행불가2", "name": "비행불가2",
"description": "br, bl, tl, tr", "description": "br, bl, tl, tr",
"type": "0001" "type": "0003",
"divCd": "금지"
} }
} }
] ]

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

@ -174,9 +174,46 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
useEffect(() => { useEffect(() => {
if (mapObject) { if (mapObject) {
handlerCreateAirSpace(mapObject); handlerCreateAirSpace(mapObject);
handlerCreateOperation(mapObject);
} }
}, [mapState?.areaType]); }, [mapState?.areaType]);
// 운항과 레이어 추가
const handlerCreateOperation = map => {
// if (map.getLayer('operationLayer')) {
// map.removeLayer('operationLayer-center');
// map.removeLayer('operationLayer-circle');
// map.removeSource('operationLayer');
// }
// map.addSource('operationLayer', {
// type: 'geojson',
// data: {}
// });
// map.addLayer({
// id: 'operation-center',
// type: 'circle',
// source: 'operationLayer',
// paint: {
// 'circle-radius': 5,
// 'circle-color': '#8a1c05',
// 'circle-stroke-color': '#000000',
// 'circle-stroke-width': 1
// },
// filter: ['in', '$type', 'Point']
// });
// map.addLayer({
// id: 'operation-circle',
// type: 'fill',
// source: 'operationLayer',
// layout: {},
// paint: {
// 'fill-color': '#8a1c05',
// 'fill-opacity': 0.5,
// 'fill-outline-color': '#000000'
// },
// filter: ['in', '$type', 'Polygon']
// });
};
// 공역 생성 // 공역 생성
const handlerCreateAirSpace = ( const handlerCreateAirSpace = (
map, map,
@ -320,8 +357,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#FF3648', color: '#FF3648'
stroke: '#FF3648'
} }
}); });
} else if (item.properties.type === '0002' && mapState.area0002) { } else if (item.properties.type === '0002' && mapState.area0002) {
@ -329,17 +365,33 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#FFA1AA', color: '#FFA1AA'
stroke: '#FFA1AA'
} }
}); });
} else if (item.properties.type === '0003' && mapState.area0003) { } else if (item.properties.type === '0003' && mapState.area0003) {
let color = '#f5dcab';
let stroke = '#54797d';
if (item.properties?.divCd) {
const divCd = item.properties.divCd;
if (divCd === '원추') {
color = '#f5dcab';
stroke = '#54797d';
} else if (divCd === '수평') {
color = '#a4edf5';
stroke = '#54797d';
} else if (divCd === '금지') {
color = '#FF3648';
stroke = '#54797d';
}
}
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#f5dcab', color: color,
stroke: '#f5dcab' stroke: stroke,
opacity: 0.3
} }
}); });
} else if (item.properties.type === '0004' && mapState.area0004) { } else if (item.properties.type === '0004' && mapState.area0004) {
@ -347,8 +399,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#A16B00', color: '#A16B00'
stroke: '#A16B00'
} }
}); });
} else if (item.properties.type === '0005' && mapState.area0005) { } else if (item.properties.type === '0005' && mapState.area0005) {
@ -356,32 +407,17 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#AB40FF', color: '#AB40FF'
stroke: '#AB40FF'
} }
}); });
} else if (item.properties.type === '0006' && mapState.area0006) { } else if (item.properties.type === '0006' && mapState.area0006) {
if (item.properties?.divCd) { arrGeoJson.push({
if (item.properties.divCd === '3cut') { ...item,
arrGeoJson.push({ properties: {
...item, ...item.properties,
properties: { color: '#009cad'
...item.properties,
color: '#a4edf5',
stroke: '#54797d'
}
});
} }
} else { });
arrGeoJson.push({
...item,
properties: {
...item.properties,
color: '#a4edf5',
stroke: '#a4edf5'
}
});
}
} }
}); });
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon');
@ -400,9 +436,9 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
layout: {}, layout: {},
paint: { paint: {
'fill-color': ['get', 'color'], 'fill-color': ['get', 'color'],
'fill-outline-color': ['get', 'stroke'], 'fill-outline-color': ['coalesce', ['get', 'stroke'], ['get', 'color']],
// 'fill-extrusion-height': 3000, // 'fill-extrusion-height': 3000,
'fill-opacity': 0.5 'fill-opacity': ['coalesce', ['get', 'opacity'], 0.5]
} }
}); });
}; };

51
src/utility/MapUtils.js
Unescape View File

@ -349,32 +349,68 @@ export const handlerCreateAirSpace = (
if (item.properties.type === '0001' && mapControl.area0001) { if (item.properties.type === '0001' && mapControl.area0001) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#FF3648' } properties: {
...item.properties,
color: '#FF3648'
}
}); });
} else if (item.properties.type === '0002' && mapControl.area0002) { } else if (item.properties.type === '0002' && mapControl.area0002) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#FFA1AA' } properties: {
...item.properties,
color: '#FFA1AA'
}
}); });
} else if (item.properties.type === '0003' && mapControl.area0003) { } else if (item.properties.type === '0003' && mapControl.area0003) {
let color = '#f5dcab';
let stroke = '#54797d';
if (item.properties?.divCd) {
const divCd = item.properties.divCd;
if (divCd === '원추') {
color = '#f5dcab';
stroke = '#54797d';
} else if (divCd === '수평') {
color = '#a4edf5';
stroke = '#54797d';
} else if (divCd === '금지') {
color = '#FF3648';
stroke = '#54797d';
}
}
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#FFA800' } properties: {
...item.properties,
color: color,
stroke: stroke,
opacity: 0.3
}
}); });
} else if (item.properties.type === '0004' && mapControl.area0004) { } else if (item.properties.type === '0004' && mapControl.area0004) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#A16B00' } properties: {
...item.properties,
color: '#A16B00'
}
}); });
} else if (item.properties.type === '0005' && mapControl.area0005) { } else if (item.properties.type === '0005' && mapControl.area0005) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#AB40FF' } properties: {
...item.properties,
color: '#AB40FF'
}
}); });
} else if (item.properties.type === '0006' && mapControl.area0006) { } else if (item.properties.type === '0006' && mapControl.area0006) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { ...item.properties, color: '#009cad' } properties: {
...item.properties,
color: '#009cad'
}
}); });
} }
}); });
@ -394,8 +430,9 @@ export const handlerCreateAirSpace = (
layout: {}, layout: {},
paint: { paint: {
'fill-color': ['get', 'color'], 'fill-color': ['get', 'color'],
'fill-outline-color': ['coalesce', ['get', 'stroke'], ['get', 'color']],
// 'fill-extrusion-height': 3000, // 'fill-extrusion-height': 3000,
'fill-opacity': 0.5 'fill-opacity': ['coalesce', ['get', 'opacity'], 0.5]
} }
}); });
}; };

61
src/views/control/setting/ControlSetting.js
Unescape View File

@ -54,8 +54,7 @@ const ControlSetting = props => {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#FF3648', color: '#FF3648'
stroke: '#FF3648'
} }
}); });
} else if (item.properties.type === '0002' && mapState.area0002) { } else if (item.properties.type === '0002' && mapState.area0002) {
@ -63,26 +62,41 @@ const ControlSetting = props => {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#FFA1AA', color: '#FFA1AA'
stroke: '#FFA1AA'
} }
}); });
} else if (item.properties.type === '0003' && mapState.area0003) { } else if (item.properties.type === '0003' && mapState.area0003) {
let color = '#f5dcab';
let stroke = '#54797d';
if (item.properties?.divCd) {
const divCd = item.properties.divCd;
if (divCd === '원추') {
color = '#f5dcab';
stroke = '#54797d';
} else if (divCd === '수평') {
color = '#a4edf5';
stroke = '#54797d';
} else if (divCd === '금지') {
color = '#FF3648';
stroke = '#54797d';
}
}
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#f5dcab', color: color,
stroke: '#f5dcab' stroke: stroke,
} //FFA800 opacity: 0.3
}
}); });
} else if (item.properties.type === '0004' && mapState.area0004) { } else if (item.properties.type === '0004' && mapState.area0004) {
arrGeoJson.push({ arrGeoJson.push({
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#A16B00', color: '#A16B00'
stroke: '#A16B00'
} }
}); });
} else if (item.properties.type === '0005' && mapState.area0005) { } else if (item.properties.type === '0005' && mapState.area0005) {
@ -90,32 +104,17 @@ const ControlSetting = props => {
...item, ...item,
properties: { properties: {
...item.properties, ...item.properties,
color: '#AB40FF', color: '#AB40FF'
stroke: '#AB40FF'
} }
}); });
} else if (item.properties.type === '0006' && mapState.area0006) { } else if (item.properties.type === '0006' && mapState.area0006) {
if (item.properties?.divCd) { arrGeoJson.push({
if (item.properties.divCd === '3cut') { ...item,
arrGeoJson.push({ properties: {
...item, ...item.properties,
properties: { color: '#009cad'
...item.properties,
color: '#a4edf5',
stroke: '#54797d'
}
});
} }
} else { });
arrGeoJson.push({
...item,
properties: {
...item.properties,
color: '#a4edf5',
stroke: '#a4edf5'
}
});
}
} }
}); });

Write Preview
Loading…
Cancel
Save