turkey map react 다운로드 - turkey map react 소스 코드 다운로드

turkey map react

기타 소스코드

v1.2.2

다운로드

대화형 터키 지도 반응 구성 요소

즉시 사용 가능한 터키 도시 지도입니다.

라이브 데모: https://turkey-map-react-demo.netlify.app/

설치

 npm install turkey - map - react

또는

 yarn add turkey - map - react

용법

가져오기(ES6)

 import TurkeyMap from 'turkey-map-react' ;

기본값을 사용한 기본 사용법

 < TurkeyMap / >

이벤트 처리

클릭 시 예:

 < TurkeyMap onClick = { ( { plateNumber , name } ) => console . log ( plateNumber + " - " + name + " is just clicked!" ) } / >

예를 들면 마우스 오버 시:

 < TurkeyMap 
    hoverable = { true }
    onHover = { ( { plateNumber , name } ) => console . log ( "Cursor is over on " + plateNumber + " - " + name + "!" ) } 
/ >

도시 구성 요소 포장

 const renderCity = ( cityComponent , cityData ) => ( 
  < Tooltip title = { cityData . name } key = { cityData . id } > 
      { cityComponent } 
  < / Tooltip >
) ;

< TurkeyMap cityWrapper = { renderCity } / >

이는 일반적으로 Antd 스타일의 Tooltip 에 사용됩니다.

" child " 매개변수는 도시 DOM입니다.

맞춤 데이터

 < TurkeyMap data = { this . state . apiData } / >

사용자 정의 SVG 경로 및/또는 도시 메타데이터를 렌더링해야 하는 경우 데이터 속성을 통해 제공할 수 있습니다.

데이터 속성은 다음 유형이어야 합니다.

 CityType [ ]

다시 말해서 :

 { id : string , plateNumber : number , name : string , path : string } [ ]

API

유형

유형	설명
도시 유형	{ ID : 문자열 , 번호판 번호 : 번호 , 이름 : 문자열 , 경로 : 문자열 }
뷰박스 유형	{ 위쪽 : 숫자 , 왼쪽 : 숫자 , 너비 : 숫자 , 높이 : 숫자 }
사용자 정의 스타일 유형	{ 유휴 색상 : 문자열 , hoverColor : 문자열 }

소품

재산	설명	유형	기본	부터
뷰박스	지도(svg) 레이아웃의 위치 및 치수 정보	뷰박스 유형	{ 위쪽 : 0 , 왼쪽 : 80 , 너비 : 1050 , 높이 : 585 }	1.0.0
보이는	구성요소의 가시성을 정의합니다.	불리언	진실	1.0.0
공중에 떠 있을 수 있는	onHover 이벤트 가용성을 활성화합니다.	불리언	진실	1.0.0
show툴팁	true로 설정된 경우 기본 도구 설명을 표시합니다.	불리언	거짓	1.1.0
도구 설명텍스트	사용자 정의 텍스트를 기본 도구 설명으로 설정	끈	도시 이름	1.1.0
맞춤 스타일	구성 요소의 스타일을 지정합니다.	사용자 정의 스타일 유형 []	{ 유휴 색상 : #444 , hoverColor : #dc3522 }	1.0.0
데이터	사용자 정의 SVG 경로 및 메타데이터를 제공할 수 있습니다.	도시 유형 []	내장 데이터	1.0.0
도시 래퍼	City DOM은 제공된 구성 요소로 래핑됩니다.	( cityComponent : JSX.Element , city : CityType ) => JSX.Element	포장되지 않은 도시	1.0.0
onHover	도시가 지도 위에 떠 있을 때의 이벤트입니다.	( 도시 : CityType ) => 무효	-	1.0.0
클릭 시	지도에서 도시를 클릭했을 때의 이벤트	( 도시 : CityType ) => 무효	-	1.0.0

스타일링

customStyle 속성을 설정하여 도시의 색상을 덮어쓸 수 있습니다.

예:

 < TurkeyMap customStyle = { { idleColor : "#444" , hoverColor : "#dc3522" } } / >

기본 도구 설명은 사전 정의된 HTML ID를 통해 스타일을 지정할 수 있습니다.

#svg-turkiye-haritasi-container-tooltip 툴팁 DOM의 ID입니다. #svg-turkiye-haritasi-container 컨테이너(상위) DOM의 ID입니다.

예:

 # svg-turkiye-haritasi-container > # svg-turkiye-haritasi-container-tooltip {
  background-color : rgba ( 54 , 0 , 99 , 0.479 );
}

라이선스

이 프로젝트는 MIT 라이선스에 따라 배포됩니다.

버전 관리

" majorVersion.minorVersion.bugfixVersion " 패턴으로 정의된 버전 관리 체계

수준	설명
주요버전	이는 해당 버전에 이전 버전과 호환되지 않을 수 있는 기능에 대한 주요 변경 사항이 도입되었음을 나타냅니다.
마이너 버전	이는 해당 버전이 기존 용도에 맞게 이전 버전과 호환되는 작은 변경 사항을 도입했음을 나타냅니다.
버그수정버전	이는 현재 메이저 버전이나 마이너 버전에서 나타났던 일부 문제를 해당 버전이 해결했음을 나타냅니다.