From ebc875ef939752305d55c9563cbcfd92df7fff8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 30 Jul 2024 19:23:02 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B9=80=ED=8F=AC=EA=B3=B5=ED=95=AD=20?= =?UTF-8?q?=EA=B3=B5=EC=97=AD=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9E=AC=EA=B5=AC=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/geojson/flatGimpoAirportAirArea.json | 39 ++++--- src/components/map/mapbox/MapBoxMap.js | 100 ++++++++++++------ src/utility/MapUtils.js | 51 +++++++-- src/views/control/setting/ControlSetting.js | 61 ++++++----- 4 files changed, 164 insertions(+), 87 deletions(-) diff --git a/src/components/map/geojson/flatGimpoAirportAirArea.json b/src/components/map/geojson/flatGimpoAirportAirArea.json index fd6e55fb..2fedf327 100644 --- a/src/components/map/geojson/flatGimpoAirportAirArea.json +++ b/src/components/map/geojson/flatGimpoAirportAirArea.json @@ -597,7 +597,8 @@ "properties": { "name": "120m 이하1", "description": "겉위 -> 겉아래", - "type": "0003" + "type": "0003", + "divCd": "원추" } }, { @@ -1316,7 +1317,8 @@ "properties": { "name": "120m 이하2", "description": "겉아래 -> 겉위", - "type": "0003" + "type": "0003", + "divCd": "원추" } }, { @@ -2299,8 +2301,8 @@ "properties": { "name": "81~100m 이하1", "description": "겉위 -> 겉아래", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -3107,8 +3109,8 @@ "properties": { "name": "61~80m 이하1", "description": "", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -4087,8 +4089,8 @@ "properties": { "name": "45~60m 이하1", "description": "", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -4817,8 +4819,8 @@ "properties": { "name": "81~100m 이하2", "description": "겉아래 -> 겉위", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -5370,8 +5372,8 @@ "properties": { "name": "61~80m 이하2", "description": "", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -6097,8 +6099,8 @@ "properties": { "name": "45~60m 이하2", "description": "", - "divCd": "3cut", - "type": "0006" + "type": "0003", + "divCd": "수평" } }, { @@ -7200,7 +7202,8 @@ "properties": { "name": "비행불가", "description": "", - "type": "0001" + "type": "0003", + "divCd": "금지" } }, { @@ -7291,7 +7294,8 @@ "properties": { "name": "비행불가1", "description": "tl, tr, br, bl", - "type": "0001" + "type": "0003", + "divCd": "금지" } }, { @@ -7368,7 +7372,8 @@ "properties": { "name": "비행불가2", "description": "br, bl, tl, tr", - "type": "0001" + "type": "0003", + "divCd": "금지" } } ] diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 13fb503f..358198d2 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -174,9 +174,46 @@ export default function MapBoxMap({ handlerDrawObjInit }) { useEffect(() => { if (mapObject) { handlerCreateAirSpace(mapObject); + handlerCreateOperation(mapObject); } }, [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 = ( map, @@ -320,8 +357,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...item, properties: { ...item.properties, - color: '#FF3648', - stroke: '#FF3648' + color: '#FF3648' } }); } else if (item.properties.type === '0002' && mapState.area0002) { @@ -329,17 +365,33 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...item, properties: { ...item.properties, - color: '#FFA1AA', - stroke: '#FFA1AA' + color: '#FFA1AA' } }); } 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({ ...item, properties: { ...item.properties, - color: '#f5dcab', - stroke: '#f5dcab' + color: color, + stroke: stroke, + opacity: 0.3 } }); } else if (item.properties.type === '0004' && mapState.area0004) { @@ -347,8 +399,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...item, properties: { ...item.properties, - color: '#A16B00', - stroke: '#A16B00' + color: '#A16B00' } }); } else if (item.properties.type === '0005' && mapState.area0005) { @@ -356,32 +407,17 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...item, properties: { ...item.properties, - color: '#AB40FF', - stroke: '#AB40FF' + color: '#AB40FF' } }); } else if (item.properties.type === '0006' && mapState.area0006) { - if (item.properties?.divCd) { - if (item.properties.divCd === '3cut') { - arrGeoJson.push({ - ...item, - properties: { - ...item.properties, - color: '#a4edf5', - stroke: '#54797d' - } - }); + arrGeoJson.push({ + ...item, + properties: { + ...item.properties, + color: '#009cad' } - } else { - arrGeoJson.push({ - ...item, - properties: { - ...item.properties, - color: '#a4edf5', - stroke: '#a4edf5' - } - }); - } + }); } }); useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); @@ -400,9 +436,9 @@ export default function MapBoxMap({ handlerDrawObjInit }) { layout: {}, paint: { 'fill-color': ['get', 'color'], - 'fill-outline-color': ['get', 'stroke'], + 'fill-outline-color': ['coalesce', ['get', 'stroke'], ['get', 'color']], // 'fill-extrusion-height': 3000, - 'fill-opacity': 0.5 + 'fill-opacity': ['coalesce', ['get', 'opacity'], 0.5] } }); }; diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index 97a851e8..3307e97b 100644 --- a/src/utility/MapUtils.js +++ b/src/utility/MapUtils.js @@ -349,32 +349,68 @@ export const handlerCreateAirSpace = ( if (item.properties.type === '0001' && mapControl.area0001) { arrGeoJson.push({ ...item, - properties: { ...item.properties, color: '#FF3648' } + properties: { + ...item.properties, + color: '#FF3648' + } }); } else if (item.properties.type === '0002' && mapControl.area0002) { arrGeoJson.push({ ...item, - properties: { ...item.properties, color: '#FFA1AA' } + properties: { + ...item.properties, + color: '#FFA1AA' + } }); } 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({ ...item, - properties: { ...item.properties, color: '#FFA800' } + properties: { + ...item.properties, + color: color, + stroke: stroke, + opacity: 0.3 + } }); } else if (item.properties.type === '0004' && mapControl.area0004) { arrGeoJson.push({ ...item, - properties: { ...item.properties, color: '#A16B00' } + properties: { + ...item.properties, + color: '#A16B00' + } }); } else if (item.properties.type === '0005' && mapControl.area0005) { arrGeoJson.push({ ...item, - properties: { ...item.properties, color: '#AB40FF' } + properties: { + ...item.properties, + color: '#AB40FF' + } }); } else if (item.properties.type === '0006' && mapControl.area0006) { arrGeoJson.push({ ...item, - properties: { ...item.properties, color: '#009cad' } + properties: { + ...item.properties, + color: '#009cad' + } }); } }); @@ -394,8 +430,9 @@ export const handlerCreateAirSpace = ( layout: {}, paint: { 'fill-color': ['get', 'color'], + 'fill-outline-color': ['coalesce', ['get', 'stroke'], ['get', 'color']], // 'fill-extrusion-height': 3000, - 'fill-opacity': 0.5 + 'fill-opacity': ['coalesce', ['get', 'opacity'], 0.5] } }); }; diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index bcb0f1f8..e231acea 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -54,8 +54,7 @@ const ControlSetting = props => { ...item, properties: { ...item.properties, - color: '#FF3648', - stroke: '#FF3648' + color: '#FF3648' } }); } else if (item.properties.type === '0002' && mapState.area0002) { @@ -63,26 +62,41 @@ const ControlSetting = props => { ...item, properties: { ...item.properties, - color: '#FFA1AA', - stroke: '#FFA1AA' + color: '#FFA1AA' } }); } 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({ ...item, properties: { ...item.properties, - color: '#f5dcab', - stroke: '#f5dcab' - } //FFA800 + color: color, + stroke: stroke, + opacity: 0.3 + } }); } else if (item.properties.type === '0004' && mapState.area0004) { arrGeoJson.push({ ...item, properties: { ...item.properties, - color: '#A16B00', - stroke: '#A16B00' + color: '#A16B00' } }); } else if (item.properties.type === '0005' && mapState.area0005) { @@ -90,32 +104,17 @@ const ControlSetting = props => { ...item, properties: { ...item.properties, - color: '#AB40FF', - stroke: '#AB40FF' + color: '#AB40FF' } }); } else if (item.properties.type === '0006' && mapState.area0006) { - if (item.properties?.divCd) { - if (item.properties.divCd === '3cut') { - arrGeoJson.push({ - ...item, - properties: { - ...item.properties, - color: '#a4edf5', - stroke: '#54797d' - } - }); + arrGeoJson.push({ + ...item, + properties: { + ...item.properties, + color: '#009cad' } - } else { - arrGeoJson.push({ - ...item, - properties: { - ...item.properties, - color: '#a4edf5', - stroke: '#a4edf5' - } - }); - } + }); } });