[Angular] 문자열 표시 파이프(V2)
typescript, angular
문자열 표시 파이프
//--------------------------------------
// 문자열 표시 파이프
//--------------------------------------
/**
* 문자열 형식 표시
* options {
* replace: %s를 문자열로 변환하여 표시,
* pre: 문자열 앞에 표시
* post: 문자열 뒤에 표시
* limit: 지정한 길이만큼 표시
* }
* 사용법)
* {{ null | string : { post: '년' } }} => null
* {{ '2021' | string : { post: '년' } }} => '2021년'
* {{ '2021' | string : { replace: '(%s년 리모델링)' } }} => '(2021년 리모델링)'
* {{ 25 | string : { replace: '(지상 %s층)' } }} {{ 8 | string : { replace: ' / 지하 %s층' } }} => '지상 25층 / 지하 8층'
* {{ 25 | string : { replace: '(지상 %s층)' } }} {{ null | string : { replace: ' / 지하 %s층' } }} => '지상 25층'
*/
@Pipe({ name: 'string' })
export class StringPipe implements PipeTransform {
transform(value: number | string, options?: { replace: string, pre: string, post: string, limit: number }): string {
if (value) {
let result: string = null;
if (options?.replace) {
result = options?.replace.replace('%s', ''+ value);
} else {
result = ((options?.pre) ? options?.pre : '') + value + ((options?.post) ? options?.post : '');
}
if (options.limit && result.length > options.limit) {
result = result.slice(0, options.limit) +'...';
}
return result;
} else {
return null;
}
}
}
'Angular' 카테고리의 다른 글
[Angular] 동적 파이프(Dynamic Pipe) (0) | 2023.03.02 |
---|---|
[Angular] 테이블 tr 태그에 포커스 (0) | 2021.10.22 |
[Angular] 숫자형식 표시 파이프(v3) (0) | 2021.05.20 |
Angular 5 이미지 Base64 문자열 변환(primeng fileupload 컴포넌트 사용) (0) | 2018.08.24 |
List 다중 컬럼 정렬
List 에 대하여 다중 컬럼 정렬을 하고자 할 때
//
export class Test {
String name;
Integer age;
Integer score;
}
List list = ...;
// 점수순으로 정렬
list.sort( (a, b) -> a.getScore().compareTo(b.getScore()) );
// 점수순, 나이순으로 정렬
Collections.sort(list, Comparator.comparing(Test::getScore)
.thenComparing(Test::getAge));
//
출처
https://stackoverflow.com/questions/4258700/collections-sort-with-multiple-fields
내림차순(역순) 정렬
public class TempDTO {
private Integer order;
private String name;
...
}
list.sort(Comparator.comparing(TempDTO::getOrder, Comparator.reverseOrder()));
'Java' 카테고리의 다른 글
[POI 3.17] 이름 정의 및 데이터 유효성 검사 추가(드롭다운 구현) (0) | 2021.11.05 |
---|---|
날짜 관련 유틸리티 (0) | 2018.10.23 |
JDK 8 인스톨 없이 설치하기 (0) | 2018.10.20 |
사진 이미지 크기 변경 후 Base64 문자열 변환 (0) | 2018.04.26 |
POI, Excel 셀 생성 (0) | 2015.06.30 |
[Angular] 숫자형식 표시 파이프(v3)
typescript, angular
숫자 데이터가 0인 경우 -로 표시하기 위해 기존 number 파이프 대신 제작
/** * 숫자형식 표시 * 데이터가 0인 경우 - 로 표시 * options { * digits: 소수점 이하 표시할 자릿수, * unit: 값 뒤에 표시할 단위명, * text: 값이 null 일 때 표시할 텍스트, * } * 사용법) * {{ 0 | number0 }} => - * {{ null | number0 }} => null * {{ null | number0 : { text: '별도표시' } }} => '별도표시' * {{ 1234.12345 | number0 : { digits: 2, unit: '원' } }} => 1234.12원 * {{ 1234.12 | number0 : { replace: '(%s㎡)' } }} => '(1,234.12㎡)' */ @Pipe({ name: 'number0' }) export class NumberZero implements PipeTransform { transform(value: number | string, options?: { digits: number, unit: string, text: string, replace: string }): string { if (value != null) { let num = null; if (typeof(value) === 'string') { num = Number(value); if (isNaN(num)) { return null; } } else { num = value; if (isNaN(num)) { return null; } } if (num === 0) { return '-'; } else { if (options?.replace) { return options?.replace.replace('%s', trunc(num, options?.digits)); } else { return trunc(num, options?.digits) + ((options?.unit) ? options?.unit : ''); } } } else { return (options?.text) ? options?.text : null; } } } function trunc(number, digits) { const n = number + ''; const pos = n.lastIndexOf('.'); if (pos > -1) { if (digits == null) { digits = n.length - (pos + 1); } return parseFloat(n.substr(0, pos + digits + 1)).toLocaleString('en', { minimumFractionDigits: digits }); } else { if (digits == null) { digits = 0; } return number.toLocaleString('en', { minimumFractionDigits: digits }); } }
'Angular' 카테고리의 다른 글
[Angular] 동적 파이프(Dynamic Pipe) (0) | 2023.03.02 |
---|---|
[Angular] 테이블 tr 태그에 포커스 (0) | 2021.10.22 |
[Angular] 문자열 표시 파이프(V2) (0) | 2021.05.24 |
Angular 5 이미지 Base64 문자열 변환(primeng fileupload 컴포넌트 사용) (0) | 2018.08.24 |
[Typescript] 2개의 좌표(경도, 위도)로 거리 계산
경도, 위도 2개의 좌표로 사이의 거리 계산
//------------------------------------------ // 경도, 위도 2개의 좌표로 사이의 거리 계산 //------------------------------------------ getDistince(lng1: number, lat1: number, lng2: number, lat2: number, useKm?: boolean) { if ((lng1 == lng2) && (lat1 == lat2)) { return 0; } else { const theta = lng1 - lng2; let dist = Math.sin(this.deg2rad(lat1)) * Math.sin(this.deg2rad(lat2)) + Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * Math.cos(this.deg2rad(theta)); dist = Math.acos(dist); dist = this.rad2deg(dist); dist = dist * 60 * 1.1515; if (useKm) { dist = dist * 1.609344; } else { dist = dist * 1609.344; } return dist; } } deg2rad(deg: number) { return deg * Math.PI / 180.0; } rad2deg(rad: number) { return rad * 180 / Math.PI; }
출처
'기타' 카테고리의 다른 글
[네이버 지도] 행정구역 표시(오픈API 이용) (0) | 2021.05.12 |
---|---|
[CSS] 버튼 클릭 시 테두리 및 효과 삭제 (0) | 2021.04.13 |
[네이버 지도] 마커 표시 변경 (0) | 2021.01.29 |
[네이버 지도] 마커 클러스터링 (0) | 2021.01.14 |
[네이버 지도] 사용자 정의 오버레이 (0) | 2021.01.13 |
[네이버 지도] 행정구역 표시(오픈API 이용)
이전에 작성했던 행정구역 표시 방법은
shp 파일을 이용하여 자신의 서버에 geojson 데이터를 올려두고
사용하고자 할 때 유용했지만 아래와 같은 단점이 있었다.
1. shp -> geojson 변환과정이 복잡
2. simplify 과정에서 맞닿아 있는 경계구역의 모양이 서로 맞지 않는 문제
3. 경계구역이 변경될 경우 유지보수 문제
이러한 문제점을 해결할 수 있는 오픈API가 있어서 소개한다.
공간정보 오픈플랫폼 오픈API 사용
1. 회원가입 > 인증키 발급 > 이메일 인증
2. API 인증키 발급
회원가입 후 인증키 관리 메뉴에서 발급가능
https://www.vworld.kr/dev/v4dv_apikey_s002.do
3. 오픈API > 데이터 API 레퍼런스
https://www.vworld.kr/dev/v4dv_2ddataguide2_s001.do
분류를 '경계' 조회 -> 광역시도, 시군구, 읍면동, 리
광역시도
https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adsido
시군구
https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adsigg
읍면동
https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=ademd
리
https://dev.vworld.kr/dev/v4dv_2ddataguide2_s002.do?svcIde=adri
경계구역 - 서울특별시 중구 태평로1가
(주의사항)
geojson 데이터에 bbox 값이 있을 경우
map.data.addGeoJson() 메소드 호출할 때 해당 위치로 자동 이동한다.
지도의 자동 이동을 원하지 않는다면 bbox 값을 삭제
'기타' 카테고리의 다른 글
[Typescript] 2개의 좌표(경도, 위도)로 거리 계산 (0) | 2021.05.14 |
---|---|
[CSS] 버튼 클릭 시 테두리 및 효과 삭제 (0) | 2021.04.13 |
[네이버 지도] 마커 표시 변경 (0) | 2021.01.29 |
[네이버 지도] 마커 클러스터링 (0) | 2021.01.14 |
[네이버 지도] 사용자 정의 오버레이 (0) | 2021.01.13 |