在cesium中实现测量点、测量线、测量面、清除、扫描线

目的：测量点、测量线、测量面、清除、扫描线 测量线、面、点的功能最好实现简单就一句话

    //测量点
    //earth.analyzation.measurement.type ='POINT'
    //测量线
    //earth.analyzation.measurement.type ='SPACE_DISTANCE'
    //测量面
    //earth.analyzation.measurement.type ='SPACE_AREA'

其中原理呐也好理解，看我下一个截图：

所以实现起来也比较容易，我这里简单说一下步骤
老规矩先创建一个按钮

      <button class="defultbtn" @click="measureMentType('POINT')">测量点</button>
      <button class="defultbtn" @click="measureMentType('SPACE_DISTANCE')">测量线</button>
      <button class="defultbtn" @click="measureMentType('SPACE_AREA')">测量面</button>
      <button class="defultbtn" @click="clear">清除</button>
      

我们最好在div中
按钮创建完成之后自然要用方法去实现按钮，我们现在写一个methods（）

 methods: {
     //清除
     clear(){  
         this._earth && this._earth.analyzation.measurement.clearResults();
      },
      //测量点、线、面这里的measureMentType就是我们button的@click的名字，
      //我们用一个res来接收我们所得到的值然后分给 earth.analyzation.measurement.type=
      measureMentType(res){
        earth.analyzation.measurement.type=res;
      },
  },

这里我们需要注意因为我们在methods中引用了earth，而earth的属性在mounted当中所以如果我们像在mounted以外使用我们就需要把他跑出去

    this._earth = earth;
    //仅为调试方便用
    window.earth = earth;

这样我们就可以在methods中使用了，这样我们的测量点、测量线、测量面、清除功能就已经实现了，是不是很简单
之后我们来实现一下扫描线
其实也不难，我们先来看一下如何创建一个扫描线


还给了实例，那么我们就按照实例来写这个功能，老规矩先来个按钮

      //这里的数值就是圆的半径
      <button @click="change(10000)">10000</button>
      <button @click="change(5000)">5000</button>
      <button class="defultbtn" @click="measureMentType('POINT')">测量点</button>
      <button class="defultbtn" @click="measureMentType('SPACE_DISTANCE')">测量线</button>
      <button class="defultbtn" @click="measureMentType('SPACE_AREA')">测量面</button>
      <button class="defultbtn" @click="clear">清除</button>

然后我们在写methods中的方法

 methods: {
    //创建一个change的方法还是对应了button的@click，我们用一个num来接收我们得到的值
    change(num){
      //这就是案例上面的代码，我已经给写下来了，稍微做了一下修改  
    const objConfig = {
      name: "line1",
      xbsjType: "Scanline",
      //这里的坐标就是我们第五天那个图标点的坐标，这是三维坐标
      //[x,y,0].xeptr将二维坐标转换为三维的
      position:[
            2.1967670250653937,
            0.8228904011998618,
            -8.649274530358012e-9
        ],
      show: true,
      playing: true,
      radius: num,
    };
    const scanLine = new XE.Obj.Scanline(earth);
    scanLine.xbsjFromJSON(objConfig);
    
    //这是个定时器，2000就是2秒，我们添加一个定时器，让这个圆设置几秒刷新一下
    setInterval(()=>{
      scanLine.destroy();
    },2000)
  },
  	   //清除
      clear(){  
         this._earth && this._earth.analyzation.measurement.clearResults();
      },
      //扫描点、线、面
      measureMentType(res){
        earth.analyzation.measurement.type=res;
      },
  },

到此我们的大致功能就已经实现了，这只是组件中的代码，其他的文件都没有动过，也没有往mounted当中写其他的就是按照之前的进行删些内容
补充知识：相机飞入：

为什么在这里添加一个相机飞入的事件呢，是因为，扫描线的范围有点小，我们加入相机飞入有更好的观看效果
我们在扫描线的上面加上.flyTo（）就可以实现
我演示一下：主要添加： scanLine.flyTo();

 change(num) {
      //这就是案例上面的代码，我已经给写下来了，稍微做了一下修改
      const objConfig = {
        name: "line1",
        xbsjType: "Scanline",
        //扫描线图标点的坐标,前两个设置x和y的值   [x,y,0].xeptr将二维坐标转换为三维的
        position: [-75.59777, 40.03883, 0].xeptr,
        show: true,
        playing: true,
        radius: num,
      };
      const scanLine = new XE.Obj.Scanline(earth);
      scanLine.xbsjFromJSON(objConfig);
      //相机飞入
      scanLine.flyTo(); 
      //这是个定时器，2000就是2秒，我们添加一个定时器，让这个圆设置几秒刷新一下
      setInterval(() => {
        scanLine.destroy();
      }, 2000);
    },