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