junh_eee(이준희)
10 months ago
18 changed files with 0 additions and 7741 deletions
@ -1,24 +0,0 @@
|
||||
import React from 'react'; |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'; |
||||
import Marker from 'react-google-maps/lib/components/Marker'; |
||||
import OverlayView from 'react-google-maps/lib/components/OverlayView'; |
||||
import dronicon from '../../../assets/control/icon/drone.png'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { ControlGpData } from '../../../modules/control/gp'; |
||||
import { StoreState } from '../../../modules'; |
||||
|
||||
export const DronMarker = props => { |
||||
return ( |
||||
<Marker |
||||
key={props.dronInfo.objectId} |
||||
icon={{ |
||||
url: dronicon, |
||||
scaledSize: new window.google.maps.Size(25, 25) |
||||
}} |
||||
title={props.dronInfo.objectId} |
||||
onClick={() => alert(11111)} |
||||
position={{ lat: props.dronInfo.lat, lng: props.dronInfo.lng }} |
||||
></Marker> |
||||
); |
||||
}; |
||||
@ -1,61 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { |
||||
GoogleMap, |
||||
GroundOverlay, |
||||
Marker, |
||||
Polyline, |
||||
withGoogleMap, |
||||
withScriptjs |
||||
} from 'react-google-maps'; |
||||
import { DronMarker } from './DronMarker'; |
||||
// import { StoreState } from '../../../modules';
|
||||
import { useSelector } from 'react-redux'; |
||||
import SearchBox from 'react-google-maps/lib/components/places/SearchBox'; |
||||
import InfoWindow from 'react-google-maps/lib/components/InfoWindow'; |
||||
|
||||
const MapInit = () => { |
||||
const { controlGpList } = useSelector(state => state.controlGpState); |
||||
const [bounds, setBounds] = useState(null); |
||||
|
||||
useEffect(() => {}, [controlGpList]); |
||||
const onSearchBoxMounted = () => {}; |
||||
|
||||
const onPlacesChanged = () => {}; |
||||
|
||||
return ( |
||||
<> |
||||
<GoogleMap |
||||
defaultZoom={10} |
||||
defaultCenter={{ lat: 37.5, lng: 127 }} |
||||
defaultOptions={{}} |
||||
> |
||||
<div style={{ height: 100 }}>test</div> |
||||
|
||||
{controlGpList?.map(item => ( |
||||
// <DronMarker controlGpList={controlGpList} />
|
||||
<DronMarker dronInfo={item} key={item.objectId} /> |
||||
))} |
||||
</GoogleMap> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const GoogleMapWrapped = withScriptjs(withGoogleMap(MapInit)); |
||||
|
||||
export const GoogleCustomMap = () => { |
||||
const mapProps = { |
||||
key: 'AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI', |
||||
url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces' |
||||
}; |
||||
|
||||
return ( |
||||
<div style={{ width: '100vw', height: '100vh' }}> |
||||
<GoogleMapWrapped |
||||
googleMapURL={`${mapProps.url}&key=${mapProps.key}`} |
||||
loadingElement={<div style={{ height: `100%` }} />} |
||||
containerElement={<div style={{ height: `100%` }} />} |
||||
mapElement={<div style={{ height: `100%` }} />} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react'; |
||||
import { GoogleCustomMap } from './google/GoogleMap'; |
||||
import { NaverCustomMap } from './naver/NaverMap'; |
||||
|
||||
export const MapControlDraw = props => { |
||||
return ( |
||||
<>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</> |
||||
); |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
@ -1,24 +0,0 @@
|
||||
import React from 'react'; |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'; |
||||
import Marker from 'react-google-maps/lib/components/Marker'; |
||||
import OverlayView from 'react-google-maps/lib/components/OverlayView'; |
||||
import dronicon from '../../../assets/control/icon/drone.png'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { ControlGpData } from '../../../modules/control/gp'; |
||||
import { StoreState } from '../../../modules'; |
||||
|
||||
export const DronMarker = props => { |
||||
return ( |
||||
<Marker |
||||
key={props.dronInfo.objectId} |
||||
icon={{ |
||||
url: dronicon, |
||||
scaledSize: new window.google.maps.Size(25, 25) |
||||
}} |
||||
title={props.dronInfo.objectId} |
||||
onClick={() => alert(11111)} |
||||
position={{ lat: props.dronInfo.lat, lng: props.dronInfo.lng }} |
||||
></Marker> |
||||
); |
||||
}; |
||||
@ -1,61 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { |
||||
GoogleMap, |
||||
GroundOverlay, |
||||
Marker, |
||||
Polyline, |
||||
withGoogleMap, |
||||
withScriptjs |
||||
} from 'react-google-maps'; |
||||
import { DronMarker } from './DronMarker'; |
||||
// import { StoreState } from '../../../modules';
|
||||
import { useSelector } from 'react-redux'; |
||||
import SearchBox from 'react-google-maps/lib/components/places/SearchBox'; |
||||
import InfoWindow from 'react-google-maps/lib/components/InfoWindow'; |
||||
|
||||
const MapInit = () => { |
||||
const { controlGpList } = useSelector(state => state.controlGpState); |
||||
const [bounds, setBounds] = useState(null); |
||||
|
||||
useEffect(() => {}, [controlGpList]); |
||||
const onSearchBoxMounted = () => {}; |
||||
|
||||
const onPlacesChanged = () => {}; |
||||
|
||||
return ( |
||||
<> |
||||
<GoogleMap |
||||
defaultZoom={10} |
||||
defaultCenter={{ lat: 37.5, lng: 127 }} |
||||
defaultOptions={{}} |
||||
> |
||||
<div style={{ height: 100 }}>test</div> |
||||
|
||||
{controlGpList?.map(item => ( |
||||
// <DronMarker controlGpList={controlGpList} />
|
||||
<DronMarker dronInfo={item} key={item.objectId} /> |
||||
))} |
||||
</GoogleMap> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const GoogleMapWrapped = withScriptjs(withGoogleMap(MapInit)); |
||||
|
||||
export const GoogleCustomMap = () => { |
||||
const mapProps = { |
||||
key: 'AIzaSyDKCsI8cbzgi4es3xCUIhElUm6NRM73QuI', |
||||
url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces' |
||||
}; |
||||
|
||||
return ( |
||||
<div style={{ width: '100vw', height: '100vh' }}> |
||||
<GoogleMapWrapped |
||||
googleMapURL={`${mapProps.url}&key=${mapProps.key}`} |
||||
loadingElement={<div style={{ height: `100%` }} />} |
||||
containerElement={<div style={{ height: `100%` }} />} |
||||
mapElement={<div style={{ height: `100%` }} />} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,59 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
|
||||
import NaverMapControl from './NaverMapControl'; |
||||
import geoJson from '../geojson/airArea.json'; |
||||
import { FeatureAirZone } from './feature/FeatureAirZone'; |
||||
import { DrawMap } from './draw/DrawMap'; |
||||
import { JQueryDraw } from './draw/JQueryDraw'; |
||||
|
||||
export const NaverCustomMap = () => { |
||||
const naver = window.naver; |
||||
const [mapObject, setMapObject] = useState(null); |
||||
|
||||
let features = geoJson.features; |
||||
|
||||
useEffect(() => { |
||||
NaverMapInit(); |
||||
}, []); |
||||
|
||||
|
||||
const NaverMapInit = () => { |
||||
const mapOptions = { |
||||
center: new naver.maps.LatLng(37.520357, 126.610166), |
||||
zoom: 17, |
||||
zoomControl: true, |
||||
// mapTypeId: naver.maps.MapTypeId.HYBRID,
|
||||
zoomControlOptions: { |
||||
position: naver.maps.Position.LEFT_CENTER, |
||||
|
||||
style: naver.maps.ZoomControlStyle.SMALL |
||||
} |
||||
}; |
||||
const map = new naver.maps.Map('map', mapOptions); |
||||
setMapObject(map); |
||||
|
||||
}; |
||||
|
||||
return ( |
||||
<div style={{position: 'relative'}}> |
||||
<div id='map' style={{ width: '100%', height: '100vh', position: 'absolute' }}> |
||||
{/* 제이쿼리로 그리기 */} |
||||
<JQueryDraw map={mapObject} naver={naver} /> |
||||
{/* <JQueryTest map={mapObject} naver={naver} /> */} |
||||
</div> |
||||
|
||||
{mapObject != null ? ( |
||||
<> |
||||
<NaverMapControl map={mapObject} /> |
||||
<FeatureAirZone map={mapObject} naver={naver} features={features} /> |
||||
|
||||
{/* 그리기 도구 모음 불러오는 거 */} |
||||
<DrawMap map={mapObject} naver={naver} /> |
||||
{/* <Test map={mapObject} naver={naver} /> */} |
||||
</> |
||||
) : null} |
||||
|
||||
{/* */} |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,30 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
const NaverMapControl = props => { |
||||
const mapControl = useSelector(state => state.controlMapReducer); |
||||
|
||||
useEffect(() => {}, [mapControl]); |
||||
|
||||
//맵타입 변경
|
||||
if (mapControl.mapType === 'NORMAL') { |
||||
props.map.setMapTypeId(naver.maps.MapTypeId.NORMAL); |
||||
} else if (mapControl.mapType === 'TERRAIN') { |
||||
props.map.setMapTypeId(naver.maps.MapTypeId.TERRAIN); |
||||
} else if (mapControl.mapType === 'HYBRID') { |
||||
props.map.setMapTypeId(naver.maps.MapTypeId.HYBRID); |
||||
} |
||||
|
||||
//그리기타입 변경
|
||||
// if(mapControl.drawType === 'CIRCLE') {
|
||||
|
||||
// } else if(mapControl.drawType === 'LINE') {
|
||||
|
||||
// } else if(mapControl.drawType === 'POLYGON') {
|
||||
|
||||
// }
|
||||
|
||||
return null; |
||||
}; |
||||
|
||||
export default NaverMapControl; |
||||
@ -1,110 +0,0 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
export const DrawMap = props => { |
||||
const { naver } = props; |
||||
const { map } = props; |
||||
const [drawing, setDrawing] = useState(); |
||||
const [overlay, setOverlay] = useState([]); |
||||
|
||||
const { drawCheck } = useSelector(state => state.controlMapReducer); |
||||
|
||||
useEffect(() => { |
||||
removeOverlay(); |
||||
}, [overlay]); |
||||
|
||||
useEffect(() => { |
||||
init(); |
||||
}, [drawCheck]); |
||||
|
||||
const removeOverlay = () => { |
||||
if (overlay.length >= 2) { |
||||
drawing.removeDrawing(overlay[0]); |
||||
setOverlay(prev => [prev[overlay.length - 1]]); |
||||
} |
||||
}; |
||||
|
||||
const init = () => { |
||||
initRemove(); |
||||
removeDrawManager(); |
||||
}; |
||||
|
||||
const initRemove = () => { |
||||
if (overlay) { |
||||
overlay.forEach(prev => drawing.removeDrawing(prev)); |
||||
setOverlay([]); |
||||
} |
||||
}; |
||||
|
||||
const removeDrawManager = () => { |
||||
if (drawing) { |
||||
drawing.setMap(null); |
||||
} |
||||
drawSetting(); |
||||
}; |
||||
|
||||
const drawSetting = () => { |
||||
if (drawCheck) { |
||||
// debugger;
|
||||
let drawingManager = new naver.maps.drawing.DrawingManager({ |
||||
drawingControl: [ |
||||
naver.maps.drawing.DrawingMode.POLYLINE, |
||||
naver.maps.drawing.DrawingMode.POLYGON, |
||||
naver.maps.drawing.DrawingMode.ELLIPSE, |
||||
naver.maps.drawing.DrawingMode.RECTANGLE |
||||
], |
||||
drawingControlOptions: { |
||||
position: naver.maps.Position.LEFT_CENTER, |
||||
style: naver.maps.drawing.DrawingStyle.VERTICAL |
||||
}, |
||||
controlPointOptions: { |
||||
anchorPointOptions: { |
||||
radius: 5, |
||||
fillColor: '#ff0000', |
||||
strokeColor: '#ffffff', |
||||
strokeWeight: 2 |
||||
}, |
||||
midPointOptions: { |
||||
radius: 4, |
||||
fillColor: '#0067a3', |
||||
strokeColor: '#ffffff', |
||||
strokeWeight: 2 |
||||
} |
||||
}, |
||||
ellipseOptions: { |
||||
fillColor: '#ff25dc', |
||||
fillOpacity: 0.3, |
||||
strokeWeight: 2, |
||||
strokeColor: '#ff25dc' |
||||
}, |
||||
polylineOptions: { |
||||
strokeColor: '#222', |
||||
strokeWeight: 10 |
||||
}, |
||||
polygonOptions: { |
||||
fillColor: '#ffc300', |
||||
fillOpacity: 0.3, |
||||
strokeWeight: 2, |
||||
strokeColor: '#ffc300' |
||||
} |
||||
}); |
||||
|
||||
addEvent(drawingManager); |
||||
drawingManager.setMap(map); |
||||
setDrawing(drawingManager); |
||||
} |
||||
}; |
||||
|
||||
const addEvent = drawingManager => { |
||||
drawingManager.addListener('drawing_added', function (overlay) { |
||||
// if(overlay.OVERLAY_TYPE === 'Polygon') {
|
||||
|
||||
// } else if(overlay.OVERLAY_TYPE === 'Ellipse') {
|
||||
|
||||
// }
|
||||
setOverlay(prev => [...prev, overlay]); |
||||
}); |
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
@ -1,688 +0,0 @@
|
||||
import $ from 'jquery'; |
||||
import '../../../../assets/css/custom.css'; |
||||
import { CustomInput } from 'reactstrap'; |
||||
|
||||
export const JQueryDraw = props => { |
||||
const { naver } = props; |
||||
const { map } = props; |
||||
|
||||
var Measure = function (buttons) { |
||||
this.$btnLine = buttons.line; |
||||
this.$btnPolygon = buttons.polygon; |
||||
this.$btnCircle = buttons.circle; |
||||
this.$btnRectangle = buttons.rectangle; |
||||
|
||||
this._mode = null; |
||||
|
||||
this._bindDOMEvents(); |
||||
}; |
||||
|
||||
$.extend(Measure.prototype, { |
||||
constructor: Measure, |
||||
|
||||
setMap: function (map) { |
||||
if (this.map) { |
||||
this._unbindMap(this.map); |
||||
} |
||||
|
||||
this.map = map; |
||||
|
||||
if (map) { |
||||
this._bindMap(map); |
||||
} |
||||
}, |
||||
|
||||
startMode: function (mode) { |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
this._startDistance(); |
||||
} |
||||
if (mode === 'polygon') { |
||||
this._startArea(); |
||||
} |
||||
if (mode === 'circle') { |
||||
this._startCircle(); |
||||
} |
||||
if (mode === 'rectangle') { |
||||
this._startRectangle(); |
||||
} |
||||
}, |
||||
|
||||
_startDistance: function () { |
||||
var map = this.map; |
||||
this._distanceListeners = [ |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'click', |
||||
this._onClickDistance.bind(this) |
||||
) |
||||
]; |
||||
}, |
||||
|
||||
_startArea: function () { |
||||
var map = this.map; |
||||
|
||||
this._areaListeners = [ |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'click', |
||||
this._onClickArea.bind(this) |
||||
), |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishArea.bind(this) |
||||
) |
||||
]; |
||||
|
||||
$(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); |
||||
}, |
||||
|
||||
_startCircle: function () { |
||||
var map = this.map; |
||||
this._circleListeners = [ |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'click', |
||||
this._onClickCircle.bind(this) |
||||
), |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishCircle.bind(this) |
||||
) |
||||
]; |
||||
}, |
||||
|
||||
_startRectangle: function () { |
||||
var map = this.map; |
||||
this._rectangleListeners = [ |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'click', |
||||
this._onClickRectangle.bind(this) |
||||
), |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishRectangle.bind(this) |
||||
) |
||||
]; |
||||
}, |
||||
|
||||
_finishDistance: function () { |
||||
naver.maps.Event.removeListener(this._distanceListeners); |
||||
delete this._distanceListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._guideline) { |
||||
this._guideline.setMap(null); |
||||
delete this._guideline; |
||||
} |
||||
|
||||
if (this._polyline) { |
||||
let polypaths = this._polyline.getPath()._array; |
||||
|
||||
//파싱
|
||||
let polypathJSON = new Array(); |
||||
for (let i = 0; i < polypaths.length; i++) { |
||||
//파싱
|
||||
let obj = new Object(); |
||||
|
||||
obj.x = '' + polypaths[i]._lng + ''; |
||||
obj.y = '' + polypaths[i]._lat + ''; |
||||
|
||||
obj = JSON.stringify(obj); |
||||
polypathJSON.push(JSON.parse(obj)); |
||||
} |
||||
|
||||
//버퍼 생성에 필요한 coordinates 배열 변환
|
||||
let lineStringPaths = []; |
||||
for (let i = 0; i < this._polyline.getPath().length; i++) { |
||||
lineStringPaths.push([ |
||||
this._polyline.getPath()._array[i].x, |
||||
this._polyline.getPath()._array[i].y |
||||
]); |
||||
} |
||||
|
||||
//버퍼 생성을 위한 line 객체
|
||||
const originalGeojson = { |
||||
type: 'FeatureCollection', |
||||
features: [ |
||||
{ |
||||
type: 'Feature', |
||||
properties: {}, |
||||
geometry: { |
||||
type: 'LineString', |
||||
coordinates: lineStringPaths |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
//버퍼 객체
|
||||
const bufferObj = buffer(originalGeojson, 50, { units: 'meters' }); |
||||
|
||||
//버퍼 라인 생성
|
||||
let bufferPath = bufferObj.features[0].geometry.coordinates[0]; |
||||
|
||||
this.bufferPolyline = new naver.maps.Polyline({ |
||||
strokeColor: '#ff0000', |
||||
strokeWeight: 2, |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path: bufferPath, |
||||
map: map |
||||
}); |
||||
|
||||
// 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
|
||||
// this._polyline.setMap(null)
|
||||
delete this._polyline; |
||||
} |
||||
//onfocus()의 반대기능 = blur()
|
||||
this.$btnLine.removeClass('control-on').blur(); |
||||
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
_finishArea: function () { |
||||
naver.maps.Event.removeListener(this._areaListeners); |
||||
delete this._areaListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._polygon) { |
||||
var path = this._polygon.getPath(); |
||||
path.pop(); |
||||
|
||||
delete this._polygon; |
||||
} |
||||
|
||||
this.$btnPolygon.removeClass('control-on').blur(); |
||||
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
_finishCircle: function () { |
||||
naver.maps.Event.removeListener(this._circleListeners); |
||||
delete this._circleListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._guidecircle) { |
||||
this._guidecircle.setMap(null); |
||||
this._radius.setMap(null); |
||||
delete this._raidus; |
||||
delete this._guidecircle; |
||||
} |
||||
|
||||
if (this._circle) { |
||||
// this._circle.setMap(null);
|
||||
delete this._circle; |
||||
} |
||||
|
||||
this.$btnCircle.removeClass('control-on').blur(); |
||||
|
||||
// delete this._lastDistance;
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
_finishRectangle: function () { |
||||
naver.maps.Event.removeListener(this._rectangleListeners); |
||||
delete this._rectangleListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._rectangle) { |
||||
this._guiderectangle.setMap(null); |
||||
delete this._guiderectangle; |
||||
} |
||||
|
||||
this.$btnRectangle.removeClass('control-on').blur(); |
||||
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
finishMode: function (mode) { |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
this._finishDistance(); |
||||
} |
||||
if (mode === 'polygon') { |
||||
this._finishArea(); |
||||
} |
||||
if (mode === 'circle') { |
||||
this._finishCircle(); |
||||
} |
||||
if (mode === 'rectangle') { |
||||
this._finishRectangle(); |
||||
} |
||||
}, |
||||
|
||||
_fromMetersToText: function (meters) { |
||||
meters = meters || 0; |
||||
|
||||
var km = 1000, |
||||
text = meters; |
||||
|
||||
if (meters >= km) { |
||||
text = parseFloat((meters / km).toFixed(1)) + 'km'; |
||||
} else { |
||||
text = parseFloat(meters.toFixed(1)) + 'm'; |
||||
} |
||||
|
||||
return text; |
||||
}, |
||||
|
||||
_addMileStone: function (coord, text, css) { |
||||
if (!this._ms) this._ms = []; |
||||
|
||||
let content; |
||||
if (text == 'Start') { |
||||
content = |
||||
'<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>' + |
||||
text + |
||||
'</span></div>'; |
||||
} else { |
||||
content = |
||||
'<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>' + |
||||
text + |
||||
'</span></div>'; |
||||
} |
||||
|
||||
var ms = new naver.maps.Marker({ |
||||
position: coord, |
||||
icon: { |
||||
content: content, |
||||
anchor: new naver.maps.Point(-5, -5) |
||||
}, |
||||
map: this.map |
||||
}); |
||||
|
||||
var msElement = $(ms.getElement()); |
||||
|
||||
if (css) { |
||||
msElement.css(css); |
||||
} else { |
||||
msElement.css('font-size', '13px'); |
||||
} |
||||
|
||||
this._ms.push(ms); |
||||
}, |
||||
|
||||
_onClickDistance: function (e) { |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if (!this._polyline) { |
||||
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
||||
this._guideline = new naver.maps.Polyline({ |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 3, |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.2, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
// this._lastDistance = this._guideline.getDistance();
|
||||
|
||||
$(document).on( |
||||
'mousemove.measure', |
||||
this._onMouseMoveDistance.bind(this) |
||||
); |
||||
this._distanceListeners.push( |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishDistance.bind(this) |
||||
) |
||||
); |
||||
|
||||
// 실제 거리재기에 사용되는 폴리라인을 생성합니다.
|
||||
this._polyline = new naver.maps.Polyline({ |
||||
strokeLineCap: 'round', |
||||
strokeLineJoin: 'round', |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 3, |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
this._lastDistance = this._polyline.getDistance(); |
||||
this._addMileStone(coord, 'Start'); |
||||
} else { |
||||
this._guideline.setPath([e.coord]); |
||||
this._polyline.getPath().push(coord); |
||||
|
||||
var distance = this._polyline.getDistance(); |
||||
this._addMileStone( |
||||
coord, |
||||
this._fromMetersToText(distance - this._lastDistance) |
||||
); |
||||
this._lastDistance = distance; |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveDistance: function (e) { |
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._guideline.getPath(); |
||||
|
||||
if (path.getLength() === 2) { |
||||
//맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
|
||||
path.pop(); |
||||
} |
||||
|
||||
// [기존 클릭 좌표, 실시간 좌표]
|
||||
path.push(coord); |
||||
}, |
||||
|
||||
_onClickArea: function (e) { |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if (!this._polygon) { |
||||
this._polygon = new naver.maps.Polygon({ |
||||
strokeOpacity: 0.8, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
paths: [coord], |
||||
map: map |
||||
}); |
||||
} else { |
||||
this._polygon.getPath().push(coord); |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveArea: function (e) { |
||||
if (!this._polygon) return; |
||||
|
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._polygon.getPath(); |
||||
|
||||
if (path.getLength() >= 2) { |
||||
path.pop(); |
||||
} |
||||
|
||||
path.push(coord); |
||||
}, |
||||
|
||||
_onClickCircle: function (e) { |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if (!this._circle) { |
||||
//가이드 라인
|
||||
this._radius = new naver.maps.Polyline({ |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
this._lastDistance = this._radius.getDistance(); |
||||
|
||||
// 임시로 보여줄 원형
|
||||
this._guidecircle = new naver.maps.Circle({ |
||||
strokeOpacity: 0.8, |
||||
strokeStyle: [4, 4], |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: this._lastDistance, |
||||
map: map |
||||
}); |
||||
|
||||
$(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); |
||||
this._circleListeners.push( |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishCircle.bind(this) |
||||
) |
||||
); |
||||
|
||||
// 실제 사용되는 원형
|
||||
this._circle = new naver.maps.Circle({ |
||||
strokeOpacity: 0.8, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: this._lastDistance, |
||||
map: map |
||||
}); |
||||
} else { |
||||
// this._guidecircle.setCenter(e.coord);
|
||||
// this._circle.setCenter(coord);
|
||||
// if(this._radius.getPath().length() === 2) {
|
||||
// this._radius.getPath().pop();
|
||||
// }
|
||||
|
||||
// this._radius.getPath().push(coord);
|
||||
|
||||
var distance = this._radius.getDistance(); |
||||
this._lastDistance = distance; |
||||
this._circle.setRadius(this._lastDistance); |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveCircle: function (e) { |
||||
if (!this._circle) return; |
||||
|
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._radius.getPath(), |
||||
center = this._guidecircle.getCenter(), //LatLng으로 나옴
|
||||
r = proj.getDistance(coord, center); |
||||
|
||||
if (path.getLength() === 2) { |
||||
path.pop(); |
||||
} |
||||
path.push(coord); |
||||
this._guidecircle.setRadius(r); |
||||
}, |
||||
|
||||
_onClickRectangle: function (e) { |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
this.max_x = 0; |
||||
this.max_y = 0; |
||||
|
||||
if (!this._rectangle) { |
||||
//min = 고정값
|
||||
this.fixed = coord; |
||||
this.min = [this.fixed.x, this.fixed.y]; |
||||
this.max = [this.max_x, this.max_y]; |
||||
this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; |
||||
|
||||
// 임시로 보여줄 사각형
|
||||
this._guiderectangle = new naver.maps.Rectangle({ |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
bounds: this.boundscoord, |
||||
map: map |
||||
}); |
||||
|
||||
$(document).on( |
||||
'mousemove.measure', |
||||
this._onMouseMoveRectangle.bind(this) |
||||
); |
||||
this._rectangleListeners.push( |
||||
naver.maps.Event.addListener( |
||||
map, |
||||
'rightclick', |
||||
this._finishRectangle.bind(this) |
||||
) |
||||
); |
||||
|
||||
//실제 사용되는 사각형
|
||||
this._rectangle = new naver.maps.Rectangle({ |
||||
strokeOpacity: 0.8, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
bounds: this.boundscoord, |
||||
map: map |
||||
}); |
||||
} else { |
||||
this.max = [coord.x, coord.y]; |
||||
this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; |
||||
this._rectangle.setBounds(this.boundscoord); |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveRectangle: function (e) { |
||||
if (!this._rectangle) return; |
||||
|
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
bounds = this._guiderectangle.getBounds(), |
||||
max = [coord.x, coord.y]; |
||||
|
||||
this.boundscoord = [this.min[0], this.min[1], max[0], max[1]]; |
||||
this._guiderectangle.setBounds(this.boundscoord); |
||||
}, |
||||
|
||||
_bindMap: function (map) {}, |
||||
|
||||
_unbindMap: function () { |
||||
this.unbindAll(); |
||||
}, |
||||
|
||||
_bindDOMEvents: function () { |
||||
this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); |
||||
this.$btnPolygon.on( |
||||
'click.measure', |
||||
this._onClickButton.bind(this, 'polygon') |
||||
); |
||||
this.$btnCircle.on( |
||||
'click.measure', |
||||
this._onClickButton.bind(this, 'circle') |
||||
); |
||||
this.$btnRectangle.on( |
||||
'click.measure', |
||||
this._onClickButton.bind(this, 'rectangle') |
||||
); |
||||
}, |
||||
|
||||
_onClickButton: function (newMode, e) { |
||||
//newMode는 방금 클릭한 값(line, polygon, circle...)
|
||||
|
||||
e.preventDefault(); |
||||
|
||||
var btn = $(e.target), |
||||
map = this.map, |
||||
mode = this._mode; |
||||
//this._mode는 클릭하기 전 값(첫 클릭이면 null)
|
||||
|
||||
if (btn.hasClass('control-on')) { |
||||
btn.removeClass('control-on'); |
||||
} else { |
||||
btn.addClass('control-on'); |
||||
} |
||||
|
||||
this._clearMode(mode); |
||||
|
||||
if (mode === newMode) { |
||||
this._mode = null; |
||||
return; |
||||
} |
||||
|
||||
this._mode = newMode; |
||||
|
||||
this.startMode(newMode); |
||||
}, |
||||
|
||||
_clearMode: function (mode) { |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
if (this._polyline) { |
||||
this._polyline.setMap(null); |
||||
delete this._polyline; |
||||
|
||||
// this._buffercircle.setMap(null);
|
||||
// delete this._buffercircle;
|
||||
|
||||
// this._buffercoord.setMap(null)
|
||||
// delete this._buffercoord;
|
||||
} |
||||
|
||||
this._finishDistance(); |
||||
} else if (mode === 'polygon') { |
||||
if (this._polygon) { |
||||
this._polygon.setMap(null); |
||||
delete this._polygon; |
||||
} |
||||
|
||||
this._finishArea(); |
||||
} else if (mode === 'circle') { |
||||
if (this._circle) { |
||||
this._circle.setMap(null); |
||||
delete this._circle; |
||||
} |
||||
|
||||
this._finishCircle(); |
||||
} else if (mode === 'rectangle') { |
||||
if (this._rectangle) { |
||||
this._rectangle.setMap(null); |
||||
delete this._rectangle; |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// id랑 매치시켜서 옵션 지정함
|
||||
var measures = new Measure({ |
||||
line: $('#line'), |
||||
polygon: $('#polygon'), |
||||
circle: $('#circle'), |
||||
rectangle: $('#rectangle') |
||||
}); |
||||
|
||||
measures.setMap(map); |
||||
|
||||
return ( |
||||
<> |
||||
<div style={{ position: 'relative' }}> |
||||
<ul className='measure-control'> |
||||
<li> |
||||
<CustomInput |
||||
id='line' |
||||
type='image' |
||||
className='control-btn' |
||||
src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png' |
||||
/> |
||||
<CustomInput |
||||
id='polygon' |
||||
type='image' |
||||
className='control-btn' |
||||
src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png' |
||||
/> |
||||
<CustomInput |
||||
id='circle' |
||||
type='image' |
||||
className='control-btn' |
||||
src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png' |
||||
/> |
||||
<CustomInput |
||||
id='rectangle' |
||||
type='image' |
||||
className='control-btn' |
||||
src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png' |
||||
/> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
@ -1,61 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { controlGpHisAction } from '../../../../modules/control/gp'; |
||||
|
||||
export const DronHistory = props => { |
||||
const { controlGpHistory } = useSelector(state => state.controlGpHisState); |
||||
const { objectId, isClickObject } = useSelector( |
||||
state => state.controlMapReducer |
||||
); |
||||
|
||||
let naver = props.naver; |
||||
let polyline; |
||||
let polylinePath = []; |
||||
|
||||
const dispatch = useDispatch(); |
||||
|
||||
useEffect(() => { |
||||
polylineRemove(); |
||||
polylineInit(); |
||||
}, [controlGpHistory]); |
||||
|
||||
useEffect(() => { |
||||
if (isClickObject) { |
||||
dispatch(controlGpHisAction.request({ id: objectId })); |
||||
} else { |
||||
polylineRemove(); |
||||
} |
||||
}, [objectId, isClickObject]); |
||||
|
||||
const polylineRemove = () => { |
||||
if (props.arrPolyline) { |
||||
props.arrPolyline.map(item => { |
||||
item.setMap(null); |
||||
}); |
||||
} |
||||
}; |
||||
const polylineInit = () => { |
||||
if (controlGpHistory) { |
||||
polyline = new naver.maps.Polyline({ |
||||
clickable: false, |
||||
strokeColor: '#ff4961', |
||||
strokeStyle: 'solid', |
||||
strokeOpacity: 5, |
||||
strokeWeight: 1.5 |
||||
}); |
||||
|
||||
controlGpHistory.map(item => { |
||||
if (item.lat > 0 && item.lng > 0) { |
||||
const position = new naver.maps.LatLng(item.lat, item.lng); |
||||
polylinePath.push(position); |
||||
} |
||||
}); |
||||
|
||||
polyline.setPath(polylinePath); |
||||
polyline.setMap(props.map); |
||||
props.arrPolyline.push(polyline); |
||||
} |
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
@ -1,153 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import '../../../../assets/css/custom.css'; |
||||
import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png'; |
||||
import DronIcon from '../../../../assets/images/drone-marker-icon.png'; |
||||
import { controlGpDtlAction } from '../../../../modules/control/gp'; |
||||
import { objectClickAction } from '../../../../modules/control/map/actions/controlMapActions'; |
||||
|
||||
export const DronMarker = props => { |
||||
const { controlGpList } = useSelector(state => state.controlGpState); |
||||
const { objectId, isClickObject } = useSelector( |
||||
state => state.controlMapReducer |
||||
); |
||||
const dispatch = useDispatch(); |
||||
|
||||
let naver = props.naver; |
||||
|
||||
var contentString = ['<div class="iw_inner"> dddd', '</div>'].join(''); |
||||
|
||||
var infowindow = new naver.maps.InfoWindow({ |
||||
content: contentString |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
markerInit(); |
||||
}, [controlGpList]); |
||||
|
||||
useEffect(() => { |
||||
props.arrMarkers.map(clickMarker => { |
||||
if (objectId === clickMarker.id && isClickObject) { |
||||
clickMarker.setIcon(DronIconPulple); |
||||
} else { |
||||
clickMarker.setIcon(DronIcon); |
||||
} |
||||
}); |
||||
// }else{
|
||||
|
||||
// }
|
||||
}, [objectId, isClickObject]); |
||||
|
||||
useEffect(() => { |
||||
props.arrMarkers.map(clickMarker => { |
||||
if (objectId === clickMarker.id) { |
||||
props.map.setCenter(clickMarker.getPosition()); |
||||
// $('#btn_modal').click();
|
||||
props.map.setZoom(13, true); |
||||
} |
||||
}); |
||||
}, [objectId]); |
||||
|
||||
//마커를 그린다.
|
||||
const addMarkers = (position, id, controlId) => { |
||||
var marker = new naver.maps.Marker({ |
||||
position: position, |
||||
title: id, |
||||
id: id, |
||||
controlId: controlId, |
||||
icon: { |
||||
// content: [
|
||||
// '<div>dddd</div>',
|
||||
|
||||
// ].join(''),
|
||||
url: DronIcon |
||||
// scaledSize: new naver.maps.scaledSize(50, 50)
|
||||
// size: new naver.maps.Size(1000, 1000),
|
||||
// origin: new naver.maps.Point(0, 0)
|
||||
// anchor: new naver.maps.Point(25, 25)
|
||||
} |
||||
}); |
||||
|
||||
marker.setMap(props.map); |
||||
|
||||
naver.maps.Event.addListener(marker, 'click', function (e) { |
||||
handlerDronClick(marker); |
||||
}); |
||||
|
||||
props.arrMarkers.push(marker); |
||||
}; |
||||
|
||||
const handlerDronClick = marker => { |
||||
if (marker.getAnimation() != null) { |
||||
// marker.setAnimation(null);
|
||||
// infowindow.close();
|
||||
// dispatch(Actions.controlGpHisAction.request(controlGpList));
|
||||
} else { |
||||
// infowindow.open(props.map, marker);
|
||||
// marker.setAnimation(naver.maps.Animation.BOUNCE);
|
||||
} |
||||
|
||||
// marker.setIcon(DronIconPulple);
|
||||
|
||||
const markerId = marker.id; |
||||
const contorlId = marker.controlId; |
||||
|
||||
//히스토리 불러오기
|
||||
|
||||
dispatch(objectClickAction(markerId)); |
||||
dispatch(controlGpDtlAction.request(contorlId)); |
||||
}; |
||||
|
||||
//마커를 삭제 한다.
|
||||
const removeMarkers = marker => { |
||||
marker.setMap(null); |
||||
}; |
||||
|
||||
//마커에 위치를 이동한다.
|
||||
const moveMarkers = (marker, position) => { |
||||
marker.setPosition(position); |
||||
}; |
||||
|
||||
//데이터가 없는 마커를 모두 삭제 한다.
|
||||
const allRemoveMarkers = () => { |
||||
if (props.arrMarkers && controlGpList) { |
||||
props.arrMarkers.map(marker => { |
||||
const isExists = controlGpList.find( |
||||
item => item.objectId === marker.id |
||||
); |
||||
if (!isExists) { |
||||
removeMarkers(marker); |
||||
const arrData = props.arrMarkers.filter( |
||||
item => item.objectId != marker.id |
||||
); |
||||
props.removeArrMarkers(arrData); |
||||
} |
||||
}); |
||||
} |
||||
// }
|
||||
}; |
||||
|
||||
//마커를 셋팅 한다.
|
||||
const markerInit = () => { |
||||
if (controlGpList) { |
||||
allRemoveMarkers(); |
||||
controlGpList.map(item => { |
||||
const position = new naver.maps.LatLng(item.lat, item.lng); |
||||
if (props.arrMarkers) { |
||||
const isExists = props.arrMarkers.find( |
||||
ele => ele.id === item.objectId |
||||
); |
||||
if (isExists) { |
||||
moveMarkers(isExists, position); |
||||
} else { |
||||
addMarkers(position, item.objectId, item.controlId); |
||||
} |
||||
} else { |
||||
addMarkers(position, item.objectId, item.controlId); |
||||
} |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
@ -1,146 +0,0 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
import '../../../../assets/css/custom.css'; |
||||
|
||||
export const FeatureAirZone = props => { |
||||
const mapControl = useSelector(state => state.controlMapReducer); |
||||
let infoWindow; |
||||
|
||||
useEffect(() => { |
||||
featureAirZoneInit(); |
||||
featureAirEvent(); |
||||
}, [mapControl]); |
||||
|
||||
useEffect(() => {}, []); |
||||
|
||||
const infowindowOpen = data => { |
||||
const content = |
||||
'<div class="tooltip-box">' + |
||||
'<div class="tooltip-ti">' + |
||||
'<span>' + |
||||
data.title + |
||||
'</span>' + |
||||
'</div>' + |
||||
'<div class="tooltip-txt">' + |
||||
'<div class="tooltip-txt-list">' + |
||||
// '<span class="ti">설명</span>' +
|
||||
'<span>' + |
||||
data.description + |
||||
'</span>' + |
||||
'</div>' + |
||||
// '<div class="tooltip-txt-list">' +
|
||||
// '<span class="ti">좌표정보</span>' +
|
||||
// '<span>'+data.coord+'</span>' +
|
||||
// '</div>' +
|
||||
'</div>' + |
||||
// '<span class="arrow"></span>' +
|
||||
'</div>'; |
||||
|
||||
infoWindow = new props.naver.maps.InfoWindow({ |
||||
class: 'tooltip-test', |
||||
content: content, |
||||
maxWidth: 200, |
||||
backgroundColor: '#283046', //박스안쪽영역 컬러
|
||||
// borderColor: '#333', //테두리컬러
|
||||
// borderWidth: 3, //테두리 굵기
|
||||
anchorSize: new props.naver.maps.Size(30, -10), |
||||
anchorSkew: false, |
||||
anchorColor: '#283046', |
||||
|
||||
pixelOffset: new props.naver.maps.Point(20, -20) |
||||
}); |
||||
|
||||
infoWindow.open(props.map, data.coord); |
||||
}; |
||||
|
||||
const featureAirZoneInit = () => { |
||||
let arrGeoJson = []; |
||||
// props.map.data.removeGeoJson(props.geoJson);
|
||||
// let geoJson = originGeoJson;
|
||||
let useGeoJson = { type: 'FeatureCollection' }; |
||||
useGeoJson.features = props.features; |
||||
|
||||
props.map.data.removeGeoJson(useGeoJson); |
||||
|
||||
props.features.map(item => { |
||||
if (item.properties.type === '0001' && mapControl.area0001) { |
||||
arrGeoJson.push(item); |
||||
} else if (item.properties.type === '0002' && mapControl.area0002) { |
||||
arrGeoJson.push(item); |
||||
} else if (item.properties.type === '0003' && mapControl.area0003) { |
||||
arrGeoJson.push(item); |
||||
} else if (item.properties.type === '0004' && mapControl.area0004) { |
||||
arrGeoJson.push(item); |
||||
} else if (item.properties.type === '0005' && mapControl.area0005) { |
||||
arrGeoJson.push(item); |
||||
} else if (item.properties.type === '0006' && mapControl.area0006) { |
||||
arrGeoJson.push(item); |
||||
} |
||||
}); |
||||
|
||||
useGeoJson.features = arrGeoJson; |
||||
props.map.data.addGeoJson(useGeoJson); |
||||
|
||||
props.map.data.setStyle(feature => { |
||||
var color; |
||||
|
||||
//0001 비행금지구역 #FF3648
|
||||
//0002 비행제한구역 #FFA1AA
|
||||
//0003 관제권(공항) #FFA800
|
||||
//0004 비행장(군사) #A16B00
|
||||
//0005 이착륙장(RC비행장) #AB40FF
|
||||
//0006 초경량비행장치 #009cad
|
||||
|
||||
// 공역 색상 변경
|
||||
const type = feature.getProperty('type'); |
||||
if (type === '0001') { |
||||
color = '#FF3648'; |
||||
} else if (type === '0002') { |
||||
color = '#FFA1AA'; |
||||
} else if (type === '0003') { |
||||
color = '#FFA800'; |
||||
} else if (type === '0004') { |
||||
color = '#A16B00'; |
||||
} else if (type === '0005') { |
||||
color = '#AB40FF'; |
||||
} else if (type === '0006') { |
||||
color = '#009cad'; |
||||
} |
||||
|
||||
return { |
||||
fillColor: color, |
||||
strokeColor: color, |
||||
strokeWeight: 0.7, |
||||
icon: null |
||||
}; |
||||
}); |
||||
}; |
||||
|
||||
const featureAirEvent = () => { |
||||
props.map.data.addListener('click', function (e) { |
||||
// e.feature.setProperty('isColorful', true);
|
||||
}); |
||||
|
||||
props.map.data.addListener('mouseover', function (e) { |
||||
const data = {}; |
||||
data.coord = e.coord; |
||||
data.title = e.feature.property_name; |
||||
data.description = e.feature.property_description; |
||||
props.map.data.overrideStyle(e.feature, { |
||||
strokeWeight: 3 |
||||
// icon: HOME_PATH +'/img/example/pin_spot.png'
|
||||
}); |
||||
|
||||
infowindowOpen(data); |
||||
}); |
||||
|
||||
props.map.data.addListener('mouseout', function (e) { |
||||
props.map.data.revertStyle(); |
||||
|
||||
if (infoWindow) { |
||||
infoWindow.close(); |
||||
} |
||||
}); |
||||
}; |
||||
return null; |
||||
}; |
||||
@ -1,23 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
|
||||
export const NaverMapSearch = props => { |
||||
useEffect(() => { |
||||
props.naver.maps.Service.geocode( |
||||
{ |
||||
address: '산곡동' |
||||
}, |
||||
function (status, response) { |
||||
if (status !== naver.maps.Service.Status.OK) { |
||||
return alert('Something wrong!'); |
||||
} |
||||
|
||||
var result = response.result, // 검색 결과의 컨테이너
|
||||
items = result.items; // 검색 결과의 배열
|
||||
|
||||
// do Something
|
||||
} |
||||
); |
||||
}); |
||||
|
||||
return null; |
||||
}; |
||||
@ -1,522 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
const SENSOR_RADIUS = '100'; |
||||
const SENSOR_RADIUS_DIVISION = '3'; |
||||
let lenderCnt = 0; |
||||
const SensorZone = props => { |
||||
const { naver } = props; |
||||
// 드론 실시간 정보
|
||||
const { controlGpList } = useSelector(state => state.controlGpState); |
||||
// 환경지표 타입(dust, co, o3, no2, so2)
|
||||
const { sensor } = useSelector(state => state.controlMapReducer); |
||||
// 센서레이어(환경지표) 관리
|
||||
const [circleLayers, setCircleLayers] = useState([]); |
||||
const [polilineGroupLayers, setPolilineGroupLayers] = useState({}); |
||||
|
||||
useEffect(() => { |
||||
lenderCnt++; |
||||
if (!sensor) { |
||||
removeSensorLayers(); |
||||
} else { |
||||
initSensorLayer(); |
||||
} |
||||
}, [controlGpList, sensor]); |
||||
|
||||
let infoWindow; |
||||
// 센서 레이어 Info
|
||||
const infowindowOpen = data => { |
||||
const content = ` |
||||
<div class="tooltip-box" style="max-width: 300px;"> |
||||
<div class="tooltip-ti"> |
||||
<span>${data.title}</span> |
||||
</div> |
||||
<div class="tooltip-txt"> |
||||
<div class="tooltip-txt-list"> |
||||
<div style="color: ${data.sensor.sensorDust.color};"> |
||||
<span style="width: 120px; display: inline-block;">${data.sensor.sensorDust.title}(${data.sensor.sensorDust.text})</span> |
||||
<span>${data.sensor.sensorDust.value}</span> |
||||
</div> |
||||
<div style="color: ${data.sensor.sensorO3.color};"> |
||||
<span style="width: 120px; display: inline-block;">${data.sensor.sensorO3.title}(${data.sensor.sensorO3.text})</span> |
||||
<span>${data.sensor.sensorO3.value}</span> |
||||
</div> |
||||
<div style="color: ${data.sensor.sensorNo2.color};"> |
||||
<span style="width: 120px; display: inline-block;">${data.sensor.sensorNo2.title}(${data.sensor.sensorNo2.text})</span> |
||||
<span>${data.sensor.sensorNo2.value}</span> |
||||
</div> |
||||
<div style="color: ${data.sensor.sensorCo.color};"> |
||||
<span style="width: 120px; display: inline-block;">${data.sensor.sensorCo.title}(${data.sensor.sensorCo.text})</span> |
||||
<span>${data.sensor.sensorCo.value}</span> |
||||
</div> |
||||
<div style="color: ${data.sensor.sensorSo2.color};"> |
||||
<span style="width: 120px; display: inline-block;">${data.sensor.sensorSo2.title}(${data.sensor.sensorSo2.text})</span> |
||||
<span>${data.sensor.sensorSo2.value}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
|
||||
infoWindow = new naver.maps.InfoWindow({ |
||||
class: 'tooltip-sensor', |
||||
content: content, |
||||
maxWidth: 300, |
||||
backgroundColor: '#283046', //박스안쪽영역 컬러
|
||||
// borderColor: '#333', //테두리컬러
|
||||
// borderWidth: 3, //테두리 굵기
|
||||
anchorSize: new naver.maps.Size(30, -10), |
||||
anchorSkew: false, |
||||
anchorColor: '#283046', |
||||
|
||||
pixelOffset: new naver.maps.Point(20, -20) |
||||
}); |
||||
|
||||
infoWindow.open(props.map, data.coord); |
||||
}; |
||||
// 센서레이어 초기화
|
||||
const initSensorLayer = () => { |
||||
emtpyLayerRemove(); |
||||
if (controlGpList) { |
||||
controlGpList.forEach(controlGp => { |
||||
const { controlId, lat, lng, objectId } = controlGp; |
||||
let color = undefined; |
||||
const sensorData = convtSensorData(controlGp); |
||||
if (sensorData) { |
||||
if (sensor === 'dust') color = sensorData.sensorDust.color; |
||||
else if (sensor === 'co') color = sensorData.sensorCo.color; |
||||
else if (sensor === 'so2') color = sensorData.sensorSo2.color; |
||||
else if (sensor === 'no2') color = sensorData.sensorNo2.color; |
||||
else if (sensor === 'o3') color = sensorData.sensorO3.color; |
||||
} |
||||
|
||||
const position = new naver.maps.LatLng(controlGp.lat, controlGp.lng); |
||||
|
||||
const polilineLayers = polilineGroupLayers[controlId]; |
||||
if (polilineLayers) { |
||||
// const prevPosition = polilineLayers[0].position;
|
||||
// if(!prevPosition.equals(position)){
|
||||
movePolilineLayers(polilineLayers, position, color); |
||||
// }
|
||||
} else { |
||||
addPolilineLayers(controlId, objectId, position, color); |
||||
} |
||||
|
||||
const circleLayer = circleLayers.find( |
||||
layer => layer.controlId === controlId |
||||
); |
||||
if (circleLayer) |
||||
moveCircleLayer(circleLayer, position, color, sensorData); |
||||
else addCircleLayer(controlId, objectId, position, color, sensorData); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
// 센서레이어 생성
|
||||
const addSensorLayer = (position, id, controlId, color, sensorData) => { |
||||
addPolilineLayers(controlId, id, position, color); |
||||
addCircleLayer(controlId, id, position, color, sensorData); |
||||
}; |
||||
// Circle 레이어 생성
|
||||
const addCircleLayer = (controlId, id, position, color, sensorData) => { |
||||
const circleLayer = new naver.maps.Circle({ |
||||
title: id, |
||||
id: id, |
||||
controlId: controlId, |
||||
clickable: true, |
||||
center: position, |
||||
radius: SENSOR_RADIUS, |
||||
// map: props.map,
|
||||
strokeColor: color, |
||||
strokeOpacity: 1, |
||||
strokeWeight: 2, |
||||
fillColor: color, |
||||
fillOpacity: 0.2, |
||||
sensorData: sensorData |
||||
}); |
||||
// Circle 이벤트 주입
|
||||
naver.maps.Event.addListener(circleLayer, 'mouseover', function (e) { |
||||
const data = {}; |
||||
data.coord = e.coord; |
||||
data.title = '환경지표'; |
||||
data.controlId = e.overlay.controlId; |
||||
data.sensor = e.overlay.sensorData; |
||||
e.overlay.setOptions({ |
||||
strokeWeight: 5, |
||||
fillOpacity: 0.5 |
||||
}); |
||||
infowindowOpen(data); |
||||
}); |
||||
naver.maps.Event.addListener(circleLayer, 'mouseout', function (e) { |
||||
e.overlay.setOptions({ |
||||
strokeWeight: 2, |
||||
fillOpacity: 0.2 |
||||
}); |
||||
// props.map.Event.revertStyle();
|
||||
if (infoWindow) { |
||||
infoWindow.close(); |
||||
} |
||||
}); |
||||
circleLayer.setMap(props.map); |
||||
setCircleLayers(prev => [...prev, circleLayer]); |
||||
}; |
||||
|
||||
const addPolilineLayers = (controlId, id, position, color) => { |
||||
// 지도에 적용 및 레이어 관리 추가
|
||||
|
||||
const polilineLayers = createCircleInGrid(position, id, controlId, color); |
||||
polilineLayers.forEach(layer => layer.setMap(props.map)); |
||||
setPolilineGroupLayers(prev => ({ |
||||
...prev, |
||||
[controlId]: polilineLayers |
||||
})); |
||||
}; |
||||
|
||||
// 센서레이어 이동
|
||||
const moveSensorLayer = (controlId, position, color) => { |
||||
const circleLayer = circleLayers.find( |
||||
layer => layer.controlId === controlId |
||||
); |
||||
moveCircleLayer(circleLayer, position, color); |
||||
|
||||
const polilineLayers = polilineGroupLayers[controlId]; |
||||
movePolilineLayers(polilineLayers, position, color); |
||||
}; |
||||
const moveCircleLayer = (circleLayer, position, color, sensorData) => { |
||||
// const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
|
||||
if (circleLayer) { |
||||
circleLayer.sensorData = sensorData; |
||||
circleLayer.setOptions({ |
||||
center: position, |
||||
strokeColor: color, |
||||
fillColor: color |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
const movePolilineLayers = (polilineLayers, position, color) => { |
||||
const { controlId, id, position: prevPosition } = polilineLayers[0]; |
||||
if (prevPosition.equals(position)) { |
||||
if (polilineLayers) { |
||||
polilineLayers.forEach(layer => |
||||
layer.setOptions({ strokeColor: color }) |
||||
); |
||||
} |
||||
} else { |
||||
if (polilineLayers) { |
||||
polilineLayers.forEach(layer => layer.setMap(null)); |
||||
} |
||||
const newPolilineLayers = createCircleInGrid( |
||||
position, |
||||
id, |
||||
controlId, |
||||
color |
||||
); |
||||
newPolilineLayers.forEach(layer => layer.setMap(props.map)); |
||||
setPolilineGroupLayers(prev => ({ |
||||
...prev, |
||||
[controlId]: newPolilineLayers |
||||
})); |
||||
} |
||||
}; |
||||
|
||||
// 센서레이어 제거
|
||||
const removeSensorLayer = controlId => { |
||||
removeCircleLayer(controlId); |
||||
removePolilineLayer(controlId); |
||||
}; |
||||
const removeCircleLayer = controlId => { |
||||
const idx = circleLayers.findIndex(layer => layer.controlId === controlId); |
||||
circleLayers[idx].setMap(null); |
||||
setCircleLayers(prev => { |
||||
prev.splice(idx, 1); |
||||
return prev; |
||||
}); |
||||
}; |
||||
const removePolilineLayer = controlId => { |
||||
const polilineLayers = polilineGroupLayers[controlId]; |
||||
if (polilineLayers) polilineLayers.forEach(layer => layer.setMap(null)); |
||||
setPolilineGroupLayers(prev => { |
||||
delete prev[controlId]; |
||||
return prev; |
||||
}); |
||||
}; |
||||
// 센서레이어 모두 제거
|
||||
const removeSensorLayers = () => { |
||||
circleLayers.forEach(layer => layer.setMap(null)); |
||||
setCircleLayers([]); |
||||
const keys = Object.keys(polilineGroupLayers); |
||||
keys.forEach(key => { |
||||
polilineGroupLayers[key].forEach(layer => layer.setMap(null)); |
||||
}); |
||||
setPolilineGroupLayers({}); |
||||
}; |
||||
|
||||
// 레이어관리시 새로운 데이터에 없는 좌표 제거
|
||||
const emtpyLayerRemove = () => { |
||||
setCircleLayers(prev => { |
||||
const remainCircleLayers = prev.filter((circleLayer, i) => { |
||||
const controlId = circleLayer.controlId; |
||||
const findObj = controlGpList.find( |
||||
controlGp => controlGp.controlId === controlId |
||||
); |
||||
if (findObj) { |
||||
return circleLayer; |
||||
} else { |
||||
circleLayer.setMap(null); |
||||
} |
||||
}); |
||||
return remainCircleLayers; |
||||
}); |
||||
setPolilineGroupLayers(prev => { |
||||
const keys = Object.keys(prev); |
||||
const remainPolilineGroupLayer = {}; |
||||
keys.forEach((controlId, i) => { |
||||
const findObj = controlGpList.find( |
||||
controlGp => controlGp.controlId === controlId |
||||
); |
||||
if (findObj) { |
||||
remainPolilineGroupLayer[controlId] = prev[controlId]; |
||||
} else { |
||||
const polilineLayers = prev[controlId]; |
||||
polilineLayers.forEach(layer => { |
||||
layer.setMap(null); |
||||
}); |
||||
} |
||||
}); |
||||
return remainPolilineGroupLayer; |
||||
}); |
||||
}; |
||||
|
||||
// Circle안에 격자 무늬 생성
|
||||
const createCircleInGrid = (position, id, controlId, color) => { |
||||
// Circle 레이어 안의 격자무늬
|
||||
const polilineLayers = []; |
||||
for (let i = 0; i <= SENSOR_RADIUS_DIVISION; i++) { |
||||
// 각 사분면 각도
|
||||
const diff = 90 / SENSOR_RADIUS_DIVISION; |
||||
const angleQuadrant1 = diff * i; |
||||
const angleQuadrant2 = 180 - diff * i; |
||||
const angleQuadrant3 = 180 + diff * i; |
||||
const angleQuadrant4 = diff * -i; |
||||
// 각 사분면 좌표
|
||||
const coord1 = new naver.maps.EPSG3857.getDestinationCoord( |
||||
position, |
||||
angleQuadrant1, |
||||
SENSOR_RADIUS |
||||
); |
||||
const coord2 = new naver.maps.EPSG3857.getDestinationCoord( |
||||
position, |
||||
angleQuadrant2, |
||||
SENSOR_RADIUS |
||||
); |
||||
const coord3 = new naver.maps.EPSG3857.getDestinationCoord( |
||||
position, |
||||
angleQuadrant3, |
||||
SENSOR_RADIUS |
||||
); |
||||
const coord4 = new naver.maps.EPSG3857.getDestinationCoord( |
||||
position, |
||||
angleQuadrant4, |
||||
SENSOR_RADIUS |
||||
); |
||||
const polyline12 = new naver.maps.Polyline({ |
||||
id, |
||||
position, |
||||
controlId, |
||||
path: [coord1, coord2], |
||||
strokeWeight: 0.8, |
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 1, |
||||
strokeColor: color, |
||||
strokeStyle: 'shortdash' |
||||
}); |
||||
polilineLayers.push(polyline12); |
||||
const polyline23 = new naver.maps.Polyline({ |
||||
id, |
||||
position, |
||||
controlId, |
||||
path: [coord2, coord3], |
||||
strokeWeight: 0.8, |
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 1, |
||||
strokeColor: color, |
||||
strokeStyle: 'shortdash' |
||||
}); |
||||
polilineLayers.push(polyline23); |
||||
const polyline34 = new naver.maps.Polyline({ |
||||
id, |
||||
position, |
||||
controlId, |
||||
path: [coord3, coord4], |
||||
strokeWeight: 0.8, |
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 1, |
||||
strokeColor: color, |
||||
strokeStyle: 'shortdash' |
||||
}); |
||||
polilineLayers.push(polyline34); |
||||
const polyline41 = new naver.maps.Polyline({ |
||||
id, |
||||
position, |
||||
controlId, |
||||
path: [coord4, coord1], |
||||
strokeWeight: 0.8, |
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 1, |
||||
strokeColor: color, |
||||
strokeStyle: 'shortdash' |
||||
}); |
||||
polilineLayers.push(polyline41); |
||||
} |
||||
return polilineLayers; |
||||
}; |
||||
|
||||
// 환경지표 필요한 데이터로 변환
|
||||
const convtSensorData = sensorData => { |
||||
const r = { |
||||
sensorDust: { |
||||
title: '미세먼지', |
||||
value: '-', |
||||
text: '-', |
||||
color: undefined |
||||
}, |
||||
sensorCo: { |
||||
title: '일산화탄소', |
||||
value: '-', |
||||
text: '-', |
||||
color: undefined |
||||
}, |
||||
sensorSo2: { |
||||
title: '아황산가스', |
||||
value: '-', |
||||
text: '-', |
||||
color: undefined |
||||
}, |
||||
sensorNo2: { |
||||
title: '이산화질소', |
||||
value: '-', |
||||
text: '-', |
||||
color: undefined |
||||
}, |
||||
sensorO3: { |
||||
title: '오존', |
||||
value: '-', |
||||
text: '-', |
||||
color: undefined |
||||
} |
||||
}; |
||||
|
||||
// 정수: 미세먼지 || 소수점 1자리 : 일산화탄소 || 소수점 3자리 : 오존, 이산화질소, 아황산가스
|
||||
// 좋음 : 파랑, 보통 : 노랑, 나쁨 : 주황, 매우나쁨 : 빨강
|
||||
// 미세먼지 : 좋음(0~30) 보통(31~80) 나쁨(81~150) 매우나쁨(151~)
|
||||
if (sensorData.sensorDust != undefined && sensorData.sensorDust != null) { |
||||
const val = (r.sensorDust.value = Math.round(sensorData.sensorDust)); |
||||
if (val <= 30) { |
||||
r.sensorDust.text = '좋음'; |
||||
r.sensorDust.color = '#37c9ff'; |
||||
} else if (val <= 80) { |
||||
r.sensorDust.text = '보통'; |
||||
r.sensorDust.color = '#ffff44'; |
||||
} else if (val <= 150) { |
||||
r.sensorDust.text = '나쁨'; |
||||
r.sensorDust.color = '#ffa044'; |
||||
} else if (val > 150) { |
||||
r.sensorDust.text = '매우나쁨'; |
||||
r.sensorDust.color = '#ff5959'; |
||||
} else { |
||||
r.sensorDust.text = '-'; |
||||
r.sensorDust.color = '#a1a1a1'; |
||||
} |
||||
} |
||||
// 일산화탄소 : 좋음(0~2) 보통(2.1~9) 나쁨(9.1~15) 매우나쁨(15.1~)
|
||||
if (sensorData.sensorCo != undefined && sensorData.sensorCo != null) { |
||||
const val = (r.sensorCo.value = |
||||
Math.round(sensorData.sensorCo * 10) / 10); |
||||
if (val <= 0.2) { |
||||
r.sensorCo.text = '좋음'; |
||||
r.sensorCo.color = '#37c9ff'; |
||||
} else if (val <= 9) { |
||||
r.sensorCo.text = '보통'; |
||||
r.sensorCo.color = '#ffff44'; |
||||
} else if (val <= 15) { |
||||
r.sensorCo.text = '나쁨'; |
||||
r.sensorCo.color = '#ffa044'; |
||||
} else if (val > 15) { |
||||
r.sensorCo.text = '매우나쁨'; |
||||
r.sensorCo.color = '#ff5959'; |
||||
} else { |
||||
r.sensorCo.text = '-'; |
||||
r.sensorCo.color = '#a1a1a1'; |
||||
} |
||||
} |
||||
// 아황산가스 : 좋음(0~0.02) 보통(0.021~0.05) 나쁨(0.051~0.15) 매우나쁨 (0.151 ~)
|
||||
if (sensorData.sensorSo2 != undefined && sensorData.sensorSo2 != null) { |
||||
const val = (r.sensorSo2.value = |
||||
Math.round(sensorData.sensorSo2 * 1000) / 1000); |
||||
if (val <= 0.02) { |
||||
r.sensorSo2.text = '좋음'; |
||||
r.sensorSo2.color = '#37c9ff'; |
||||
} else if (val <= 0.05) { |
||||
r.sensorSo2.text = '보통'; |
||||
r.sensorSo2.color = '#ffff44'; |
||||
} else if (val <= 0.15) { |
||||
r.sensorSo2.text = '나쁨'; |
||||
r.sensorSo2.color = '#ffa044'; |
||||
} else if (val > 0.15) { |
||||
r.sensorSo2.text = '매우나쁨'; |
||||
r.sensorSo2.color = '#ff5959'; |
||||
} else { |
||||
r.sensorSo2.text = '-'; |
||||
r.sensorSo2.color = '#a1a1a1'; |
||||
} |
||||
} |
||||
// 이산화질소 : 좋음(0~0.03) 보통(0.031~0.06) 나쁨(0.061~0.2) 매우나쁨(0.201~)
|
||||
if (sensorData.sensorNo2 != undefined && sensorData.sensorNo2 != null) { |
||||
const val = (r.sensorNo2.value = |
||||
Math.round(sensorData.sensorNo2 * 1000) / 1000); |
||||
if (val <= 0.03) { |
||||
r.sensorNo2.text = '좋음'; |
||||
r.sensorNo2.color = '#37c9ff'; |
||||
} else if (val <= 0.06) { |
||||
r.sensorNo2.text = '보통'; |
||||
r.sensorNo2.color = '#ffff44'; |
||||
} else if (val <= 0.2) { |
||||
r.sensorNo2.text = '나쁨'; |
||||
r.sensorNo2.color = '#ffa044'; |
||||
} else if (val > 0.2) { |
||||
r.sensorNo2.text = '매우나쁨'; |
||||
r.sensorNo2.color = '#ff5959'; |
||||
} else { |
||||
r.sensorNo2.text = '-'; |
||||
r.sensorNo2.color = '#a1a1a1'; |
||||
} |
||||
} |
||||
// 오존 : 좋음(0~0.03) 보통(0.031~0.09) 나쁨(0.091~0.15) 매우나쁨(0.151~)
|
||||
if (sensorData.sensorO3 != undefined && sensorData.sensorO3 != null) { |
||||
const val = (r.sensorO3.value = |
||||
Math.round(sensorData.sensorO3 * 1000) / 1000); |
||||
if (val <= 0.03) { |
||||
r.sensorO3.text = '좋음'; |
||||
r.sensorO3.color = '#37c9ff'; |
||||
} else if (val <= 0.09) { |
||||
r.sensorO3.text = '보통'; |
||||
r.sensorO3.color = '#ffff44'; |
||||
} else if (val <= 0.15) { |
||||
r.sensorO3.text = '나쁨'; |
||||
r.sensorO3.color = '#ffa044'; |
||||
} else if (val > 0.15) { |
||||
r.sensorO3.text = '매우나쁨'; |
||||
r.sensorO3.color = '#ff5959'; |
||||
} else { |
||||
r.sensorO3.text = '-'; |
||||
r.sensorO3.color = '#a1a1a1'; |
||||
} |
||||
} |
||||
return r; |
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
|
||||
export default SensorZone; |
||||
@ -1,39 +0,0 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
|
||||
export const NMap = props => { |
||||
const naver = window.naver; |
||||
|
||||
const [mapObject, setMapObject] = useState(null); |
||||
|
||||
useEffect(() => { |
||||
mapInit(); |
||||
|
||||
// setIsMapLoad(true);
|
||||
}, []); |
||||
|
||||
const mapInit = () => { |
||||
// const mapOptions = {
|
||||
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
||||
// // ceneter: new naver.maps.LatLng(37.445949, 126.673868),
|
||||
// zoom: 15,
|
||||
// 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' style={{ width: '100%', height: '100vh' }}></div>; |
||||
}; |
||||
@ -1,58 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
import DronIcon from '../../../assets/images//drone-marker-icon.png'; |
||||
export const NMapMarker = props => { |
||||
const naver = window.naver; |
||||
|
||||
useEffect(() => { |
||||
if (props.selMarker && props.selMarker.setMap) { |
||||
props.selMarker.setMap(null); |
||||
} |
||||
|
||||
if (props.data) { |
||||
for (let i = 0; i < props.data?.length; i++) { |
||||
if (props.data[i].lat > 0 && props.data[i].lon > 0) { |
||||
const position = new naver.maps.LatLng( |
||||
props.data[i]?.lat, |
||||
props.data[i]?.lon |
||||
); |
||||
addMarkers(position, props.data[i]?.cntrlId); |
||||
|
||||
return; |
||||
} |
||||
} |
||||
props.data?.map((item, index) => {}); |
||||
} |
||||
}, [props.data]); |
||||
|
||||
useEffect(() => { |
||||
if (props.selMarker && props.selMarker) { |
||||
const position = new naver.maps.LatLng(props.info?.lat, props.info?.lon); |
||||
props.selMarker?.setPosition(position); |
||||
|
||||
// moveMarkers(props.selMarker, position);
|
||||
} |
||||
}, [props.info]); |
||||
|
||||
const addMarkers = (position, id) => { |
||||
//이미 지정된 마커 제거
|
||||
|
||||
var marker = new naver.maps.Marker({ |
||||
position: position, |
||||
title: id, |
||||
id: id, |
||||
icon: { |
||||
url: DronIcon |
||||
} |
||||
}); |
||||
props.map.setCenter(position); |
||||
props.map.setZoom(14); |
||||
marker.setMap(props.map); |
||||
props.setSelMarker(marker); |
||||
}; |
||||
|
||||
const moveMarkers = (marker, position) => { |
||||
// marker.setPositon(position);
|
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
@ -1,44 +0,0 @@
|
||||
import { useEffect } from 'react'; |
||||
|
||||
export const NMapPolyline = props => { |
||||
const naver = window.naver; |
||||
|
||||
let polyline; |
||||
let polylinePath = []; |
||||
|
||||
useEffect(() => { |
||||
//기존 폴리라인 삭제 처리
|
||||
if (props.selPolyline && props.selPolyline.setMap) { |
||||
props.selPolyline.setMap(null); |
||||
} |
||||
|
||||
addPolyline(); |
||||
}, [props.data]); |
||||
|
||||
const addPolyline = () => { |
||||
if (props.data) { |
||||
polyline = new naver.maps.Polyline({ |
||||
clickable: false, |
||||
strokeColor: '#ff4961', |
||||
strokeStyle: 'solid', |
||||
strokeOpacity: 5, |
||||
strokeWeight: 1.5 |
||||
}); |
||||
|
||||
props.data.map(item => { |
||||
if (item.lat > 0 && item.lon > 0) { |
||||
const position = new naver.maps.LatLng(item.lat, item.lon); |
||||
polylinePath.push(position); |
||||
} |
||||
}); |
||||
|
||||
polyline.setPath(polylinePath); |
||||
|
||||
polyline.setMap(props.map); |
||||
props.setSelPolyline(polyline); |
||||
// props.arrPolyline.push(polyline);
|
||||
} |
||||
}; |
||||
|
||||
return null; |
||||
}; |
||||
Loading…
Reference in new issue