반응형 JavaScript33 [지도API] Open Layers_2 해당 게시글은 예시를 통해 무료 지도 API인 Open Layers의 이벤트 처리, 오버레이어(지도 위의 별개 요소) 생성에 대한 내용을 정리하였다. 목차는 다음과 같다.1. 이벤트 처리2. 오버레이어 1) 오버레이어 생성 2) 오버레이어 삭제(닫기)* polygon Layer 삭제* marker 삭제 목차의 내용 이외에 레이어의 추가(polygon 생성 등)와 같은 별도 내용에 대한 설명이 필요하다면 이전 게시글을 통해 해당 내용을 확인할 수 있다. 1. 이벤트 처리레이어의 클릭이나, hover 등 open layer에 대한 이벤트를 설정하기 위한 로직은 아래와 같다.지도객체.on('이벤트', function(evt) { var map=지도객체; var feature = map.forEach.. 2022. 11. 21. Object_value로 key 참조하기 object = {key: value, key: value} Object를 활용하여 작업을 할때, 일반적으로 key값을 통해 value에 접근할 수 있게 된다. 그 방법은 아래와 같다. 허나 작업을 진행하다보면 가끔 value를 통해 key에 접근해야하는 경우가 발생하기도 한다. (그럴 일 없을 줄 알았음 ^^ 데이터가 얽혀있다보니 그런 것 같음..) 아래와 같은 함수를 동작하여 key에 접근 할 수 있었다. //object의 value로 key 참조 가능 function getKeyByValue(object, value) { return Object.keys(object).find(key => object[key] === value); } 위 함수를 통해 전달받은 key를 ajax로 전송해보았다. se.. 2022. 9. 23. AJAX로 json데이터 넘겨받기 기상청에서 제공하는 날씨누리서비스를 참고하여, 사용자가 특정 해구를 선택한 후 "검색"버튼 클릭시 해역예보 하단에 작성된 테이블의 내용이 비동기적으로 수정될 수 있도록 하는 작업을 진행해보았다. 비동기 처리를 진행하며 발생한 이슈를 순서대로 정리해보았으며, 목차는 다음과 같이 하였다. 1. ajax로 json데이터 받기 2. ajax 한글 인코딩 이슈 해결 3. 최종 작성된 코드 1. ajax로 json데이터 받기 ajax는 학원에서 프로젝트를 진행하며 두어번 해 본 경험이 전부였지만, id중복 확인 기능과 좋아요버튼 기능을 구현하면서 학습한 내용이 있기에 적절히 응용한다면 수월히 진행될 것이라는 판단으로, 위의 검색기능을 비동기 로직이 실행될 수 있도록 작업하였다. 검색 이벤트마다 일일예보에 대한 내용.. 2022. 8. 4. [그래프 API] HighCharts 웹 화면에 그래프를 활용하여 데이터를 표출할 목적으로 API를 탐색하다 하이차트를 접하게 되었다. 나중에 알고보니 보편적으로 많이 사용되고 있는 API라고 한다. 사업용으로 사용하지 않는다면 무료 이용이지만, 반대로 사업용으로 활용할 목적이라면 어느정도의 비용을 지불해야한다고 하니 유의해두는 것이 좋다. 아래의 링크를 통해 API활용에 대한 내용을 파악할 수 있다. https://www.highcharts.com/ Interactive javascript charts libraryWe make it easy for developers to create charts for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, ... 2022. 7. 7. [지도 API] OpenLayers_1 업무를 진행하면서 새로운 지도 API를 다루어보게 되었다. 검색시 본인이 활용하고 싶은 부분에 대한 자료가 부족하다고 느껴서 어려움을 느꼈다. API에 관한 설명 또한 영어라서...후에 또 다시 활용하게 되었을때 코딩 시간을 단축하기 위해 새로이 알게 된 부분을 정리할 목적으로 게시글을 작성한다. 참고로 해당 게시글은 교재와 같이 정확한 개념, 설명이 아니라 그저 본인의 쉬운 이해를 위한 정리본으로 100% 정확한 개념을 파악하고 싶다면 다른 게시글이나 아래에 첨부하게 될 링크에서 직접 읽고 파악하는 것이 더 도움이 될 것이라고 생각한다. 목차는 아래와 같다.1. 지도 표출 1) view 객체 2) control 객체 3) Layer 객체 4) map객체2. 지도 위 도형삽입3. 지도.. 2022. 7. 6. 타임슬라이더 구현 input range를 활용하여 time slider를 구현하게 되어, 그에 대한 코드들을 아래 정리해보았다 Edge, chorme에서는 정상 작동 되었으나, IE에서는 일부 JS코드와 스타일이 비정상 작동하여, 추후 동기화 되도록 작업 후 코드와 게시글을 수정하였다. 작업 단계는 아래와 같이 분류하였다. 1. 레이아웃 2. range 눈금 설정 3. 조작버튼 4. tooltip 생성 5. 이벤트 1. 레이아웃 우선 조작을 위한 버튼과 input을 배치할 위치를 정하고, 그에 대한 레이아웃을 먼저 정의하였다. 가급적 내용은 생략하고 어떤 요소들을 가질 것이며 누구의 자식요소로 배치할지를 먼저 작성하였다. 구현 완료된 jsp페이지의 코드를 첨부하자면 아래와 같다. 각 목차별로 뜯어가며 자세히 설명해 볼 예.. 2022. 6. 24. 이전 1 2 3 4 5 6 다음 반응형
