diff --git a/package.json b/package.json index 6a6b9ef..7b2acee 100644 --- a/package.json +++ b/package.json @@ -148,10 +148,21 @@ "sass-loader": "^8.0.2", "typescript": "^4.3.5" }, - "browserslist": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all", + "not safari < 10", + "not chrome < 51", + "not android < 5", + "not ie < 12" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, "homepage": "" } diff --git a/src/components/map/naver/MapBoxTest.js b/src/components/map/naver/MapBoxTest.js index 2bde40e..d4e2b60 100644 --- a/src/components/map/naver/MapBoxTest.js +++ b/src/components/map/naver/MapBoxTest.js @@ -1,29 +1,485 @@ -import mapboxgl from 'mapbox-gl'; import { MAPBOX_TOKEN } from '../../../configs/constants'; -import { useContext, useEffect, useRef, useState } from 'react'; -import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl'; +import React, { useEffect, useState, useRef } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import { DronMarker } from './dron/DronMarker'; +import { DronHistory } from './dron/DronHistory'; +import NaverMapControl from './NaverMapControl'; +import { NaverMapSearch } from './search/NaverMapSearch'; +import { FeatureAirZone } from './feature/FeatureAirZone'; +import geoJson from '../geojson/airArea.json'; +import DronPlan from './dron/DronPlan'; +import NewDronPlan from './dron/NewDronPlan'; +import { NewDronHistory } from './dron/NewDronHistroy'; +import DronToast from './dron/DronToast'; +import SensorZone from './sensor/SensorZone'; +import 'mapbox-gl/dist/mapbox-gl.css'; +import mapboxgl from 'mapbox-gl'; -mapboxgl.accessToken = MAPBOX_TOKEN; +// mapboxgl.accessToken = MAPBOX_TOKEN; export default function MapBoxTest() { + // const mapContainer = useRef(null); + // const map = useRef(null); + // useEffect(() => { + // if (map.current) return; + // map.current = new mapboxgl.Map({ + // container: mapContainer.current, + // style: 'mapbox://styles/mapbox/streets-v12', + // center: [126.793722, 37.558522], + // zoom: 9 + // }); + // }); + + // return ( + //
+ //
+ //
+ // ); + const dispatch = useDispatch(); + const naver = window.naver; + + const [mapObject, setMapObject] = useState(null); + const [arrPolyline, setArrPolyline] = useState([]); + + const [poly, setPoly] = useState([]); const mapContainer = useRef(null); - const map = useRef(null); + + const airPort = [ + { + title: '김포공항', + buffer: 9300, + center: new naver.maps.LatLng(37.558522, 126.793722), + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '인천공항', + buffer: 9300, + center: new naver.maps.LatLng(37.4588105, 126.4409428), + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '제주공항', + buffer: 9300, + center: new naver.maps.LatLng(33.506848, 126.4930205), + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + }, + { + title: '정석비행장', + buffer: 9300, + center: new naver.maps.LatLng(33.3943517, 126.7142598), + reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5] + } + ]; + + const uamPosition = [ + { + name: 'V1', + lat: 37.4797865, + lon: 126.540668 + }, + { + name: 'V2', + + lat: 37.521245, + lon: 126.6107763 + }, + { + name: 'V3', + lat: 37.5642352, + lon: 126.6243464 + }, + { + name: 'V4', + lat: 37.3658236, + lon: 126.6650669 + }, + { + name: 'V5', + lat: 37.4520753, + lon: 126.7074861 + }, + { + name: 'R1', + lat: 37.492581, + lon: 126.5801572 + }, + { + name: 'R2', + lat: 37.542031, + lon: 126.6036588 + }, + { + name: 'R3', + lat: 37.5764269, + lon: 126.6005224 + }, + { + name: 'R4', + lat: 37.5790407, + lon: 126.6600404 + }, + { + name: 'R5', + lat: 37.524016, + lon: 126.649562 + }, + { + name: 'R6', + lat: 37.5506488, + lon: 126.693722 + }, + { + name: 'R7', + lat: 37.4712333, + lon: 126.6023981 + }, + { + name: 'R8', + lat: 37.4046495, + lon: 126.6202759 + }, + { + name: 'R9', + lat: 37.3450207, + lon: 126.6296542 + } + ]; + + let features = geoJson.features; + + useEffect(() => { + NaverMapInit(); + + // const map = new mapboxgl.Map({ + // container: mapContainer.current, + // style: 'mapbox://styles/mapbox/streets-v11', + // center: [-74.5, 40], + // zoom: 9 + // }); + airPort?.map(air => polyArea(air)); + }, []); + useEffect(() => { - if (map.current) return; - map.current = new mapboxgl.Map({ - container: mapContainer.current, - style: 'mapbox://styles/mapbox/streets-v12', - center: [126.793722, 37.558522], - zoom: 9 + uamPosition.map(uam => { + const name = uam.name; + const position = new naver.maps.LatLng(uam.lat, uam.lon); + + const cont = + name.substr(0, 1) == 'R' + ? [ + '
', + `${name}`, + '
' + ] + : [ + '
', + `${name}`, + '
' + ]; + + const marker = new naver.maps.Marker({ + position: position, + map: mapObject, + icon: { + content: cont.join(''), + anchor: new naver.maps.Point(20, 20) + } + }); + }); + }, [mapObject]); + let popup; + const NaverMapInit = () => { + mapboxgl.accessToken = MAPBOX_TOKEN; + // const mapOptions = { + // center: new naver.maps.LatLng(37.520357, 126.610166), + // // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + // // zoom: 10, + // zoom: 14, + // zoomControl: true, + // mapTypeId: naver.maps.MapTypeId.NORMAR, + // zoomControlOptions: { + // position: naver.maps.Position.TOP_LEFT, + + // style: naver.maps.ZoomControlStyle.SMALL + // } + // }; + const map = new mapboxgl.Map({ + container: 'map', // container ID + style: 'mapbox://styles/mapbox/streets-v12', // style URL + center: [127.85101412107547, 37.520357], // starting position [lng, lat] + zoom: 10 // starting zoom + }); + setMapObject(map); + + map.on('load', () => { + const layers = map.getStyle().layers; + map.setLayoutProperty('country-label', 'text-field', ['get', `name_kr`]); + const labelLayerId = layers.find( + layer => layer.type === 'symbol' && layer.layout['text-field'] + ).id; + map.addSource('mapbox-dem', { + type: 'raster-dem', + url: 'mapbox://mapbox.mapbox-terrain-dem-v1', + tileSize: 512, + maxZoom: 16 + }); + map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); + map.addSource('maine', { + type: 'geojson', + data: { + ...geoJson + } + }); + map.addLayer({ + id: 'maine', + type: 'fill', + source: 'maine', // reference the data source + layout: {}, + paint: { + 'fill-color': '#0080ff', // blue color fill + 'fill-opacity': 0.5 + } + }); + map.addLayer({ + id: 'sky', + type: 'sky', + paint: { + 'sky-type': 'atmosphere', + 'sky-atmosphere-sun': [0.0, 90.0], + 'sky-atmosphere-sun-intensity': 15 + } + }); + map.addLayer( + { + id: 'add-3d-buildings', + source: 'composite', + 'source-layer': 'building', + filter: ['==', 'extrude', 'true'], + type: 'fill-extrusion', + minzoom: 15, + paint: { + 'fill-extrusion-color': '#aaa', + + // Use an 'interpolate' expression to + // add a smooth transition effect to + // the buildings as the user zooms in. + 'fill-extrusion-height': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'height'] + ], + 'fill-extrusion-base': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'min_height'] + ], + 'fill-extrusion-opacity': 0.6 + } + }, + labelLayerId + ); + }); + map.on('mouseenter', 'maine', e => { + const feature = e.features[0]; + const properties = feature.properties; + + // Remove the existing popup if it exists + if (popup) { + popup.remove(); + } + + // Create a new popup with the feature's properties + popup = new mapboxgl.Popup() + .setLngLat(e.lngLat) + .setHTML( + Object.entries(properties) + .map(([key, value]) => `${key}: ${value}`) + .join('
') + ) + .addTo(map); }); - }); + + map.on('mouseleave', 'maine', () => { + if (popup) { + popup.remove(); + } + }); + }; + + const createUamArea = uam => { + const title = uam.title; + const position = new naver.maps.LatLng(uam.lat, uam.lon); + + const circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: position, + // map: mapObject, + radius: 100, + clickable: true + }); + + // circle.setMap(mapObject); + }; + + const handleHistoryInit = line => { + setArrPolyline([...arrPolyline, line]); + }; + + const polyArea = air => { + //격자 공역 + const polyArr = []; + const radius = air.buffer; + const position = air.center; + 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; + reduce = air.reduce[j]; + + // 2km reduce + // [218.6, 905.4, 2195, 4560.2] + + if (angle % 180 == 0) { + const polyEW = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 90, + radius - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 270, + 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, + radius - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 180, + 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, radius), + new naver.maps.EPSG3857.getDestinationCoord(position, 180, 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, radius), + new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: props.map + }); + polyArr.push(EW); + + setPoly(m => [...m, polyArr]); + }; return ( -
+ <>
-
+ style={{ width: '100%', height: '100vh' }} + >
+ {mapObject != null ? ( + <> + + + {/* + + + */} + + {/* */} + {/* */} + + {/* + + */} + {/* */} + {/* */} + + ) : null} + + {/* */} + ); }