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()
})
let dot=[]
let position=[]
let tempEntities = [];
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) {
    // 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
    let ray = viewer.camera.getPickRay(e.position);
    // 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
    position = viewer.scene.globe.pick(ray, viewer.scene);
    let point = drawPoint(position);
    tempEntities.push(point);
  },Cesium.ScreenSpaceEventType.LEFT_CLICK)
  // 左键双击停止绘制
  handler.setInputAction(function () {
    handler.destroy();//关闭事件句柄
    handler = null;
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  // 右击单击停止绘制
  handler.setInputAction(function () {
    handler.destroy();//关闭事件句柄
    handler = null;
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
const clearDrawEntities=()=>{
  let viewer = window.viewer;
  dot = [];
  // 清除之前的实体
  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]);
    }
  }
}
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,
    }
  });
}

</script>

<style scoped>

</style>