删除扫描线响应圈篇

之前写过一个扫描线，删除方法是用的定时器，不能称心的删除所以这次来另一种方法来删除扫描线
还是我们先创建点击事件

<div class="playButton1" @click="change(1000)">
	<span class="response">响应圈:1km</span>
</div>
<div class="playButton2" @click="change(3000)">
	<span class="response">响应圈:3km</span>
</div>
<div class="playButton3" @click="change(5000)">
	<span class="response">响应圈:5km</span>
</div>

写好之后在去写他的js，这里的样式我就不在写了，有兴趣的小伙伴可以自己去改成自己喜欢的。

 change(num) {
     
     // 改变状态
     this.state();
	  //创建点
	  this.createPoint()；
      //这就是案例上面的代码，我已经给写下来了，稍微做了一下修改
      let objConfig = {
	     ref: "scanline1",
         czmObject: {
          name: "Scanline1",
          xbsjType: "Scanline",
          // [x,y,0].xeptr将二维坐标转换为三维的，x、y是坐标
          position: [100, 100, 0].xeptr,
          //num是扫描线的半径
          radius: num,
          playing: true,
          timeDuration: 5,
          id: num,
        },
      };  
      // 使用数组的形式push扫描线
      earth.sceneTree.root.children.push(objConfig);
    },
	

方法写好了，剩下的就是控制他了,这就是我们要关闭的方法，在其他博客中也有好多种我这就写一种以兴趣的可以去试试不同的方法

// 状态转变
    state() {
      // 关掉扫描线
      earth.sceneTree.root.children.forEach((item, k) => {
        if (item.ref == "scanline1") {
          earth.sceneTree.root.children.splice(k, 1);
        }
      });
    },

虽然这样就已经可以了，但是不容易看效果，我们添加一个点来看一下效果

//创建点
	 createPoint() {
      earth.czm.viewer.entities.add({
        //给position一个x=100和y=100
        position: Cesium.Cartesian3.fromDegrees(100, 100, 2000),
        //给name一个名字
        pointTypeShow: "isShow",
       //我在这里使用的是图片，如果你没有图片的话使用点也是可以的我把它写道下面了，使用什么都可以
        billboard: {
          image: require("../assets/logo.png"),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // scale:2,  //图片的比例大小
        },
         // 添加一个大小为10的点
        // point: {
        //       pixelSize: 10,
        //     },
        // 添加文字，文字的样式
        label: {
          // 字体大小
          font: "24px Source Han Sans CN",
          // 字体颜色
          fillColor: Cesium.Color.YELLOW,
          // 字体边框颜色
          outlineColor: Cesium.Color.BLACK,
          //宽度
          outlineWidth: 45,
          //字体样式
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          //垂直
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          //高度参数
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // 多高显示字
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            50000
          ),
        },
      });
    },

这样我们删除扫描线的方法就写完了，我可能写的不是很好，还是欢迎大家多多指出，共同进步！！！