turkey map react下載turkey map react原始碼下載

turkey map react

其他源碼

v1.2.2

下載

互動式土耳其地圖 React 元件

開箱即用的土耳其城市地圖。

現場示範：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 } [ ]

應用程式介面

類型

類型	描述
都市類型	{ id :字串,車牌號碼:數字,名稱:字串,路徑:字串}
視圖框類型	{上方：數字，左側：數字，寬度：數字，高度：數字}
自訂樣式類型	{空閒顏色：字串，懸停顏色：字串}

道具

財產	描述	類型	預設	自從
視圖框	地圖（svg）佈局的位置和尺寸資訊	視圖框類型	{頂部： 0 ，左側： 80 ，寬度： 1050 ，高度： 585 }	1.0.0
可見的	定義組件的可見性	布林值	真的	1.0.0
可懸停的	啟用onHover事件可用性	布林值	真的	1.0.0
顯示工具提示	如果設定為 true，則顯示預設工具提示	布林值	錯誤的	1.1.0
工具提示文字	將自訂文字設定為預設工具提示	細繩	城市名稱	1.1.0
自訂樣式	風格化組件。	自訂樣式類型[]	{空閒顏色： #444 ，懸停顏色： #dc3522 }	1.0.0
數據	允許提供自訂 SVG 路徑和元資料。	城市類型[]	內建數據	1.0.0
城市包裝器	城市 DOM 由提供的組件包裝。	( cityComponent : JSX.Element , city : CityType ) => JSX.Element	展開的城市	1.0.0
懸停時	當城市懸停在地圖上時發生的事件。	（城市：城市類型）=>無效	-	1.0.0
點擊時	點擊地圖上的城市時發生的事件	（城市：城市類型）=>無效	-	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 」模式

等級	描述
主要版本	這表明該版本引入了重大更改，這些更改可能不向後相容的功能。
次要版本	這表明該版本引入了一些小的更改，這些更改向後相容於現有用途的精細安裝。
錯誤修復版本	這表明該版本解決了當前大版本或小版本中出現的一些問題。