|
|
@ -1,24 +1,16 @@ |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
import NaverMapControl from './NaverMapControl'; |
|
|
|
import NaverMapControl from './NaverMapControl'; |
|
|
|
|
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import { DrawMap } from './draw/DrawMap'; |
|
|
|
import { DrawMap } from './draw/DrawMap'; |
|
|
|
import { JQueryDraw } from './draw/JQueryDraw'; |
|
|
|
import { JQueryDraw } from './draw/JQueryDraw'; |
|
|
|
|
|
|
|
import { JQueryTest } from './draw/JQueryTest'; |
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
|
|
|
|
import SensorZone from "./sensor/SensorZone"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import $ from 'jquery'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const NaverCustomMap = () => { |
|
|
|
export const NaverCustomMap = () => { |
|
|
|
const naver = window.naver; |
|
|
|
const naver = window.naver; |
|
|
|
// let map;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [isMapLoad, setIsMapLoad] = useState(false); |
|
|
|
|
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
|
|
|
|
|
|
|
|
let arrMarkers = []; // 마커 배열
|
|
|
|
|
|
|
|
let arrPolyline = []; // 폴리라인 배열
|
|
|
|
|
|
|
|
let features = geoJson.features; |
|
|
|
let features = geoJson.features; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -26,14 +18,10 @@ export const NaverCustomMap = () => { |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const removeArrMarkers = arrData => { |
|
|
|
|
|
|
|
arrMarkers = arrData; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
const NaverMapInit = () => { |
|
|
|
const mapOptions = { |
|
|
|
const mapOptions = { |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
zoom: 16, |
|
|
|
zoom: 17, |
|
|
|
zoomControl: true, |
|
|
|
zoomControl: true, |
|
|
|
// mapTypeId: naver.maps.MapTypeId.HYBRID,
|
|
|
|
// mapTypeId: naver.maps.MapTypeId.HYBRID,
|
|
|
|
zoomControlOptions: { |
|
|
|
zoomControlOptions: { |
|
|
@ -44,6 +32,7 @@ export const NaverCustomMap = () => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
const map = new naver.maps.Map('map', mapOptions); |
|
|
|
const map = new naver.maps.Map('map', mapOptions); |
|
|
|
setMapObject(map); |
|
|
|
setMapObject(map); |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
@ -51,6 +40,7 @@ export const NaverCustomMap = () => { |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh', position: 'absolute' }}> |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh', position: 'absolute' }}> |
|
|
|
{/* 제이쿼리로 그리기 */} |
|
|
|
{/* 제이쿼리로 그리기 */} |
|
|
|
<JQueryDraw map={mapObject} naver={naver} /> |
|
|
|
<JQueryDraw map={mapObject} naver={naver} /> |
|
|
|
|
|
|
|
{/* <JQueryTest map={mapObject} naver={naver} /> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{mapObject != null ? ( |
|
|
|
{mapObject != null ? ( |
|
|
@ -61,6 +51,8 @@ export const NaverCustomMap = () => { |
|
|
|
{/* 그리기 도구 모음 불러오는 거 */} |
|
|
|
{/* 그리기 도구 모음 불러오는 거 */} |
|
|
|
<DrawMap map={mapObject} naver={naver} /> |
|
|
|
<DrawMap map={mapObject} naver={naver} /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <JQueryConv map={mapObject} naver={naver} /> */} |
|
|
|
|
|
|
|
|
|
|
|
</> |
|
|
|
</> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|