@uiw/react-baidu-map-point-collection v2.7.1

PointCollection 加载海量点

表示海量点类，利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器。

渲染海量点会耗费一定性能，应该注意不要频繁变动 point 数组

import { PointCollection, usePointCollection } from '@uiw/react-baidu-map';
// 或者单独安装使用
import PointCollection, { usePointCollection } from '@uiw/react-baidu-map-point-collection';

基本用法

import React from 'react';
import { useEffect, useState } from 'react';
import { Map, PointCollection, APILoader, requireScript } from '@uiw/react-baidu-map';

const Example = () => {
  const [visiable, setVisiable] = useState(true);
  const [points, setPoints] = useState([]);
  const [position, setPositon] = useState('');
  useEffect(() => {
    if(points.length === 0) {
      requireScript('https://lbsyun.baidu.com/jsdemo/data/points-sample-data.js').then(() => {
        if(window.data && window.data.data) {
          setPoints(window.data.data);
        }
      });
    }
  });
  function compRef(props) {
    if (props && props.pointCollection) {
      console.log('pointCollection::', props.pointCollection, props.map, props.BMap);
    }
  }
  return (
    <>
      <button onClick={() => setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}</button>
      {position && <span>标注点经纬度：{position}</span>}
      <Map widget={['NavigationControl']} zoom={5} style={{ height: 350 }}>
        <PointCollection
          ref={compRef}
          visiable={visiable}
          onClick={(e) => {
            setPositon(JSON.stringify(e.point))
          }}
          styles={{ shape: 1 }}
          points={[
            ...points
          ]}
        />
      </Map>
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Example />
    </APILoader>
  </div>
);
export default Demo;

使用 hooks

可以使用 pointCollection, setPointCollection, points, setPoints 钩子函数。

下面实例来源官方网站实例。

import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { Map, useMap, Provider, APILoader, usePointCollection, requireScript } from '@uiw/react-baidu-map';

let loadData = false;
let data = []
const Example = () => {
  const divElm = useRef();
  const { setContainer, map } = useMap({ widget: ['GeolocationControl', 'NavigationControl'], zoom: 5 });
  const { points, setPoints } = usePointCollection({ map });
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
    if (!loadData) {
      requireScript('https://lbsyun.baidu.com/jsdemo/data/points-sample-data.js').then(() => {
        if(window.data && window.data.data) {
          if (!loadData) {
            loadData = true;
            data = window.data.data;
            setPoints(window.data.data);
          }
        }
      });
    }
  });
  return (
    <>
      <button onClick={() => setPoints(points.length > 0 ? [] : data)}>{points && points.length > 0 ? '清空标注' : '显示标注'}</button>
      <div ref={divElm} style={{ height: '100%' }} />
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Provider>
        <Example />
      </Provider>
    </APILoader>
  </div>
);
export default Demo;

Props

事件

ShapeType

SizeType