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, // 可选项，默认配置，详情见下方表格
);

构造方法参数

参数名称	类型	描述
linesConfig	LineConfig[]	线条配置数据，详情见下方lineConfig属性表格。
sceneView	__esri.SceneView	创建的三维场景对象。
externalRenderers	__esri.externalRenderers	ArcGIS API提供的外部扩展渲染器的接口。
defaultConfig	DefaultConfig	可选项，默认配置，详情见下方defaultConfig属性表格。

lineConfig属性

属性	类型	描述
startPoint	__esri.Point	线条起点。
endPoint	__esri.Point	线条终点。
controlPoint	__esri.Point	二次贝塞尔曲线的控制点。
其它属性见defaultConfig属性介绍

defaultConfig属性

属性	类型	描述
color	string	十六进制表示的颜色。可选项。默认值：#00ffff。
flowRatio	number	流动效果长度占流动路径长度的比例。可选项。取值范围大于0小于等于1。默认值：0.25。
pointsCount	number	点的数量。可选项。默认值：500。
size	number	点大小。可选项。默认值：3。
speed	number	流动速度。可选项。默认值：500。

实例方法

方法名称	返回值类型	描述
updateDefaultConfig(defaultConfig)	undefind	更新默认配置。参数为defaultConfig对象。
updateLinesConfig(linesConfig)	undefind	更新线条配置。参数为lineConfig数组。

示例

使用时，需引入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, // 修改默认速度
});