|
|
@ -11,7 +11,7 @@ import { DronMarker } from './dron/DronMarker'; |
|
|
|
// import { NaverMapSearch } from './search/NaverMapSearch';
|
|
|
|
// import { NaverMapSearch } from './search/NaverMapSearch';
|
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import geoJson from '../../map/geojson/airArea.json'; |
|
|
|
import geoJson from '../../map/geojson/airArea.json'; |
|
|
|
import gimPo from '../../map/geojson/airportAirArea.json'; |
|
|
|
import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; |
|
|
|
// import DronPlan from './dron/DronPlan';
|
|
|
|
// import DronPlan from './dron/DronPlan';
|
|
|
|
// import NewDronPlan from './dron/NewDronPlan';
|
|
|
|
// import NewDronPlan from './dron/NewDronPlan';
|
|
|
|
// import { NewDronHistory } from './dron/NewDronHistroy';
|
|
|
|
// import { NewDronHistory } from './dron/NewDronHistroy';
|
|
|
@ -224,7 +224,6 @@ export default function MapBoxMap() { |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (mapObject) { |
|
|
|
if (mapObject) { |
|
|
|
console.log('????'); |
|
|
|
|
|
|
|
uamPosition.features.map(uam => { |
|
|
|
uamPosition.features.map(uam => { |
|
|
|
const el = document.createElement('div'); |
|
|
|
const el = document.createElement('div'); |
|
|
|
const elChild = document.createElement('span'); |
|
|
|
const elChild = document.createElement('span'); |
|
|
@ -247,11 +246,87 @@ export default function MapBoxMap() { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [mapObject]); |
|
|
|
}, [mapObject]); |
|
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
useEffect(() => { |
|
|
|
// if (mapObject) {
|
|
|
|
if (mapObject) { |
|
|
|
// mapObject.setStyle('mapbox://styles/mapbox/streets-v12');
|
|
|
|
console.log(mapControl); |
|
|
|
// }
|
|
|
|
handlerCreateAirSpace(mapObject); |
|
|
|
// }, [mapControl, mapObject]);
|
|
|
|
} |
|
|
|
|
|
|
|
}, [ |
|
|
|
|
|
|
|
mapControl.area0001, |
|
|
|
|
|
|
|
mapControl.area0002, |
|
|
|
|
|
|
|
mapControl.area0003, |
|
|
|
|
|
|
|
mapControl.area0004, |
|
|
|
|
|
|
|
mapControl.area0005, |
|
|
|
|
|
|
|
mapControl.area0006 |
|
|
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerCreateAirSpace = ( |
|
|
|
|
|
|
|
map, |
|
|
|
|
|
|
|
useGeoJson = { |
|
|
|
|
|
|
|
...geoJson, |
|
|
|
|
|
|
|
features: [...geoJson.features, ...gimPo.features] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) => { |
|
|
|
|
|
|
|
if (map.getLayer('maine')) { |
|
|
|
|
|
|
|
map.removeLayer('maine'); |
|
|
|
|
|
|
|
map.removeSource('maine'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let arrGeoJson = []; |
|
|
|
|
|
|
|
useGeoJson.features.map(item => { |
|
|
|
|
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FF3648' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0002' && mapControl.area0002) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA1AA' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0003' && mapControl.area0003) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA800' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0004' && mapControl.area0004) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#A16B00' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0005' && mapControl.area0005) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#AB40FF' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0006' && mapControl.area0006) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#009cad' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 공역 생성 start
|
|
|
|
|
|
|
|
map.addSource('maine', { |
|
|
|
|
|
|
|
type: 'geojson', |
|
|
|
|
|
|
|
data: { |
|
|
|
|
|
|
|
...useGeoJson |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
map.addLayer({ |
|
|
|
|
|
|
|
id: 'maine', |
|
|
|
|
|
|
|
type: 'fill', |
|
|
|
|
|
|
|
source: 'maine', |
|
|
|
|
|
|
|
layout: {}, |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'fill-color': ['get', 'color'], |
|
|
|
|
|
|
|
// 'fill-extrusion-height': 3000,
|
|
|
|
|
|
|
|
'fill-opacity': 0.5 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const mapBoxMapInit = () => { |
|
|
|
const mapBoxMapInit = () => { |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
@ -262,11 +337,13 @@ export default function MapBoxMap() { |
|
|
|
center: [127.85101412107547, 37.520357], // starting position [lng, lat]
|
|
|
|
center: [127.85101412107547, 37.520357], // starting position [lng, lat]
|
|
|
|
zoom: 8.5, // starting zoom
|
|
|
|
zoom: 8.5, // starting zoom
|
|
|
|
antialias: true |
|
|
|
antialias: true |
|
|
|
// pitch: 64.9,
|
|
|
|
|
|
|
|
// bearing: 172.5
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
const language = new MapboxLanguage(); |
|
|
|
const language = new MapboxLanguage(); |
|
|
|
map.addControl(language); |
|
|
|
map.addControl(language); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 드래그 제한 2d
|
|
|
|
|
|
|
|
map.dragRotate.disable(); |
|
|
|
|
|
|
|
|
|
|
|
// const tb = (window.tb = new threebox.Threebox(
|
|
|
|
// const tb = (window.tb = new threebox.Threebox(
|
|
|
|
// map,
|
|
|
|
// map,
|
|
|
|
// map.getCanvas().getContext('webgl'),
|
|
|
|
// map.getCanvas().getContext('webgl'),
|
|
|
@ -286,13 +363,15 @@ export default function MapBoxMap() { |
|
|
|
).id; |
|
|
|
).id; |
|
|
|
|
|
|
|
|
|
|
|
// 지형 3d start
|
|
|
|
// 지형 3d start
|
|
|
|
map.addSource('mapbox-dem', { |
|
|
|
// map.addSource('mapbox-dem', {
|
|
|
|
type: 'raster-dem', |
|
|
|
// type: 'raster-dem',
|
|
|
|
url: 'mapbox://mapbox.mapbox-terrain-dem-v1', |
|
|
|
// url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
|
|
|
tileSize: 512, |
|
|
|
// tileSize: 512,
|
|
|
|
maxZoom: 14 |
|
|
|
// maxZoom: 14,
|
|
|
|
}); |
|
|
|
// pitch: 0, // Set pitch to 0 for a 2D view
|
|
|
|
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); |
|
|
|
// bearing: 0 // Set bearing to 0 for a north-up view
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
|
|
|
|
|
|
|
|
|
|
|
|
// map.addLayer({
|
|
|
|
// map.addLayer({
|
|
|
|
// id: 'contour-labels',
|
|
|
|
// id: 'contour-labels',
|
|
|
@ -345,122 +424,47 @@ export default function MapBoxMap() { |
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// 등고선 end
|
|
|
|
// 등고선 end
|
|
|
|
// 3d building
|
|
|
|
// 3d building
|
|
|
|
map.addLayer( |
|
|
|
// map.addLayer(
|
|
|
|
{ |
|
|
|
// {
|
|
|
|
id: 'add-3d-buildings', |
|
|
|
// id: 'add-3d-buildings',
|
|
|
|
source: 'composite', |
|
|
|
// source: 'composite',
|
|
|
|
'source-layer': 'building', |
|
|
|
// 'source-layer': 'building',
|
|
|
|
filter: ['==', 'extrude', 'true'], |
|
|
|
// filter: ['==', 'extrude', 'true'],
|
|
|
|
type: 'fill-extrusion', |
|
|
|
// type: 'fill-extrusion',
|
|
|
|
minzoom: 15, |
|
|
|
// minzoom: 15,
|
|
|
|
paint: { |
|
|
|
// paint: {
|
|
|
|
'fill-extrusion-color': '#aaa', |
|
|
|
// 'fill-extrusion-color': '#aaa',
|
|
|
|
|
|
|
|
|
|
|
|
// Use an 'interpolate' expression to
|
|
|
|
// // Use an 'interpolate' expression to
|
|
|
|
// add a smooth transition effect to
|
|
|
|
// // add a smooth transition effect to
|
|
|
|
// the buildings as the user zooms in.
|
|
|
|
// // the buildings as the user zooms in.
|
|
|
|
'fill-extrusion-height': [ |
|
|
|
// 'fill-extrusion-height': [
|
|
|
|
'interpolate', |
|
|
|
// 'interpolate',
|
|
|
|
['linear'], |
|
|
|
// ['linear'],
|
|
|
|
['zoom'], |
|
|
|
// ['zoom'],
|
|
|
|
15, |
|
|
|
// 15,
|
|
|
|
0, |
|
|
|
// 0,
|
|
|
|
15.05, |
|
|
|
// 15.05,
|
|
|
|
['get', 'height'] |
|
|
|
// ['get', 'height']
|
|
|
|
], |
|
|
|
// ],
|
|
|
|
'fill-extrusion-base': [ |
|
|
|
// 'fill-extrusion-base': [
|
|
|
|
'interpolate', |
|
|
|
// 'interpolate',
|
|
|
|
['linear'], |
|
|
|
// ['linear'],
|
|
|
|
['zoom'], |
|
|
|
// ['zoom'],
|
|
|
|
15, |
|
|
|
// 15,
|
|
|
|
0, |
|
|
|
// 0,
|
|
|
|
15.05, |
|
|
|
// 15.05,
|
|
|
|
['get', 'min_height'] |
|
|
|
// ['get', 'min_height']
|
|
|
|
], |
|
|
|
// ],
|
|
|
|
'fill-extrusion-opacity': 0.6 |
|
|
|
// 'fill-extrusion-opacity': 0.6
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
labelLayerId |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
// 3d building
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let arrGeoJson = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const useGeoJson = { |
|
|
|
|
|
|
|
...geoJson, |
|
|
|
|
|
|
|
features: [...geoJson.features, ...gimPo.features] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
// if (mapControl.mapType === 'NORMAL') {
|
|
|
|
|
|
|
|
// props.map.setStyle('mapbox://styles/mapbox/streets-v12');
|
|
|
|
|
|
|
|
// } else if (mapControl.mapType === 'TERRAIN') {
|
|
|
|
|
|
|
|
// // props.map.setMapTypeId(naver.maps.MapTypeId.TERRAIN);
|
|
|
|
|
|
|
|
// } else if (mapControl.mapType === 'HYBRID') {
|
|
|
|
|
|
|
|
// props.map.setStyle('mapbox://styles/mapbox/satellite-streets-v11');
|
|
|
|
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
// },
|
|
|
|
if (map.getLayer('maine')) { |
|
|
|
// labelLayerId
|
|
|
|
map.removeLayer('maine'); |
|
|
|
// );
|
|
|
|
map.removeSource('maine'); |
|
|
|
// 3d building
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 공역 색상 및 공역 표출 정보에 따른 노출
|
|
|
|
// 공역 색상 및 공역 표출 정보에 따른 노출
|
|
|
|
useGeoJson.features.map(item => { |
|
|
|
handlerCreateAirSpace(map); |
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FF3648' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0002' && mapControl.area0002) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA1AA' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0003' && mapControl.area0003) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA800' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0004' && mapControl.area0004) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#A16B00' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0005' && mapControl.area0005) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#AB40FF' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0006' && mapControl.area0006) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#009cad' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
useGeoJson.features = arrGeoJson.filter( |
|
|
|
|
|
|
|
i => i.geometry.type === 'Polygon' |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 공역 생성 start
|
|
|
|
|
|
|
|
map.addSource('maine', { |
|
|
|
|
|
|
|
type: 'geojson', |
|
|
|
|
|
|
|
data: { |
|
|
|
|
|
|
|
...useGeoJson |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
map.addLayer({ |
|
|
|
|
|
|
|
id: 'maine', |
|
|
|
|
|
|
|
type: 'fill-extrusion', |
|
|
|
|
|
|
|
source: 'maine', |
|
|
|
|
|
|
|
layout: {}, |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'fill-extrusion-color': ['get', 'color'], |
|
|
|
|
|
|
|
'fill-extrusion-height': 3000, |
|
|
|
|
|
|
|
'fill-extrusion-opacity': 0.5 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// 공역 생성 end
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMapLoaded(true); |
|
|
|
setMapLoaded(true); |
|
|
|
}); |
|
|
|
}); |
|
|
|
setMapObject(map); |
|
|
|
setMapObject(map); |
|
|
|