@lbh7/react-amap-label-marker

1.0.7 • Public • Published

LabelMarker 海量标注

Buy me a coffee npm version Downloads

当需要在地图添加千级以上的点标记时,LabelMarker 是代替 Marker 的更好选择。不同于 MassMarks ,LabelMarker 不仅可以绘制图标,还可以为图标添加文字信息,且万级以上数据也具有较好性能,配置也更加灵活。

另外,LabelMarker 之间还支持避让功能,JSAPI 2.0 版本还支持地图标注避让 LabelMarker,可以让您的 marker 更加明显。

import { LabelMarker } from '@lbh7/react-amap';
// 或者单独安装使用
import { LabelMarker } from '@lbh7/react-amap-marker';

基本用法

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, LabelMarker } from '@lbh7/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 '@lbh7/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;

Package Sidebar

Install

npm i @lbh7/react-amap-label-marker

Weekly Downloads

1

Version

1.0.7

License

MIT

Unpacked Size

12.8 kB

Total Files

4

Last publish

Collaborators

  • lanbenhua