반응형 JavaScript33 [지도API] Leaflet, 기준 좌표의 반경 polygon 생성 해당 게시물에서는 지도 API인 Leaflet을 활용하여, 기준 중심좌표로부터 일정한 반경으로 둘러싸는 사각형을 그리는 방법에 대해 정리해보았다. 목차 결과 예시간단하게 codePen을 활용하여 표출을 진행해보았다. See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen.">See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen. html코드와 css코드는 특별한 구간이 없기 때문에 javascript 코드를 첨부해보았다(가독성과 추가 설명을 위해 일부 첨삭함)var domainAddr = 'https://tiles.osm.kr'; //map layer 도메인con.. 2025. 1. 10. [차트API] highcharts wind barb(바람 깃) 그리기 해당 포스팅에서는 상단 이미지 예시와 같이, 풍속 값을 기반으로 하여 바람 깃 자료를 svg형태로 그려내고 풍향 값을 참고하여 해당 svg를 회전시켜 wind barb를 highcharts 내 표출하는 방법에 대해 다루었다. 목차는 다음과 같이 하였다.1. wind barb 정의 1) 바람 깃 svg 처리 메서드 2) svg 적용 메서드 3) 로드 예시2. highchart 표출3. 구현 예시 1. wind barb 정의바람 깃 생성을 위해 연관 작업을 처리하는 메서드를 3개로 나누어 작업하였다. 아래 목록화 된 목차 제목이 각 메서드 대한 내용이며, 연계처리하여 load메서드 실행->바람 깃 생성->바람 깃 svg 생성 순으로 호출되도록 하였다. 즉, 차트 객체 정의 혹은 차트 생성 시, .. 2024. 11. 25. [JS] 타임 슬라이더 구현(자동 스크롤) 해당 게시물은 위 예시 이미지 설명에서 언급한 바와 같이, 타임슬라이더를 생성하고 '이전', '다음' 버튼을 통해 슬라이더를 컨트롤 하는 기능을 생성함과 더불어 해당 기능 동작 시, active상태의 요소가 사용자에게 보여지는 부모요소 사이즈 내에 항상 표출될 수 있도록 자동 스크롤 기능을 덧붙이는 코드에 대한 예시에 대한 정리 글이다. 구현을 위한 코드 예시는 아래와 같다. See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen.">See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen. 위 예시 코드를 직접 동작해보면 알 수 있다 시피, '이전', '다음' 버.. 2024. 11. 25. [지도 API] leaflet 해당 게시글은 leaflet이라는 지도 라이브러리를 활용하여, 지도에 특정 도형 레이어를 생성하는 모듈에 대한 내용을 정리한 글이다. 목차는 다음과 같다.1. 지도 객체 생성2. 값 변환에 따른 polygon 컨트롤 표출 결과를 먼저 하단에 첨부하였다. See the Pen leaflet by HamJeong (@HamJeong) on CodePen.">See the Pen leaflet by HamJeong (@HamJeong) on CodePen. 1. 지도 객체 생성지도 생성을 위해 필요한 leaflet라이브러리(js, css)와 간편한 요소 조작을 위한 jquery라이브러리를 참조한 후, 값 변경에 필요한 select요소와 지도를 생성할 div 요소를 추가한 html코드 및 스타일 시트 .. 2024. 11. 22. [zoomer.js] 이미지 확대 축소 라이브러리 활용 해당 게시글은 JQuery라이브러리인 zoomer.js를 활용하여 이미지 요소의 확대 축소 기능을 구현하는 내용에 대해 정리하였다. 목차는 아래와 같다.1. 정적소스 참조2. 구현3. 한계점 1. 정적소스 참조라이브러리 사용을 위해 필요한 정적소스를 참조해야한다(CDN 방식) 본인의 경우, 인터넷망이 연결된 환경이 아니기 때문에 직접 파일을 다운로드하여 세개의 필수 파일을 프로젝트 내 추가하여 참조하였다. 버전 관리로 인한 이슈 방지를 위해서는 가급적 아래 공식 링크를 참조하여 파일 다운로드 및 CDN 방식으로 필요 파일을 로드하는 것을 추천한다.https://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html Smooth I.. 2024. 11. 21. [JS] 부등식 검증 함수 javascript에서 "0>1"등의 형식과 같은 문자열로 된 부등식의 결과가 올바른지, 아닌지 판별하기 위해 eval()함수를 사용할 수 있다. 하지만 어딜 찾아봐도 해당 함수는 보안상의 위험이 있으니 사용을 지양하라고 한다. 해당 함수를 대체하기 위해 동일한 결과를 제공하는 함수를 하단에 공유한다.function evaluateInequality(inequalityString) { // 정규 표현식을 사용하여 부등식 패턴을 추출 const regex = /^([-+]?\d+(\.\d*)?)\s*([]=?)\s*([-+]?\d+(\.\d*)?)$/; const match = inequalityString.match(regex); if (!match) { throw ne.. 2024. 7. 4. 이전 1 2 3 4 ··· 6 다음 반응형
