|
|
|
@ -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),
|
|
|
|
|