arcgis js 4 使用pixi.js 绘制贝塞尔曲线

我们先定义一下贝塞尔曲线的数据结构

  • let option = {
  • renderer:{
  • type: "simple",
  • symbol: {
  • lineColor: "#14ff34",
  • lineWidth: 3
  • }
  • },
  • data: [
  • {
  • geometry: [
  • [12958063.6570659, 4857420.273468611],
  • [12716675.521741385, 3593151.825632137]
  • ],
  • attributes: {
  • name: "北京-武汉",
  • }
  • },
  • {
  • geometry: [
  • [12609052.185915885, 2656339.6069692653],
  • [11855688.835137373, 3458622.655850267]
  • ],
  • attributes: {
  • name: "广州-重庆",
  • }
  • },
  • {
  • geometry: [
  • [12609052.185915885, 2656339.6069692653],
  • [13521404.55552746, 3666531.372785874]
  • ],
  • attributes: {
  • name: "广州-上海",
  • }
  • },
  • {
  • geometry: [
  • [12609052.185915885, 2656339.6069692653],
  • [13785570.925280986, 1381981.4713991268]
  • ],
  • attributes: {
  • name: "广州-菲律宾",
  • }
  • }
  •  
  • ]
  • };

贝塞尔曲线最重要是获取中间那个点
```javascript

//获取贝塞尔曲线中间控制点的坐标
getPoint(sx, sy, ex, ey){
//获取开始，结束点所在直线1公式
let k = (ey - sy)/(ex - sx);
let b = (k(sy + ey) + (sx + ex))/(2k);
//以开始点为旋转中心，逆时针旋转30度，获得该直线2公式
let angle = (Math.atan2(ey - sy, ex - sx))/(Math.PI/180) + 30;
let k1 = Math.tan((Math.PIangle)/180); let b1 = sy - k1sx;
//中间控制点即为直线1和2的交点
let c1x = (b - b1)/(k1 + 1/k),
c1y = k1*c1x + b1;

 
 
posted @ 2022-01-20 17:19  haibalai  阅读(229)  评论(0)  编辑  收藏  举报