cesium绘制面

<template>
  <div id="cesium3"></div>
  <input type="button" @click="clearDrawEntities" value="清空">
</template>

<script setup>
import * as Cesium from 'cesium'
import {onMounted} from "vue";
onMounted(()=>{
  init()
})
// 存放多个坐标数据
const face=[]
let tempEntities = [];
let position = []
const init =()=>{
  window.viewer=new Cesium.Viewer('cesium3',{
    animation:false, // 动画小组件
    baseLayerPicker:false, // 底图组件
    fullscreenButton:false, // 全屏
    vrButton:false, // va模式
    geocoder : true, //是否显示地名查找控件
    homeButton:false, // 首页按钮
    infoBox: true, // 禁用沙箱，解决控制台报错
    sceneModePicker:false, // 2D3D模式切换
    scene3DOnly:true, // 3D场景
    selectionIndicator:false, // 选取指示器
    timeline:false, // 时间轴
    navigationHelpButton:false, // 帮助提示
    navigationInstructionsInitiallyVisible:false, // 导航说明
    terrainProvider:new Cesium.CesiumTerrainProvider({ // 加载3D地形
      url:Cesium.IonResource.fromAssetId(1),
      requestVertexNormals:true, // 提高光照效果
      requestWaterMask:true // 增加水面特效
    }),
    skyBox:new Cesium.SkyBox({
      mapProjection:new Cesium.WebMercatorProjection(),
    }),
  })
  // 关闭抗锯齿
  window.viewer.scene.postProcessStages.fxaa.enabled = false;
  window.viewer._cesiumWidget._creditContainer.style.display='none'
  Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDc2ZWU0My1jNWIxLTRmNmYtODVkMy0zNTM3Y2IyN2FmNzgiLCJpZCI6MTI0MDY3LCJpYXQiOjE2NzU5NTEzMTh9.LsGrhc9u96nmoWBVuu_Sk1FO4b8iE9rxYXx4AAWuB30'

  let handler=new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
  //左键点击操作
  handler.setInputAction(function (e) {
    //调用获取位置信息的接口
    let ray = viewer.camera.getPickRay(e.position);
    position = viewer.scene.globe.pick(ray, viewer.scene);
    face.push(position);
    let tempLength = face.length;
    //调用绘制点的接口
    let point = drawPoint(position);
    tempEntities.push(point);
    if (tempLength > 1) {
      let pointline = drawPolyline([face[face.length - 2], face[face.length - 1]]);
      tempEntities.push(pointline);
    } else {
      // tooltip.innerHTML = "请绘制下一个点，右键结束";
    }
  },Cesium.ScreenSpaceEventType.LEFT_CLICK)

  //鼠标移动事件
  handler.setInputAction(function (movement) {
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  //右键点击操作
  handler.setInputAction(function (click) {
    let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    if (cartesian) {
      let tempLength = face.length;
      if (tempLength < 3) {
        alert('请选择3个以上的点再执行闭合操作命令');
      } else {
        //闭合最后一条线
        let pointline = drawPolyline([face[face.length - 1], face[0]]);
        tempEntities.push(pointline);
        drawPolygon(face);
        tempEntities.push(face);
        handler.destroy();//关闭事件句柄
        handler = null;
      }
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
const drawPoint=(position, config)=>{
  let viewer = window.viewer;
  let config_ = config ? config : {};
  return viewer.entities.add({
    name: "点几何对象",
    position: position,
    point: {
      color: Cesium.Color.SKYBLUE,
      pixelSize: 10,
      outlineColor: Cesium.Color.YELLOW,
      outlineWidth: 3,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    }
  });
}
const drawPolyline=(positions, config_)=>{
  let viewer = window.viewer;
  if (positions.length < 1) return;
  let config = config_ ? config_ : {};
  return viewer.entities.add({
    name: "线几何对象",
    polyline: {
      positions: positions,
      width: config.width ? config.width : 5.0,
      material: new Cesium.PolylineGlowMaterialProperty({
        color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
      }),
      depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
        color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
      }),
      clampToGround: true,
    }
  });
}
const drawPolygon=(positions, config_)=>{
  let viewer = window.viewer;
  if (positions.length < 2) return;
  let config = config_ ? config_ : {};
  return viewer.entities.add({
    name: "面几何对象",
    polygon: {
      hierarchy: positions,
      material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
    },
  });
}
const clearDrawEntities=()=>{
  let viewer = window.viewer;
  tempEntities = [];
  // 清除之前的实体
  const entitys = viewer.entities._entities._array;
  let length = entitys.length
  // 倒叙遍历防止实体减少之后entitys[f]不存在
  for (let f = length - 1; f >= 0; f--) {
    if (entitys[f]._name && (entitys[f]._name === '点几何对象' || entitys[f]._name === '线几何对象' || entitys[f]._name === '面几何对象')) {
      viewer.entities.remove(entitys[f]);
    }
  }
}
</script>

<style scoped>

</style>