드론교통관리 송전탑 마커 표출

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