1.3.0 • Published 5 years ago
react-svg-zoom-map v1.3.0
react-svg-zoom-map
擁有三層放大功能的台灣地圖 React Component，地圖圖形資料使用 Topojson，並透過 D3 繪製
Live Demo
Installation
透過 NPM 安裝：
npm install react-svg-zoom-map --save
Development
開啟測試伺服器並執行 example
npm run watch
develop 建置
npm run dev
production 建置
npm run build
Usage
import React, { useState } from 'react';
import ReactSvgZoomMap from 'react-svg-zoom-map';
const Example = () => {
const [ area, setArea ] = useState(['', '', '']);
return (
<ReactSvgZoomMap
countyJsonSrc="https://cybermumu.github.io/react-svg-zoom-map/example/topojsons/taiwan-county.json"
townJsonSrc="https://cybermumu.github.io/react-svg-zoom-map/example/topojsons/taiwan-town.json"
villageJsonSrc="https://cybermumu.github.io/react-svg-zoom-map/example/topojsons/taiwan-village.json"
county={ area[0] }
town={ area[1] }
village={ area[2] }
onAreaClick={ (newArea, e) => setArea(newArea) }
onPinClick={ console.log }
pins={[
{
id: 1,
title: '台北101',
county: '臺北市',
town: '信義區',
village: '西村里',
location: [ 25.034000, 121.564670 ]
},
{
id: 2,
title: '台灣最南點',
county: '屏東縣',
town: '恆春鎮',
village: '鵝鑾里',
location: [ 21.897750, 120.857921 ]
},
{
id: 3,
title: '貓鼻頭燈塔',
county: '新北市',
town: '瑞芳區',
village: '鼻頭里',
location: [ 25.129217, 121.923449 ]
}
]}
/>
)
}Props
county: string;
目前選取的縣市。
town: string;
目前選取的鄉鎮。
village: string;
目前選取的村里。
className?: string;
自訂此 Component 的 className。
countyJsonSrc: string;
導入外部的縣市界圖 TopoJson Source，此值為必填。
townJsonSrc: string;
導入外部的鄉鎮界圖 TopoJson Source，此值為必填。
villageJsonSrc: string;
導入外部的村里界圖 TopoJson Source，此值為必填。
pins?: array[{ title: string, county: string, town: string, village: string, location: [lat: number, long: number] }];
要 pin 上地圖的資訊，需帶點的縣市、鄉鎮、村里資訊，進入放大模式時，系統會篩選掉該區外的 pin。
範例資料如下：
{
title: '台北101',
county: '臺北市',
town: '信義區',
village: '西村里',
location: [ 25.034000, 121.564670 ]
}title 會帶入至 svg circle 內。此物件可以任意攜帶其他 property，此物件將會在 click 或 hover 的 callback 被完整傳回。
pinRadiusWithLayer?: array [ layer_0_reduis: number, layer_1_reduis: number, layer_2_reduis: number ];
每一層 pin 的半徑，預設為 [2, 0.3, 0.15]。
zoomDuration?: number;
放大動畫的時間長度（毫秒），預設為 1000。
zoomDelay?: number;
放大動畫的前置延遲（毫秒），預設為 100。
Callback
onAreaClick?(selectAreaArray: array[countyName?: string, townName?: string, village?: string], event: MouseEvent )
selectAreaArray 格式為： 縣市名稱, 鄉鎮名稱, 村里名稱 ，若選取層級僅到縣市時，陣列長度為1，依此類推。
onAreaHover?(selectAreaArray: array[countyName?: string, townName?: string, village?: string], event: MouseEvent )
selectAreaArray 格式同上。
onPinClick?(selectPinObject: object, event: MouseEvent)
selectPinObject 格式與 Props 中帶入的 pins 單項物件相同。
onPinHover?(selectPinObject: object, event: MouseEvent)
selectPinObject 格式同上。