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