6.0.3 • Published 1 month ago
@uiw/react-amap-label-marker v6.0.3
LabelMarker 海量标注
当需要在地图添加千级以上的点标记时,LabelMarker 是代替 Marker 的更好选择。不同于 MassMarks ,LabelMarker 不仅可以绘制图标,还可以为图标添加文字信息,且万级以上数据也具有较好性能,配置也更加灵活。
另外,LabelMarker 之间还支持避让功能,JSAPI 2.0 版本还支持地图标注避让 LabelMarker,可以让您的 marker 更加明显。
import { LabelMarker } from '@uiw/react-amap';
// 或者单独安装使用
import { LabelMarker } from '@uiw/react-amap-marker';
基本用法
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, LabelMarker } from '@uiw/react-amap';
const Example = () => {
const [show, setShow] = useState(true);
return (
<>
<button onClick={() => setShow(!show)}>
{show ? '隐藏' : '显示'}
</button>
<div style={{ width: '100%', height: '300px' }}>
<Map zoom={4}>
<LabelMarker
visiable={show}
name= "标注1"
text={{
content: '文本标注',
direction: 'top',
offset: [0, 0],
style: {
strokeColor: '#ffffff',
fontSize: 14,
fillColor: '#60666E',
strokeWidth: 4,
backgroundColor: 'rgba(0,0,0,0)',
},
}}
position={[116.466994, 39.984904]}
/>
<LabelMarker visiable={show} name= "标注3" position={new AMap.LngLat(119.306239,26.075302)}
text={{
content: '有icon',
direction: 'top',
offset: [0, 0],
style: {
strokeColor: '#ffffff',
fontSize: 14,
fillColor: '#60666E',
strokeWidth: 4,
backgroundColor: 'rgba(0,0,0,0)',
},
}}
// 可以自定义 icon
// icon={{
// image: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
// // 图片尺寸
// size: [19, 32],
// // 图片相对 position 的锚点,默认为 bottom-center
// anchor: 'center',
// }}
/>
</Map>
</div>
</>
);
}
const Mount = () => (
<APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
<Example />
</APILoader>
);
export default Mount;
禁用 icon 展示
设置 icon={null}
取消 icon 的显示
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, LabelMarker } from '@uiw/react-amap';
const Example = () => {
const [show, setShow] = useState(true);
return (
<>
<button onClick={() => setShow(!show)}>
{show ? '隐藏' : '显示'}
</button>
<div style={{ width: '100%', height: '300px' }}>
<Map zoom={4}>
<LabelMarker
visiable={show}
name= "标注1"
icon={null}
text={{
content: '没有有icon图标',
direction: 'top',
offset: [0, 0],
style: {
strokeColor: '#ffffff',
fontSize: 14,
fillColor: '#60666E',
strokeWidth: 4,
backgroundColor: 'rgba(0,0,0,0)',
},
}}
position={[116.466994, 39.984904]}
/>
</Map>
</div>
</>
);
}
const Mount = () => (
<APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
<Example />
</APILoader>
);
export default Mount;
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visiable | 覆盖物是否可见。 | boolean | - |
name | 标注名称,作为标注标识,显示文字内容请设置 opts.text.content | string | - |
position | 点标记在地图上显示的位置,默认为地图中心点 | (Vector | LngLat) | - |
zooms | 海量点显示层级范围,范围外不显示。 | Vector | [2, 20] |
opacity | 标注透明度 | number | 1 |
rank | 避让优先级,获取标注的优先级,该优先级用于labelsLayer支持避让时,rank 大的值避让低的标注。 | number | 1 |
extData | 用户自定义类型数据,可将自定义数据保存在该属性上,方便后续操作使用 | any | - |
icon | 标注图标设置 | LabelMarkerOptions.TextStyleOptions | - |
text | 标注文本设置 | AMap.IconOptions | - |
事件
参数 | 说明 | 类型 |
---|---|---|
onMouseDown | 鼠标在点标记上按下时触发事件 | (event: MapsEvent): void; |
onMouseUp | 鼠标在点标记上按下后抬起时触发事件 | (event: MapsEvent): void; |
onTouchStart | 触摸开始时触发事件,仅适用移动设备 | (event: MapsEvent): void; |
onTouchMove | 触摸移动进行中时触发事件,仅适用移动设备 | (event: MapsEvent): void; |
onTouchEnd | 触摸结束时触发事件,仅适用移动设备 | (event: MapsEvent): void; |
onClick | 鼠标左键单击事件 | (event: MapsEvent): void; |
onMouseMove | 鼠标移动 | (event: MapsEvent): void; |
onMouseOver | 鼠标移近点标记时触发事件 | (event: MapsEvent): void; |
onMouseOut | 鼠标移出点标记时触发事件 | (event: MapsEvent): void; |
6.0.3
1 month ago
6.0.2
3 months ago
6.0.1
5 months ago
6.0.0
5 months ago
5.0.6
10 months ago
5.0.5
10 months ago
5.0.10
9 months ago
5.0.11
9 months ago
5.0.12
8 months ago
5.0.13
8 months ago
5.0.14
8 months ago
5.0.15
7 months ago
5.0.16
7 months ago
5.0.17
7 months ago
5.0.18
6 months ago
5.0.19
6 months ago
5.0.20
5 months ago
5.0.21
5 months ago
5.0.9
9 months ago
5.0.8
10 months ago
5.0.7
10 months ago
5.0.4
11 months ago
5.0.3
11 months ago
5.0.2
11 months ago
5.0.1
1 year ago
5.0.0
1 year ago
4.5.3
1 year ago
4.6.0
1 year ago
4.5.0
1 year ago
4.4.1
1 year ago
4.4.0
1 year ago
4.5.2
1 year ago
4.5.1
1 year ago
4.4.2
1 year ago
4.0.5
1 year ago
4.3.1
1 year ago
4.2.2
1 year ago
4.0.7
1 year ago
4.0.6
1 year ago
4.1.0
1 year ago
4.3.0
1 year ago
4.2.1
1 year ago
4.2.0
1 year ago
4.1.1
1 year ago
4.0.3
1 year ago