如何使用

该目录包含一些基于 React leaflet 的组件。

Prepare

在 package.json 中添加

{
  "@shsystem/react-leaflet-elms": "version"
}

随后即可以直接在页面中引用并使用地图了：

import React from 'react';
import { Marker } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { Map } from '@shsystem/react-leaflet-elms';

export default function() {
  return (
    <div style={{ height: '100vh', width: '100vw' }} >
      <Map
        center={[30, 104]}
        zoom={10}
        style={{ height: '100%' }}
      >
        <Marker position={[0, 0]} />
      </Map>
    </div>
  );
}

Map

地图组件是基于 react-leaflet 库中的 Map 封装而来，增加了百度、谷歌、wikimedia三种地图图层。 可以通过指定 type="baidu" 来选择使用哪种图层，默认百度。

参数说明

| 参数名 | 描述 | 类型 | 默认值 | | ----------- | -------------------------------------------------------- | ------- | -------------------------- | | center | 地图中心 | array | | | theme | 主题(light | dark) | string | Light | | type | 地图图层( ‘baidu’ | ‘amap’ | ‘google’ | ‘wikimedia' ) | string | baidu | | maxZoom | 最大缩放级别 | number | type === 'baidu' ? 19 : 18 | | minZoom | 最小缩放级别 | number | 3 | | zoom | 默认地图缩放级别 | number | 4 | | zoomControl | 是否现实缩放控件 | boolean | False | | layerProps | 地图图层其他属性 | object | |

layerProps具体参数如下

type === ‘google’

基于 react-leaflet-google 扩展

| 参数名 | 描述 | 类型 | 默认值 | | --------- | --------------- | ------ | -------- | | googlekey | google地图的key | string | 企业默认 | | maptype | 地图类型 | string | ROADMAP |

更多使用参考 react-leaflet-google ；

type === ‘amap’

| 参数名 | 描述 | 类型 | 默认值 | | ----------- | -------------------------- | ------- | -------------------- | | v | 高德地图版本 | string | 1.4.15 | | hostAndPath | 服务器地址 | string | webapi.amap.com/maps | | key | 高德地图key | string | 企业默认 | | callback | 高德地图回调函数名称 | string | __amap_init_callback | | useAMapUI | 是否使用高德地图图层UI渲染 | boolean | false |

更多参数参考高德地图官方文档

type === ‘baidu’

参考百度地图