qm-map-maplibre-gl

基于 MapLibre GL 和 React 的地图组件库，提供丰富的地图交互组件。

安装

npm install qm-map-maplibre-gl
# 或
yarn add qm-map-maplibre-gl

依赖

• React >= 19.0.0
• React DOM >= 19.0.0
• MapLibre GL >= 5.0.0

快速开始

import { MapWidget, LayerList, Legend } from 'qm-map-maplibre-gl';
import 'qm-map-maplibre-gl/dist/qm-map.css'
import type { LngLatLike } from 'maplibre-gl';

function App() {
  const mapOptions = {
    id: 'myMap',
    center: [115.415, 33.254] as LngLatLike,
    zoom: 9.5,
    maxZoom: 18,
  };

  return (
    <MapWidget mapOptions={mapOptions} mapLayerSettting={layerSetting}>
      <LayerList position={{ top: 10, left: 10 }} />
      <Legend position={{ bottom: 10, left: 10 }} />
    </MapWidget>
  );
}

组件列表

MapWidget

地图容器组件，所有其他组件必须包裹在其中。

interface TMapProps {
  mapOptions: TMapOptions;
  mapLayerSettting: TMapLayerSettting;
  children?: React.ReactNode;
}

LayerList

图层列表组件，显示和控制地图图层可见性。

<LayerList position={{ top: 10, left: 10 }} />

Legend

图例组件，显示地图图例信息。

<Legend position={{ bottom: 10, left: 10 }} />

Draw

地图绘制组件，支持绘制点、线、面并计算面积。

import DrawWidget, { type TDrawResult, type TDrawModeType } from 'qm-map-maplibre-gl';

const onDraw = (res: TDrawResult) => {
  console.log('绘制数据:', res.data);
  console.log('总面积:', res.area);
};

// 基础用法
<DrawWidget 
  position={{ bottom: 10, right: 10 }} 
  onDraw={onDraw} 
/>

// 限制绘制模式
<DrawWidget 
  modes={['draw_point', 'draw_polygon']}
  position={{ bottom: 10, right: 10 }} 
  onDraw={onDraw} 
/>

Props:

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | position | TWidgetPosition | 是 | 控件位置 | | onDraw | (result: TDrawResult) => void | 是 | 绘制完成回调 | | modes | TDrawModeType[] | 否 | 允许的绘制模式 | | initFeature | FeatureCollection | 否 | 初始绘制数据 |

绘制模式:

• 'draw_point' - 绘制点
• 'draw_line_string' - 绘制线
• 'draw_polygon' - 绘制多边形
• 'simple_select' - 选择模式

Swipe

地图分屏对比组件。

<Swipe position={{ top: 190, right: 10 }} />

Print

地图打印组件。

<Print position={{ top: 10, right: 10 }} />

类型导出

import type { 
  TWidgetPosition,
  TDrawResult, 
  TDrawModeType,
  TMapOptions,
  TMapLayerSettting 
} from 'qm-map-maplibre-gl';

工具 Hooks

useMap

获取地图实例上下文。

import { useMap } from 'qm-map-maplibre-gl';

function MyComponent() {
  const { map } = useMap();
  
  // 使用 map 实例
  const handleClick = () => {
    map?.flyTo({ center: [116, 39], zoom: 10 });
  };
  
  return <button onClick={handleClick}>飞行到</button>;
}

样式

组件库已内置样式，无需额外引入 CSS 文件。

License

MIT