diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 478ca0a7..5be4ca14 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -366,7 +366,10 @@ export const FeatureAirZone = props => { // uam 셋팅 함수 const uamAirAreaInit = () => { if (number === 0) { + // uam노선 features const routeFeatures = uamRouteArea.features; + + // [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅 const routeLine = routeFeatures .filter(route => route.geometry.type === 'LineString') .map(line => { @@ -385,6 +388,29 @@ export const FeatureAirZone = props => { ); }); + // 송전선 features + const towerFeatures = uamTowerArea.features; + + // 송전탑 마커 생성 + towerFeatures + .filter(tower => tower.properties.type === 'towerPoint') + .map((point, idx) => { + const el = document.createElement('img'); + el.id = `tower${idx}`; + el.src = towerImg; + el.style.width = '20px'; + el.style.height = '20px'; + + new props.mapboxgl.Marker({ + element: el + }) + .setLngLat( + props.mapboxgl.LngLat.convert(point.geometry.coordinates) + ) + .addTo(props.map); + }); + + // uam 관련 Source, Layer props.map.addSource('uam', { type: 'geojson', data: uamGeoJson @@ -441,8 +467,7 @@ export const FeatureAirZone = props => { }, paint: { 'line-color': '#960018', - 'line-width': 1, - 'line-dasharray': [5, 5] + 'line-width': 1 }, filter: ['==', ['get', 'type'], 'towerLine'] });