diff --git a/src/components/map/nhn/NMap.js b/src/components/map/nhn/NMap.js index 65825c7..154ae48 100644 --- a/src/components/map/nhn/NMap.js +++ b/src/components/map/nhn/NMap.js @@ -3,6 +3,8 @@ import { MAPBOX_TOKEN } from '../../../configs/constants'; import MapboxLanguage from '@mapbox/mapbox-gl-language'; import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; +import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; +import { Threebox } from 'threebox-plugin'; export const NMap = props => { const naver = window.naver; @@ -44,7 +46,7 @@ export const NMap = props => { const language = new MapboxLanguage(); map.addControl(language); - map.on('load', () => { + map.on('style.load', () => { const layers = map.getStyle().layers; const labelLayerId = layers.find( @@ -58,7 +60,7 @@ export const NMap = props => { tileSize: 512, maxZoom: 16 }); - map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); + map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); map.addLayer({ id: 'contour-labels', type: 'symbol', @@ -147,10 +149,55 @@ export const NMap = props => { }, labelLayerId ); + // 3d building props.setMapObject(map); setMapLoaded(true); }); + + map.on('load', () => { + window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), { + // realSunlight: true, + // enableSelectingObjects: true, + // enableTooltips: true + }); + map.addLayer({ + id: '3d-line', + type: 'custom', + renderingMode: '3d', + onAdd: function () { + for (let i = 0; i < gimPo.features.length; i++) { + let line; + var options = { + path: gimPo.features[i].geometry.coordinates + }; + + for (let j = 0; j < options.path.length; j++) { + const lngLat = { + lng: options.path[j][0], + lat: options.path[j][1] + }; + const elevation = Math.floor(map.queryTerrainElevation(lngLat)); + // 지형 고도를 라인의 z 좌표로 설정합니다. + options.path[j][2] += elevation; + // console.log(options.path[j][2]); + } + + let lineGeometry = options.path; + line = tb.line({ + geometry: lineGeometry, + width: gimPo.features[i].properties['stroke-width'], + color: gimPo.features[i].properties.stroke + }); + + tb.add(line); + } + }, + render: function () { + tb.update(); + } + }); + }); // const mapInit = () => { // const mapOptions = { // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),