react-tmap高性能地圖組件庫
react-tmap 是一個基于騰訊地圖、TypeScript 封裝適用于 react 的高性能地圖組件庫。
功能特性：
- 文檔完善：基于官方文檔和框架用法的文檔可讀性高，組件示例完善
- 組件化：封裝騰訊地圖命令式的 api 為響應(yīng)式組件，無需關(guān)心復雜的地圖 api，只需要操作數(shù)據(jù)即可
- 多框架：包含 react-tmap 和 vue-tmap，且共享同一套類型定義
- Type-safe(@map-component/tmap-types): 補充了騰訊地圖 sdk 的類型聲明，組件也使用 TypeScript 開發(fā)，更好的開發(fā)體驗
- 自定義組件：提供開放地圖實例，可編寫自定義組件或直接調(diào)用地圖原生 api
- 性能優(yōu)化：統(tǒng)一地圖 api 調(diào)用方式和數(shù)據(jù)監(jiān)聽，防止誤用地圖 api 引起性能問題
文檔和示例
訪問 官方文檔，查看更多地圖組件
主要組件
| react 組件 | 描述 |
|---|---|
| Map | 地圖基礎(chǔ)組件 |
| MultiMarker | 多個標注點 |
| MultiPolyline | 折線 |
| MultiPolygon | 多邊形 |
| MultiLabel | 文本標注 |
| MultiCircle | 圓形 |
| DOMOverlay | DOM 覆蓋物抽象類 |
| InfoWindow | 信息提示窗 |
| MarkerCluster | 點聚合 |
快速開始
安裝
npm install @map-component/react-tmap
申請騰訊地圖密鑰
https://lbs.qq.com/dev/console/key/manage
簡單示例
import React, { useState } from 'react'; import { TMap, MultiPolygon } from '@map-component/react-tmap'; const styles = { polygon: { color: '#3777FF', //面填充色 showBorder: false, //是否顯示拔起面的邊線 borderColor: '#00FFFF', //邊線顏色 }, }; const paths = [ { lat: 40.041054, lng: 116.272303 }, { lat: 40.039419, lng: 116.272721 }, { lat: 40.039764, lng: 116.274824 }, { lat: 40.041374, lng: 116.274491 }, ]; const geometries = [ { id: 'p1', //該多邊形在圖層中的唯一標識（刪除、更新數(shù)據(jù)時需要） styleId: 'polygon', //綁定樣式名 paths: paths, //多邊形輪廓 }, ]; const center = { lat: 40.041054, lng: 116.272303 }; export default () => { const [color, setColor] = useState('#00FF00'); const [zoom, setZoom] = useState(16); const polygonStyles = React.useMemo( () => ({ polygon: { ...styles.polygon, color, }, }), [color], ); return ( <div> <div> <button onClick={() => setColor('#00FFFF')}>修改多邊形顏色</button> <button onClick={() => setZoom(zoom + 1)}>修改地圖縮放級別</button> </div> <TMap mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ" // 申請的 key zoom={zoom} center={center} // 設(shè)置中心點坐標 control={{ zoom: { position: 'BOTTOM_RIGHT' }, scale: false, rotate: false, }} > <MultiPolygon styles={polygonStyles} geometries={geometries} onClick={() => console.log('點擊了多邊形')} // 點擊多邊形 /> </TMap> </div> ); };
mapKey 為新申請的密鑰
評論
圖片
表情