箭頭坐標軸和圓坐標軸

為了實作Cesium 對模型的拖拽平移和旋轉，需要以模型為中心建立箭頭坐標軸（沿坐標軸方向移動）和圓坐標軸（沿圓弧方向旋轉），

實作思路

利用Cesium的矩陣運算，創建primitive，操作矩陣實作各種坐標軸，箭頭坐標軸比圓坐標軸簡單很多，Cesium內置了箭頭材質，更改材質即可，

繪制箭頭坐標

Cesium中添加圖形的兩種方法，一種是entities，一種是primitives，后者更適合開發，主要用到modelmatrix屬性，添加箭頭可以理解為添加同一個坐標起點的本地沿坐標軸方向的三條箭頭線，
寬度和長度可根據需求自己調節，主要更改material即可，

// 創建x方向的箭頭
  var arrowx = viewer.entities.add({
    name:"arrowx",
    polyline:{
      positions:Cesium.Cartesian3.fromDegreesArrayHeights([
        lon,lat,hei,lon+0.00003,lat,hei]),
      width:25,
      arcType:Cesium.ArcType.NONE,
      material:new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
    },
  });

依次畫出y、z坐標，

繪制圓坐標

繪制圓坐標的話，用primitive來畫，要用到modelmatrix，用線畫圓可以調節圓的寬度，可以創建圓后，拿到圓的坐標，再用線繪制，
繪制圓，granularity越小，密度越大，

  var circle = new Cesium.CircleOutlineGeometry({
    center:Cesium.Cartesian3.fromDegrees(lan,lat,height),
    radius:3.0,
    granularity:0.001
  });

取坐標,存入陣列

  var geometry = new Cesium.CircleOutlineGeometry.createGeometry(circle);
  var Positions = geometry.attributes.position.values;
  var Pos = [].slice.call(Positions);

把坐標轉換為position

  var erll =  Positions.length/3;
  var erl = [];
  for (var  h=0;h<erll;h++)
  {
    erl[h] =[];
  }
  var k =0;
  for (var p = 0;p<erll;p++)
  {
    for (var q = 0;q<3;q++)
    {
      erl[p][q]= Pos[k];
      k++;
      if(k>Positions.length-1)
      {
        break;
      }
    }
  }
  var posCirle = [];
  for (var t= 0;t<erl.length;t++)
  {
    var car3 = new Cesium.Cartesian3();
    posCirle.push(new Cesium.Cartesian3(erl[t][0],erl[t][1],erl[t][2]));
  }
  //首尾相連
  posCirle.push(new Cesium.Cartesian3(erl[0][0],erl[0][1],erl[0][2]));

創建GeometryInstance

var polyline = new Cesium.PolylineGeometry({
    positions: posCirle,
    width: 5.0,
    vertexFormat:Cesium.PolylineColorAppearance.VERTEX_FORMAT
  });
  var rectangleInstance = new Cesium.GeometryInstance({
    geometry: polyline,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE),
    },
    id:"lineZ"
  });//HEADING

繪制,依次繪制剩余坐標軸

 var lineZ = new Cesium.Primitive({
    geometryInstances:rectangleInstance ,
    appearance:new Cesium.PolylineColorAppearance({
      translucent:false
    }),
    asynchronous: false,
  });
  viewer.scene.primitives.add(lineZ);

轉換坐標軸，用這種方法繪制的圓實際上是沒有經過坐標轉換矩陣的，默認單位陣，可以通過Cesium.Matrix3.fromRotationX（或者yz）生成旋轉矩陣，再與原矩陣相乘，

這里建議手寫轉換矩陣，學過坐標矩陣轉換后很容易理解，分別將繪制的圓繞x軸和y軸旋轉，再平移矩陣至原坐標點，當僅有X坐標時的旋轉矩陣，如下（注意Cesium矩陣的寫法，按行輸入）：

  lineY.modelMatrix = new Cesium.Matrix4(0,0,1,X,0,1,0,0,1,0,0,-X,0,0,0,1);
  lineX.modelMatrix = new Cesium.Matrix4(0,1,0,X,1,0,0,-X,0,0,1,0,0,0,0,1);

坐標的平移量可以通過圓心點的坐標來計算，

 var cartest = new Cesium.Cartesian3(x,y,z);
 cartest = Cesium.Matrix4.multiplyByPoint(lineX.modelMatrix,cartest,cartest);
 console.log(cartest);

通過計算cartest的坐標差值來計算平移量，

總結

繪制箭頭相對比較簡單，不需要矩陣操作，如果需要的話，建議也用primitive繪制，方法與圓坐標的方法相同，繪制圓坐標的主要是獲取坐標點后，對繪制的圓進行坐標矩陣轉換，可以通過其他講解坐標轉換矩陣的博客進行學習，一些有關Cesium中的坐標矩陣問題后續會進行說明和補充，

下一篇博客會講述如何實作模型沿坐標軸平移和旋轉，