프로그래밍/Frontend

먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 저는 윈도우라서 Windows Installer를 클릭하여 다운로드받아 설치했습니다. 설치가 완료되면 시작줄에서 Node라고 검색하여 Node.js command prompt 터미널 앱을 열어주세요. 터미널이 열리면 이제 react 프로젝트를 생성해봅니다. 프로젝트를 생성하는 ..

프로그래밍/Frontend

저의 경우 openlayers로 지도를 만들어서 그 위에 격자모양의 폴리곤을 추가했는데요. 이 격자모양을 클릭하고 나면 기본 클릭스타일(?)이 생기더라고요. 클릭을 해제했을 때 나타나는 스타일입니다. 오픈레이어스에서 자동으로 설정해놓은 기본클릭스타일...?인 것 같아요. 이 스타일은 레이어를 삭제(map.removeLayer)해도 지도 위에 남아있는 버그가 생기더라고요. 아래는 레이어를 삭제했을 때 남아있는 모습입니다. 지도 아무데나 클릭하면 사라지기는 하지만... 레이어를 삭제했을때 같이 삭제되도록 만들어보겠습니다. 레이어를 지도에 추가할 때, 레이어의 select interlection도 함께 추가해줍니다. // 레이어 추가 map.addLayer(vectorLayer); // select 인터렉션 ..

프로그래밍/Frontend

openlayers의 기본 지도 타일맵(배경지도)은 OpenStreetMap(OSM)인데요. 이 배경지도를 카카오나 네이버, 구글, 브이월드 타일로 변경해보려고 합니다. 1. vworld 배경 지도 사용하기 vworld에는 2D (일반, 위성, 하이브리드), 3D지도가 있습니다. 2D 지도 타일 요청방법에 대해서는 vworld 오픈API에서 확인할 수 있습니다. https://www.vworld.kr/dev/v4dv_wmtsguide_s001.do 브이월드 오픈API WMTS/TMS API 레퍼런스 WMTS/TMS API 레퍼런스입니다. --> WMTS 레퍼런스 WMTS 레퍼런스 TMS 레퍼런스 WMTS 레퍼런스 TMS 레퍼런스 소개 WMTS(Web Map Tile Service) 및 TMS(Tile M..

프로그래밍/Frontend

먼저 datatables cdn들을 임포트합니다. 자세한 다운로드 / cdn 임포트 방법은 아래 홈페이지를 참고하세요. https://datatables.net/download/ Download Download Compatibility A detailed compatibility table shows the browser's that DataTables supports and also which features of the extensions can be used with the other extensions. A few features may not always be fully compatible with every other aspect of datatables.net html에 동적으로 생성할 빈 ..

프로그래밍/Frontend

저의 경우, 오픈레이어스(openlayers)에서 이미지를 불러와 레이어를 만들어야 했습니다. 이미지를 출력해주는 WMS API에서 이미지와 함께 응답헤더에 특정 값들을 함께 전달해주고 있었어요. 오픈레이어스에서 이미지를 레이어로 만드려면, 아래와 같이 layer.Image(ImageStatic)을 사용하면되는데, layer.Image는 응답헤더를 출력하는 기능을 제공하고 있지 않습니다. var imageLayer = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: '이미지API URL', crossOrigin: '', imageExtent: bounds, projection: 'EPSG:5179' });, }); 따라서, 이미지와 응답헤더를..

프로그래밍/Frontend

mapboxGL에서 사용하는 타일에 언어를 변경하는 기능이 있습니다. 언어변경이 가능한 타일은 아래와 같습니다.! mapbox://styles/mapbox/streets-v11 mapbox://styles/mapbox/outdoors-v11 mapbox://styles/mapbox/dark-v10 mapbox://styles/mapbox/light-v10 mapbox://styles/mapbox/satellite-streets-v9 mapbox://styles/mapbox/traffic-day-v2 mapbox://styles/mapbox/traffic-night-v2 https://github.com/mapbox/mapbox-gl-language GitHub - mapbox/mapbox-gl-langu..

프로그래밍/Frontend

vworld 로그인 후 인증키를 발급받습니다. https://www.vworld.kr/dev/v4dv_apikey_s001.do 공간정보 오픈플랫폼 www.vworld.kr 서비스URL는 localhost:8080 로 작성해주세요 (추후 불러올때 이 URL이 사용됨) 그리고 브이월드 활용 API 목록중에 3D 지도 API를 선택해주세요. 나머지 필수작성사항들도 모두 작성한 후 인증키를 발급받습니다. 발급받은 인증키는 인증키 관리 페이지에서 조회할 수 있습니다. 그럼 이제 브이월드의 3D 지도를 사용할 수 있습니다. 자세한 사용방법은 아래 링크에서 레퍼런스와 코드샘플들을 참고하면 됩니다. https://www.vworld.kr/dev/v4dv_opnws3dmap2guide_s001.do 공간정보 오픈플랫폼..

프로그래밍/Frontend

html, css로 타이핑 효과, 커서 애니메이션 효과 주는 방법 입니다 ! |

프로그래밍/Frontend

지도위에 국가공간정보포털 건물파일을 고대로 올렸더니 속도면에서 매우 좋지 않아서 건물데이터를 벡터형식으로 만들어 MapboxGL에 올려보았습니다. 마치 건물데이터를 배경으로 인식하여 아주 빠르게 돌아가더라구요. 건물데이터는 국가공간정보포털의 서울특별시 건물파일을 사용했습니다. ▼ 국가공간정보포털 (2023년 8월부터는 브이월드(vworld.kr) 로 통합된다고 하네요.) http://openapi.nsdi.go.kr/nsdi/eios/ServiceDetail.do?svcSe=F&svcId=F010 국가공간정보포털 openapi.nsdi.go.kr 서울특별시의 현재기준 가장 최신데이터로, 2023-03-06 GIS건물통합정보 SHP파일을 다운로드 받았습니다. 이 건물데이터를 벡터타일로 생성하려면 SHP파일..