如何使用
该目录包含一些基于 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’
参考百度地图