quadratic-bezier-curve-3d-flow-renderer v1.0.1

quadratic-bezier-curve-3d-flow-renderer

基于ArcGIS JS API的扩展渲染器，用于展示三维二次贝塞尔曲线流动效果。

二次贝塞尔曲线示意图如下。

安装

使用npm：

$ npm install quadratic-bezier-curve-3d-flow-renderer

使用yarn：

$ yarn add quadratic-bezier-curve-3d-flow-renderer

使用pnpm：

$ pnpm add quadratic-bezier-curve-3d-flow-renderer

构造方法

new QuadraticBezierCurve3dFlowRenderer(
  linesConfig, // 线条配置数据，属性详情见下方表格
  sceneView, // 创建的三维场景对象
  externalRenderers, // ArcGIS API提供的外部扩展渲染器的接口
  defaultConfig, // 可选项，默认配置，详情见下方表格
);

构造方法参数

lineConfig属性

defaultConfig属性

实例方法

示例

使用时，需引入ArcGIS API中的相关接口对象：

import Point from '@arcgis/core/geometry/Point';
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';

以及引入quadratic-bezier-curve-3d-flow-renderer：

import QuadraticBezierCurve3dFlowRenderer from 'quadratic-bezier-curve-3d-flow-renderer';

生成线的配置：

const linesConfig = [
  // 第一条线
  { 
    // 线条起始点，为ArcGIS API中Point类的实例对象
    startPoint: new Point({
      longitude: 104.07082665464789,
      latitude: 30.67089665572961,
      z: 1,
    }),
    // 线条终点
    endPoint: new Point({
      longitude: 104.07103884320988,
      latitude: 30.656671934579894,
      z: 1,
    }),
    // 控制点
    controlPoint: new Point({
      longitude: 104.0709823651847,
      latitude: 30.6637032277326,
      z: 500,
    }),
    color: '#00ff00', // 可选项，颜色
    flowRatio: 0.5, // 可选项，流动效果长度占流动路径长度的比例
    pointsCount: 1000, // 可选项，点数量
    size: 3, // 可选项，点大小
    speed: 400, // 可选项，速度
  },
  // 第二条线
  // ...
]

实例化renderer对象：

const myExternalRenderer = new QuadraticBezierCurve3dFlowRenderer(
  linesConfig,
  sceneView, // 创建的三维场景对象
  externalRenderers // 
);

注册renderer：

externalRenderers.add(sceneView, myExternalRenderer);

更新默认配置：

myExternalRenderer.updateDefaultConfig({
  color: '#ff0000', // 修改默认颜色
  flowRatio: 1, // 修改比例
  pointsCount: 2000, // 修改默认点数量
  size: 5, // 修改点默认大小
  speed: 500, // 修改默认速度
});