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 ”模式

等级	描述
主要版本	这表明该版本引入了重大更改，这些更改可能不向后兼容的功能。
次要版本	这表明该版本引入了一些小的更改，这些更改向后兼容现有用途的精细安装。
错误修复版本	这表明该版本解决了当前大版本或小版本中出现的一些问题。