쉱이
728x90
반응형
article thumbnail
[ToastUI] basic 그리드 보여주기
Library/ToastUI 2023. 2. 14. 18:02

사이트 https://nhn.github.io/tui.grid/latest/ https://nhn.github.io/tui.grid/latest/ 🚩 Table of Contents Collect statistics on the use of open source TOAST UI Grid applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Grid is used throughout the world. It also serves as i nhn.github.io 개발코드 1. 필요한 Script 추가하기 tui- grid의 grid css와 gri..

article thumbnail
[ToastUI] Column-chart 보여주기
Library/ToastUI 2023. 2. 14. 18:01

사이트 https://ui.toast.com/ TOAST UI :: Make Your Web Delicious! TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud. ui.toast.com 개발코드 1. 필요한 Script 추가하기 tui- grid의 css와 js를 추가하고 사용할 js의 script를 추가해줍니다. 2. body에 추가하기(파일 올리기) 저는 DB에서 정보를 꺼내는 것이 아닌 엑셀(파일)에서 값을 불러와 chart를 만들기에 위와 같은 작업을 합니다. input file, onchange를 통하여 js 함수를 불러옵니다. 3. body에서 넘긴 값 받기 엑셀이 올라가면(8번쨰) , 그 해당 파일(엑셀)을 읽..

article thumbnail
[OpenLayers] 마우스 좌표 찍기
Library/OpenLayers 2023. 2. 14. 10:27

이전 관련 게시글 2023.02.13 - [eclipse/OpenLayers] - [OpenLayers] 맵 마커 띄우기(point, polygon) 2023.02.13 - [eclipse/OpenLayers] - [OpenLayers] 맵 마커 삭제(point, polygon) 2023.01.27 - [eclipse/OpenLayers] - [openlayers] 지도 맵 띄우기 결과 화면 개발 코드 1. div 설정하기 div영역을 선언하여 coordi를 선정합니다. 2. js에서 div의 id를 변수에 담아 선언합니다. 3번째 줄처럼 coordi를 변수를 만들어 선언합니다. 3. 좌표값을 반환할 수 있도록, MousePosition 객체를 선언합니다. 좌표 값을 변환하기 위해 위에 처럼 선언합니다...

article thumbnail
[OpenLayers] 맵 마커 삭제(point, polygon)
Library/OpenLayers 2023. 2. 13. 11:58

이전 관련 게시글 2023.01.27 - [eclipse/OpenLayers] - [openlayers] 지도 맵 띄우기 2023.02.13 - [eclipse/OpenLayers] - [OpenLayers] 맵 마커 띄우기(point, polygon) 맵에 띄어진 feature들을 삭제합니다. 만들어진 feature을 눌렀을 때 alert창이 띄워지고 삭제하는 방법입니다. 결과 화면 개발 코드 1. Feature 선택할 수 있도록 선언 삭제를 하기 위해서는 feature를 선택해야합니다. 선택을 위해 먼저 intercation.Select를 선언합니다. 2. 객체 선택 및 탐지 63줄 : map위에서 pointerMove 이벤트가 발생할 때, 64줄 : 선택된 객체의 속성을 가져옴 더보기 순서 1. m..

article thumbnail
[OpenLayers] 맵 마커 띄우기(point, polygon)
Library/OpenLayers 2023. 2. 13. 11:52

이전 관련 게시글 2023.01.27 - [eclipse/OpenLayers] - [openlayers] 지도 맵 띄우기 결과 화면 멥 마커 띄우기 입니다. 개발 코드 1. jsp 에서 마커 지정할 수 있도록 옵션 설정 표시 모양을 정하기 위해 form을 이용하여 option을 선택합니다. 2. js에서 select id를 변수에 담기 사용자가 point이든 polygon이든 선택하면, js로 넘겨져 해당 옵션의 feature를 생성할 수 있도록 합니다. select id 인 type을 js에서 사용할 수 있도록 typeSelect라는 변수에 담아 사용하겠습니다. 3. marker 및 vector 설정 source와 vector를 선언하여 레이어 위에 feature를 생성할 수 있도록 선언합니다. 4. ..

article thumbnail
[openlayers] 지도 맵 띄우기
Library/OpenLayers 2023. 1. 27. 10:54

사이트 https://openlayers.org/ OpenLayers - Welcome A high-performance, feature-packed library for all your mapping needs. openlayers.org https://www.vworld.kr/v4po_main.do 공간정보 오픈플랫폼 국가가 보유하고 있는 공개 가능한 공간정보를 모든 국민이 자유롭게 활용할 수 있도록 다양한 방법을 제공합니다. www.vworld.kr 먼저 vWorld에서 인증키를 받고, OpenLayers를 이용하여 맵 띄우기를 진행합니다. CDN방식 Content Delivery Network의 약자인 CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 ..

728x90
반응형