junh_eee(이준희)
10 months ago
7 changed files with 207 additions and 317 deletions
@ -1,5 +1,184 @@
|
||||
import { NMap } from '../../map/nhn/NMap'; |
||||
import { useEffect, useRef } from 'react'; |
||||
|
||||
export const AnalysisSimulationMap = () => { |
||||
return <NMap />; |
||||
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
||||
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
||||
import mapboxgl from 'mapbox-gl'; |
||||
import 'mapbox-gl/dist/mapbox-gl.css'; |
||||
|
||||
import { Threebox } from 'threebox-plugin'; |
||||
import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; |
||||
|
||||
export const AnalysisSimulationMap = props => { |
||||
const mapContainer = useRef(null); |
||||
|
||||
useEffect(() => { |
||||
mapBoxMapInit(); |
||||
}, []); |
||||
|
||||
const mapBoxMapInit = () => { |
||||
mapboxgl.accessToken = MAPBOX_TOKEN; |
||||
|
||||
const map = new mapboxgl.Map({ |
||||
container: 'map', // container ID
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
center: [127.85101412107547, 37.520357], // starting position [lng, lat]
|
||||
zoom: 8.5, // starting zoom
|
||||
antialias: true |
||||
}); |
||||
|
||||
const language = new MapboxLanguage(); |
||||
map.addControl(language); |
||||
|
||||
map.on('style.load', () => { |
||||
const layers = map.getStyle().layers; |
||||
|
||||
const labelLayerId = layers.find( |
||||
layer => layer.type === 'symbol' && layer.layout['text-field'] |
||||
).id; |
||||
|
||||
// 지형 3d start
|
||||
map.addSource('mapbox-dem', { |
||||
type: 'raster-dem', |
||||
url: 'mapbox://mapbox.mapbox-terrain-dem-v1', |
||||
tileSize: 512, |
||||
maxZoom: 16 |
||||
}); |
||||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); |
||||
map.addLayer({ |
||||
id: 'contour-labels', |
||||
type: 'symbol', |
||||
source: { |
||||
type: 'vector', |
||||
url: 'mapbox://mapbox.mapbox-terrain-v2' |
||||
}, |
||||
'source-layer': 'contour', |
||||
layout: { |
||||
visibility: 'visible', |
||||
'symbol-placement': 'line', |
||||
'text-field': ['concat', ['to-string', ['get', 'ele']], 'm'] |
||||
}, |
||||
paint: { |
||||
'icon-color': '#877b59', |
||||
'icon-halo-width': 1, |
||||
'text-color': '#877b59', |
||||
'text-halo-width': 1 |
||||
} |
||||
}); |
||||
map.addLayer({ |
||||
id: 'sky', |
||||
type: 'sky', |
||||
paint: { |
||||
'sky-type': 'atmosphere', |
||||
'sky-atmosphere-sun': [0.0, 90.0], |
||||
'sky-atmosphere-sun-intensity': 15 |
||||
} |
||||
}); |
||||
// 지형 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 |
||||
} |
||||
}); |
||||
// 등고선 end
|
||||
// 3d building
|
||||
map.addLayer( |
||||
{ |
||||
id: 'add-3d-buildings', |
||||
source: 'composite', |
||||
'source-layer': 'building', |
||||
filter: ['==', 'extrude', 'true'], |
||||
type: 'fill-extrusion', |
||||
minzoom: 15, |
||||
paint: { |
||||
'fill-extrusion-color': '#aaa', |
||||
'fill-extrusion-height': [ |
||||
'interpolate', |
||||
['linear'], |
||||
['zoom'], |
||||
15, |
||||
0, |
||||
15.05, |
||||
['get', 'height'] |
||||
], |
||||
'fill-extrusion-base': [ |
||||
'interpolate', |
||||
['linear'], |
||||
['zoom'], |
||||
15, |
||||
0, |
||||
15.05, |
||||
['get', 'min_height'] |
||||
], |
||||
'fill-extrusion-opacity': 0.6 |
||||
} |
||||
}, |
||||
labelLayerId |
||||
); |
||||
|
||||
// 3d building
|
||||
props.setMapObject(map); |
||||
}); |
||||
|
||||
map.on('load', () => { |
||||
window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {}); |
||||
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(); |
||||
} |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
id='map' |
||||
ref={mapContainer} |
||||
style={{ width: '100%', height: '100vh' }} |
||||
></div> |
||||
); |
||||
}; |
||||
|
@ -1,230 +0,0 @@
|
||||
import { useEffect, useState, useRef } from 'react'; |
||||
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; |
||||
const [isMapLoaded, setMapLoaded] = useState(false); |
||||
const [mapObject, setMapObject] = useState(null); |
||||
const mapContainer = useRef(null); |
||||
|
||||
useEffect(() => { |
||||
// mapInit();
|
||||
mapBoxMapInit(); |
||||
// setIsMapLoad(true);
|
||||
}, []); |
||||
const mapBoxMapInit = () => { |
||||
mapboxgl.accessToken = MAPBOX_TOKEN; |
||||
// const mapOptions = {
|
||||
// center: new naver.maps.LatLng(37.520357, 126.610166),
|
||||
// // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
||||
// // zoom: 10,
|
||||
// zoom: 14,
|
||||
// zoomControl: true,
|
||||
// mapTypeId: naver.maps.MapTypeId.NORMAR,
|
||||
// zoomControlOptions: {
|
||||
// position: naver.maps.Position.TOP_LEFT,
|
||||
|
||||
// style: naver.maps.ZoomControlStyle.SMALL
|
||||
// }
|
||||
// };
|
||||
|
||||
const map = new mapboxgl.Map({ |
||||
container: 'map', // container ID
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
center: [127.85101412107547, 37.520357], // starting position [lng, lat]
|
||||
zoom: 8.5, // starting zoom
|
||||
antialias: true |
||||
// pitch: 64.9,
|
||||
// bearing: 172.5
|
||||
}); |
||||
|
||||
const language = new MapboxLanguage(); |
||||
map.addControl(language); |
||||
|
||||
map.on('style.load', () => { |
||||
const layers = map.getStyle().layers; |
||||
|
||||
const labelLayerId = layers.find( |
||||
layer => layer.type === 'symbol' && layer.layout['text-field'] |
||||
).id; |
||||
|
||||
// 지형 3d start
|
||||
map.addSource('mapbox-dem', { |
||||
type: 'raster-dem', |
||||
url: 'mapbox://mapbox.mapbox-terrain-dem-v1', |
||||
tileSize: 512, |
||||
maxZoom: 16 |
||||
}); |
||||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); |
||||
map.addLayer({ |
||||
id: 'contour-labels', |
||||
type: 'symbol', |
||||
source: { |
||||
type: 'vector', |
||||
url: 'mapbox://mapbox.mapbox-terrain-v2' |
||||
}, |
||||
'source-layer': 'contour', |
||||
layout: { |
||||
visibility: 'visible', |
||||
'symbol-placement': 'line', |
||||
'text-field': ['concat', ['to-string', ['get', 'ele']], 'm'] |
||||
}, |
||||
paint: { |
||||
'icon-color': '#877b59', |
||||
'icon-halo-width': 1, |
||||
'text-color': '#877b59', |
||||
'text-halo-width': 1 |
||||
} |
||||
}); |
||||
map.addLayer({ |
||||
id: 'sky', |
||||
type: 'sky', |
||||
paint: { |
||||
'sky-type': 'atmosphere', |
||||
'sky-atmosphere-sun': [0.0, 90.0], |
||||
'sky-atmosphere-sun-intensity': 15 |
||||
} |
||||
}); |
||||
// 지형 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 |
||||
} |
||||
}); |
||||
// 등고선 end
|
||||
// 3d building
|
||||
map.addLayer( |
||||
{ |
||||
id: 'add-3d-buildings', |
||||
source: 'composite', |
||||
'source-layer': 'building', |
||||
filter: ['==', 'extrude', 'true'], |
||||
type: 'fill-extrusion', |
||||
minzoom: 15, |
||||
paint: { |
||||
'fill-extrusion-color': '#aaa', |
||||
|
||||
// Use an 'interpolate' expression to
|
||||
// add a smooth transition effect to
|
||||
// the buildings as the user zooms in.
|
||||
'fill-extrusion-height': [ |
||||
'interpolate', |
||||
['linear'], |
||||
['zoom'], |
||||
15, |
||||
0, |
||||
15.05, |
||||
['get', 'height'] |
||||
], |
||||
'fill-extrusion-base': [ |
||||
'interpolate', |
||||
['linear'], |
||||
['zoom'], |
||||
15, |
||||
0, |
||||
15.05, |
||||
['get', 'min_height'] |
||||
], |
||||
'fill-extrusion-opacity': 0.6 |
||||
} |
||||
}, |
||||
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),
|
||||
// zoom: 10,
|
||||
// zoomControl: true,
|
||||
// mapTypeId: naver.maps.MapTypeId.HYBRID,
|
||||
// zoomControlOptions: {
|
||||
// position: naver.maps.Position.TOP_LEFT,
|
||||
// style: naver.maps.ZoomControlStyle.SMALL
|
||||
// }
|
||||
// };
|
||||
|
||||
// map = ;
|
||||
// props.setMapObject(new naver.maps.Map('map', mapOptions));
|
||||
// naver.maps.Event.addListener(map, 'click', function (e) {
|
||||
|
||||
// });
|
||||
|
||||
// naver.maps.Event.addListener(map, 'idle', function (e) {
|
||||
|
||||
// });
|
||||
}; |
||||
return ( |
||||
<div |
||||
id='map' |
||||
ref={mapContainer} |
||||
style={{ width: '100%', height: '100vh' }} |
||||
></div> |
||||
); |
||||
}; |
Loading…
Reference in new issue