@uiw/react-amap-bezier-curve v6.0.3

BezierCurve 贝塞尔曲线

贝塞尔曲线

import { BezierCurve } from '@uiw/react-amap';
// 或者单独安装使用
import { BezierCurve } from '@uiw/react-amap-bezier-curve';

基本用法

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Map, APILoader, BezierCurve } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const path = [// 每个弧线段有两种描述方式
    [116.39, 39.91, 116.37, 39.91],//起点
    // 第一段弧线
    [116.380298, 39.907771, 116.38, 39.90],// 控制点，途经点
    // 第二段弧线
    [116.385298, 39.907771, 116.40, 39.90],// 控制点，途经点// 弧线段有两种描述方式1
    // 第三段弧线
    [// 弧线段有两种描述方式2
      [116.392872, 39.887391],//控制点
      [116.40772, 39.909252],//控制点
      [116.41, 39.89]//途经点
    ],
    // 第四段弧线
    [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]
    // 控制点，控制点，途经点，每段最多两个控制点
  ];
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '500px' }}>
        <Map zoom={14} center={[116.397637, 39.900001]}>
          <BezierCurve
            visiable={show}
            path={path}
            isOutline={true}
            outlineColor="#ffeeff"
            borderWeight={3}
            strokeColor="#3366FF"
            strokeOpacity={1}
            strokeWeight={6}
            // 线样式还支持 'dashed'
            strokeStyle="solid"
            // strokeStyle是dashed时有效
            strokeDasharray={[10, 10]}
            lineJoin="round"
            lineCap="round"
            zIndex={50}
          />
        </Map>
      </div>
    </>
  );
}

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

export default Mount;

Props

更多参数设置

事件

事件类型文档