|
|
|
@ -17,10 +17,13 @@ export const NaverCustomMap = () => {
|
|
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
|
|
|
|
|
|
const [poly, setPoly] = useState([]); |
|
|
|
|
|
|
|
|
|
let features = geoJson.features; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
NaverMapInit(); |
|
|
|
|
polyArea(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
@ -45,6 +48,133 @@ export const NaverCustomMap = () => {
|
|
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const polyArea = () => { |
|
|
|
|
//격자 공역
|
|
|
|
|
const polyArr = []; |
|
|
|
|
const SENSOR_RADIUS = 9300; |
|
|
|
|
const position = new naver.maps.LatLng(37.558522, 126.793722); |
|
|
|
|
const color = '#000'; |
|
|
|
|
const opacity = 0.7; |
|
|
|
|
|
|
|
|
|
let angle = 0; |
|
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
|
angle += 90; |
|
|
|
|
let buffer = 0; |
|
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
|
for (let j = 0; j < 9; j++) { |
|
|
|
|
// buffer += 2000;
|
|
|
|
|
buffer += 1000; |
|
|
|
|
|
|
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
position, |
|
|
|
|
angle, |
|
|
|
|
buffer |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
let reduce = 0; |
|
|
|
|
if (j === 0) { |
|
|
|
|
// reduce = 218.6;
|
|
|
|
|
reduce = 54.4; |
|
|
|
|
} else if (j === 1) { |
|
|
|
|
// reduce = 905.4;
|
|
|
|
|
reduce = 218.6; |
|
|
|
|
} else if (j === 2) { |
|
|
|
|
// reduce = 2195;
|
|
|
|
|
reduce = 500; |
|
|
|
|
} else if (j === 3) { |
|
|
|
|
// reduce = 4560.2;
|
|
|
|
|
reduce = 905.4; |
|
|
|
|
} else if (j === 4) { |
|
|
|
|
reduce = 1459.8; |
|
|
|
|
} else if (j === 5) { |
|
|
|
|
reduce = 2195; |
|
|
|
|
} else if (j === 6) { |
|
|
|
|
reduce = 3173.5; |
|
|
|
|
} else if (j === 7) { |
|
|
|
|
reduce = 4552.5; |
|
|
|
|
} else if (j === 8) { |
|
|
|
|
reduce = 6952.5; |
|
|
|
|
} |
|
|
|
|
if (angle % 180 == 0) { |
|
|
|
|
const polyEW = new naver.maps.Polyline({ |
|
|
|
|
path: [ |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
coord, |
|
|
|
|
90, |
|
|
|
|
SENSOR_RADIUS - reduce |
|
|
|
|
), |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
coord, |
|
|
|
|
270, |
|
|
|
|
SENSOR_RADIUS - reduce |
|
|
|
|
) |
|
|
|
|
], |
|
|
|
|
strokeWeight: 0.8, |
|
|
|
|
strokeOpacity: opacity, |
|
|
|
|
strokeColor: color |
|
|
|
|
// map: map
|
|
|
|
|
}); |
|
|
|
|
polyArr.push(polyEW); |
|
|
|
|
} else { |
|
|
|
|
const polyNS = new naver.maps.Polyline({ |
|
|
|
|
path: [ |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
coord, |
|
|
|
|
0, |
|
|
|
|
SENSOR_RADIUS - reduce |
|
|
|
|
), |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
coord, |
|
|
|
|
180, |
|
|
|
|
SENSOR_RADIUS - reduce |
|
|
|
|
) |
|
|
|
|
], |
|
|
|
|
strokeWeight: 0.8, |
|
|
|
|
strokeOpacity: opacity, |
|
|
|
|
strokeColor: color |
|
|
|
|
// map: props.map
|
|
|
|
|
}); |
|
|
|
|
polyArr.push(polyNS); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const NS = new naver.maps.Polyline({ |
|
|
|
|
path: [ |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord(position, 0, SENSOR_RADIUS), |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
position, |
|
|
|
|
180, |
|
|
|
|
SENSOR_RADIUS |
|
|
|
|
) |
|
|
|
|
], |
|
|
|
|
strokeWeight: 0.8, |
|
|
|
|
strokeOpacity: opacity, |
|
|
|
|
strokeColor: color |
|
|
|
|
// map: props.map
|
|
|
|
|
}); |
|
|
|
|
polyArr.push(NS); |
|
|
|
|
const EW = new naver.maps.Polyline({ |
|
|
|
|
path: [ |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
position, |
|
|
|
|
90, |
|
|
|
|
SENSOR_RADIUS |
|
|
|
|
), |
|
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
position, |
|
|
|
|
270, |
|
|
|
|
SENSOR_RADIUS |
|
|
|
|
) |
|
|
|
|
], |
|
|
|
|
strokeWeight: 0.8, |
|
|
|
|
strokeOpacity: opacity, |
|
|
|
|
strokeColor: color |
|
|
|
|
// map: props.map
|
|
|
|
|
}); |
|
|
|
|
polyArr.push(EW); |
|
|
|
|
setPoly(polyArr); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<div id='map' style={{ width: '100%', height: '100vh' }}></div> |
|
|
|
@ -65,7 +195,12 @@ export const NaverCustomMap = () => {
|
|
|
|
|
|
|
|
|
|
<DronToast /> |
|
|
|
|
|
|
|
|
|
<FeatureAirZone map={mapObject} naver={naver} features={features} /> |
|
|
|
|
<FeatureAirZone |
|
|
|
|
map={mapObject} |
|
|
|
|
naver={naver} |
|
|
|
|
features={features} |
|
|
|
|
poly={poly} |
|
|
|
|
/> |
|
|
|
|
{/* <NaverMapSearch map={mapObject} naver={naver} /> */} |
|
|
|
|
{/* <SensorZone map={mapObject} naver={naver} /> */} |
|
|
|
|
</> |
|
|
|
|