npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lbh7/react-amap-mass-marks

v1.0.7

Published

在地图上加载海量点,适合需要显示大量 `Marker` 的场景。

Downloads

4

Readme

MassMarks 海量点

Buy me a coffee npm version Downloads

在地图上加载海量点,适合需要显示大量 Marker 的场景。

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

基本用法

官方示例

import ReactDOM from 'react-dom';
import React, { useState, useRef, useEffect } from 'react';
import { Map, APILoader, MassMarks, requireScript } from '@lbh7/react-amap';

const Example = (props) => {
  const [show, setShow] = useState(true);
  const [points, setPoints] = useState([]);
  const map = useRef()
  const marker = useRef()
  useEffect(() => {
    if(points.length === 0) {
      requireScript('https://a.amap.com/jsapi_demos/static/citys.js', 'citys_id').then(() => {
        if(citys && Array.isArray(citys)) {
          setPoints(citys);
        }
      });
    }
  });
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={4}>
          <MassMarks
            visiable={show}
            data={points}
            onMouseMove={(evn) => {
              if (!map.current) {
                map.current = evn.target.getMap();
                if (!marker.current) {
                  marker.current = new AMap.Marker({ content: ' ', map: map.current });
                }
              }
              if (marker.current) {
                marker.current.setPosition(evn.data.lnglat);
                marker.current.setLabel({content: evn.data.name})
              }
            }}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

更多参数设置

| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | data | 海量点数据参数 | Array<MassMarkersDataOptions> | - | | zIndex | 图标叠加层级,值越大层级越高 | number | - | | opacity | 图标显示透明度。 | number | 1 | | zooms | 海量点显示层级范围,范围外不显示。 | Vector | [2, 20] | | style | 点标记显示位置偏移量。 | MassMarkersStyleOptions | Array<MassMarkersStyleOptions> | - |

事件

| 参数 | 说明 | 类型 | | ---- | ---- | ---- | | onClick | 鼠标左键单击事件 | (event: MapsEvent): void; | | onDblClick | 鼠标左键双击事件 | (event: MapsEvent): void; | | onMouseMove | 鼠标移动 | (event: MapsEvent): void; | | onMouseOut | 鼠标移出点标记时触发事件 | (event: MapsEvent): void; | | onMouseUp | 鼠标在点标记上按下后抬起时触发事件 | (event: MapsEvent): void; | | onMouseDown | 鼠标在点标记上按下时触发事件 | (event: MapsEvent): void; | | onMouseOver | 鼠标移近点标记时触发事件 | (event: MapsEvent): void; | | onTouchStart | 触摸开始时触发事件,仅适用移动设备 | (event: MapsEvent): void; | | onTouchEnd | 触摸结束时触发事件,仅适用移动设备 | (event: MapsEvent): void; |