관제 공역 3d화 테스트

src/components/map/mapbox/MapBoxMap.js

@@ -325,24 +325,24 @@ export default function MapBoxMap() {
       // });
       // 지형 3d end
       // 등고선 start
-      map.addLayer({
-        id: 'contours',
-        type: 'line',
-        source: {
-          type: 'vector',
-          url: 'mapbox://mapbox.mapbox-terrain-v2'
-        },
-        'source-layer': 'contour',
-        layout: {
-          visibility: 'visible',
-          'line-join': 'round',
-          'line-cap': 'round'
-        },
-        paint: {
-          'line-color': '#877b59',
-          'line-width': 1
-        }
-      });
+      // map.addLayer({
+      //   id: 'contours',
+      //   type: 'line',
+      //   source: {
+      //     type: 'vector',
+      //     url: 'mapbox://mapbox.mapbox-terrain-v2'
+      //   },
+      //   'source-layer': 'contour',
+      //   layout: {
+      //     visibility: 'visible',
+      //     'line-join': 'round',
+      //     'line-cap': 'round'
+      //   },
+      //   paint: {
+      //     'line-color': '#877b59',
+      //     'line-width': 1
+      //   }
+      // });
       // 등고선 end
       // 3d building
       map.addLayer(
@@ -437,7 +437,9 @@ export default function MapBoxMap() {
           });
         }
       });
-      useGeoJson.features = arrGeoJson;
+      useGeoJson.features = arrGeoJson.filter(
+        i => i.geometry.type === 'Polygon'
+      );
 
       // 공역 생성 start
       map.addSource('maine', {
@@ -448,12 +450,13 @@ export default function MapBoxMap() {
       });
       map.addLayer({
         id: 'maine',
-        type: 'fill',
+        type: 'fill-extrusion',
         source: 'maine',
         layout: {},
         paint: {
-          'fill-color': ['get', 'color'],
-          'fill-opacity': 0.5
+          'fill-extrusion-color': ['get', 'color'],
+          'fill-extrusion-height': 3000,
+          'fill-extrusion-opacity': 0.5
         }
       });
       // 공역 생성 end