|
|
|
|
@ -1,9 +1,10 @@
|
|
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
// import * as THREE from 'three';
|
|
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
|
import { useEffect, useState, useRef } from 'react'; |
|
|
|
|
import { useEffect, useState, useRef, useLayoutEffect } from 'react'; |
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'; |
|
|
|
|
import { DronMarker } from './dron/DronMarker'; |
|
|
|
|
// import { DronHistory } from './dron/DronHistory';
|
|
|
|
|
@ -219,35 +220,36 @@ export default function MapBoxMap() {
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
useLayoutEffect(() => { |
|
|
|
|
mapBoxMapInit(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (mapObject) { |
|
|
|
|
uamPosition.features.map(uam => { |
|
|
|
|
const el = document.createElement('div'); |
|
|
|
|
const elChild = document.createElement('span'); |
|
|
|
|
elChild.innerText = uam.properties.name; |
|
|
|
|
elChild.style.color = uam.properties.spanColor; |
|
|
|
|
el.className = 'marker'; |
|
|
|
|
el.style.background = uam.properties.background; |
|
|
|
|
el.style.borderRadius = '50%'; |
|
|
|
|
el.style.border = `4px solid ${uam.properties.border}`; |
|
|
|
|
el.style.padding = '5px'; |
|
|
|
|
el.style.width = '40px'; |
|
|
|
|
el.style.height = '40px'; |
|
|
|
|
el.style.textAlign = 'center'; |
|
|
|
|
el.appendChild(elChild); |
|
|
|
|
|
|
|
|
|
new mapboxgl.Marker(el) |
|
|
|
|
.setLngLat(uam.geometry.coordinates) |
|
|
|
|
.addTo(mapObject); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, [mapObject]); |
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (mapObject) {
|
|
|
|
|
// uamPosition.features.map(uam => {
|
|
|
|
|
// const el = document.createElement('div');
|
|
|
|
|
// const elChild = document.createElement('span');
|
|
|
|
|
// elChild.innerText = uam.properties.name;
|
|
|
|
|
// elChild.style.color = uam.properties.spanColor;
|
|
|
|
|
// el.className = 'marker';
|
|
|
|
|
// el.style.background = uam.properties.background;
|
|
|
|
|
// el.style.borderRadius = '50%';
|
|
|
|
|
// el.style.border = `4px solid ${uam.properties.border}`;
|
|
|
|
|
// el.style.padding = '5px';
|
|
|
|
|
// el.style.width = '40px';
|
|
|
|
|
// el.style.height = '40px';
|
|
|
|
|
// el.style.textAlign = 'center';
|
|
|
|
|
// el.appendChild(elChild);
|
|
|
|
|
|
|
|
|
|
// new mapboxgl.Marker(el)
|
|
|
|
|
// .setLngLat(uam.geometry.coordinates)
|
|
|
|
|
// .addTo(mapObject);
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// }, [mapObject]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
console.log(mapObject); |
|
|
|
|
if (mapObject) { |
|
|
|
|
handlerCreateAirSpace(mapObject); |
|
|
|
|
} |
|
|
|
|
@ -271,7 +273,6 @@ export default function MapBoxMap() {
|
|
|
|
|
map.removeLayer('maine'); |
|
|
|
|
map.removeSource('maine'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let arrGeoJson = []; |
|
|
|
|
useGeoJson.features.map(item => { |
|
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
|
@ -353,47 +354,6 @@ export default function MapBoxMap() {
|
|
|
|
|
} |
|
|
|
|
)); |
|
|
|
|
|
|
|
|
|
map.on('load', () => { |
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'route', |
|
|
|
|
type: 'custom', |
|
|
|
|
renderingMode: '3d', |
|
|
|
|
onAdd: function () { |
|
|
|
|
let a = []; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
a.push(options.path); |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
console.dir(a); |
|
|
|
|
console.log(gimPo.features.length); |
|
|
|
|
}, |
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
map.on('style.load', () => { |
|
|
|
|
const layers = map.getStyle().layers; |
|
|
|
|
const labelLayerId = layers.find( |
|
|
|
|
@ -500,7 +460,68 @@ export default function MapBoxMap() {
|
|
|
|
|
}, |
|
|
|
|
labelLayerId |
|
|
|
|
); |
|
|
|
|
// 3d building
|
|
|
|
|
|
|
|
|
|
// 김포 3d 공역
|
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'route', |
|
|
|
|
type: 'custom', |
|
|
|
|
renderingMode: '3d', |
|
|
|
|
onAdd: function () { |
|
|
|
|
for (let i = 0; i < gimPo.features.length; i++) { |
|
|
|
|
let line; |
|
|
|
|
const options = { |
|
|
|
|
path: gimPo.features[i].geometry.coordinates |
|
|
|
|
}; |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
// const scene = new THREE.Scene();
|
|
|
|
|
// const geojsonGeometry = new THREE.Geometry();
|
|
|
|
|
// gimPo.features.forEach(feature => {
|
|
|
|
|
// const coordinates = feature.geometry.coordinates;
|
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < coordinates.length; i++) {
|
|
|
|
|
// const coordinate = coordinates[i];
|
|
|
|
|
// const height = coordinate[2]; // Get the height from the GeoJSON
|
|
|
|
|
|
|
|
|
|
// // Create a vertex for each coordinate with height
|
|
|
|
|
// const vertex = new THREE.Vector3(
|
|
|
|
|
// coordinate[0],
|
|
|
|
|
// coordinate[1],
|
|
|
|
|
// height
|
|
|
|
|
// );
|
|
|
|
|
// geojsonGeometry.vertices.push(vertex);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// console.log(tb);
|
|
|
|
|
// // Create Line Material
|
|
|
|
|
// const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // Color for lines
|
|
|
|
|
|
|
|
|
|
// // Create Line Mesh
|
|
|
|
|
// const geojsonLines = new THREE.Line(geojsonGeometry, lineMaterial);
|
|
|
|
|
|
|
|
|
|
// // Add the lines to Threebox
|
|
|
|
|
// tb.add(geojsonLines);
|
|
|
|
|
// // Adjust position if needed
|
|
|
|
|
// // geojsonLines.position.set(0, 0, 0);
|
|
|
|
|
|
|
|
|
|
// // Create a filled mesh (optional)
|
|
|
|
|
// const filledGeometry = new THREE.Geometry();
|
|
|
|
|
// // Add vertices and faces to filledGeometry to fill between the lines
|
|
|
|
|
|
|
|
|
|
// const fillMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Color for fill
|
|
|
|
|
// const geojsonFill = new THREE.Mesh(filledGeometry, fillMaterial);
|
|
|
|
|
// tb.add(geojsonFill);
|
|
|
|
|
}, |
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 공역 색상 및 공역 표출 정보에 따른 노출
|
|
|
|
|
handlerCreateAirSpace(map); |
|
|
|
|
|
