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 } / >

โดยทั่วไปจะใช้สำหรับ Tooltip สไตล์ Antd

พารามิเตอร์ " child " คือเมือง DOM

ข้อมูลที่กำหนดเอง

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

หากจำเป็นต้องแสดงเส้นทาง SVG ที่กำหนดเองและ/หรือข้อมูลเมตาของเมือง ก็สามารถระบุได้ผ่านคุณสมบัติ ข้อมูล

คุณสมบัติ ข้อมูล จะต้องอยู่ในประเภทต่อไปนี้:

 CityType [ ]

กล่าวอีกนัยหนึ่ง:

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

เอพีไอ

ประเภท

พิมพ์	คำอธิบาย
ประเภทเมือง	{ id : string , plateNumber : หมายเลข , ชื่อ : string , path : string }
ประเภทวิวบ็อกซ์	{ บน : หมายเลข , ซ้าย : หมายเลข , ความกว้าง : หมายเลข , ความสูง : หมายเลข }
CustomStyleType	{ idleColor : สตริง , hoverColor : สตริง }

อุปกรณ์ประกอบฉาก

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าเริ่มต้น	เนื่องจาก
วิวบ็อกซ์	ข้อมูลตำแหน่งและขนาดของโครงร่างแผนที่ (svg)	ประเภทวิวบ็อกซ์	{ บน : 0 , ซ้าย : 80 , กว้าง : 1,050 , สูง : 585 }	1.0.0
มองเห็นได้	กำหนดการมองเห็นของส่วนประกอบ	บูลีน	จริง	1.0.0
โฉบได้	เปิดใช้งานความพร้อมใช้งานของเหตุการณ์ onHover	บูลีน	จริง	1.0.0
showTooltip	แสดงคำแนะนำเครื่องมือเริ่มต้นหากตั้งค่าเป็นจริง	บูลีน	เท็จ	1.1.0
ข้อความคำแนะนำเครื่องมือ	ตั้งค่าข้อความที่กำหนดเองเป็นคำแนะนำเครื่องมือเริ่มต้น	เชือก	ชื่อเมือง	1.1.0
กำหนดเองสไตล์	การจัดสไตล์องค์ประกอบ	ประเภทสไตล์ที่กำหนดเอง []	{ idleColor : #444 , hoverColor : #dc3522 }	1.0.0
ข้อมูล	อนุญาตให้จัดเตรียมเส้นทาง SVG และข้อมูลเมตาที่กำหนดเอง	ประเภทเมือง []	ข้อมูลในตัว	1.0.0
เมืองWrapper	DOM ของเมืองถูกห่อหุ้มด้วยส่วนประกอบที่ให้มา	( cityComponent : JSX.Element , เมือง : CityType ) => JSX.Element	เมืองที่ยังไม่ได้ห่อ	1.0.0
บนโฮเวอร์	เหตุการณ์เมื่อเมืองลอยอยู่บนแผนที่	( เมือง : CityType ) => เป็นโมฆะ	-	1.0.0
บนคลิก	เหตุการณ์เมื่อเมืองคลิกบนแผนที่	( เมือง : CityType ) => เป็นโมฆะ	-	1.0.0

จัดแต่งทรงผม

สีของเมืองสามารถเขียนทับได้ด้วยการตั้งค่าคุณสมบัติ customStyle

ตัวอย่าง:

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

คำแนะนำเครื่องมือเริ่มต้นสามารถจัดสไตล์ผ่านรหัส html ที่กำหนดไว้ล่วงหน้า

#svg-turkiye-haritasi-container-tooltip คือ ID สำหรับคำแนะนำเครื่องมือ DOM ในขณะที่ #svg-turkiye-haritasi-container เป็น ID สำหรับคอนเทนเนอร์ (พาเรนต์) DOM

ตัวอย่าง:

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

การออกใบอนุญาต

โครงการนี้เผยแพร่ภายใต้ใบอนุญาต MIT

การกำหนดเวอร์ชัน

รูปแบบการกำหนดเวอร์ชันที่กำหนดในรูปแบบของ " majorVersion.minorVersion.bugfixVersion "

ระดับ	คำอธิบาย
เวอร์ชันหลัก	สิ่งนี้บ่งชี้ว่าเวอร์ชันนี้ทำให้เกิดการเปลี่ยนแปลงที่สำคัญซึ่งฟีเจอร์ที่อาจเข้ากันไม่ได้แบบย้อนหลัง
รุ่นรอง	สิ่งนี้บ่งชี้ว่าเวอร์ชันนี้มีการเปลี่ยนแปลงเล็กๆ น้อยๆ ซึ่งสามารถเข้ากันได้แบบย้อนหลังกับการปรับให้เหมาะสมสำหรับการใช้งานที่มีอยู่
แก้ไขข้อผิดพลาดเวอร์ชัน	สิ่งนี้บ่งชี้ว่าเวอร์ชันนี้แก้ไขปัญหาบางอย่างที่เกิดขึ้นในเวอร์ชันหลักหรือเวอร์ชันรองในปัจจุบัน