Cesium 使用 Entity 绘制点线面

<!--
 * @Author: HuKang
 * @Date: 2023-08-18 11:06:43
 * @LastEditTime: 2023-08-25 09:16:59
 * @LastEditors: HuKang
 * @Description: program-c
 * @FilePath: \global-data-display\src\views\program-c\index.vue
-->
<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup lang="ts">
import * as Cesium from "cesium";
import { Viewer } from "cesium";
import cesium from "vite-plugin-cesium";
import { getSatellitecloudApi, getGenerateGridApi } from "@/api/servies";

import { onMounted } from "vue";
import TOKEN from "@/utils/Tooken";

/**
 * Cesium
 */
// Token 设置
Cesium.Ion.defaultAccessToken = TOKEN;
}
// Viewer
const viewer = ref();
/**
 * 初始化函数
 */
const initViewer = () => {
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
  });

  // 去除版权信息
  viewer.value.cesiumWidget.creditContainer.style.display = "none";

  // 增加太阳光效果
  // viewer.value.scene.globe.enableLighting = true;

  // 控制视角不转到底下
  viewer.value.scene.globe.depthTestAgainstTerrain = true;

  // 增加瓦片-海图数据
  const imageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: "cesium-api/map/getMap/{x}/{y}/{z}.png",
    credit: "mapname",
    tilingScheme: new Cesium.GeographicTilingScheme({
      ellipsoid: Cesium.Ellipsoid.WGS84,
    }),
    maximumLevel: 18,
  });
  viewer.value.scene.imageryLayers.addImageryProvider(imageryProvider);

// 创建自己的数据集合
const datasource = new Cesium.CustomDataSource("")

};
onMounted(() => {
  initViewer();
});
</script>

<style scoped></style>

一、绘制点

1. 第一种

var pointentity = viewer.value.entities.add({
  id: "point1",
  position: Cesium.Cartesian3.fromDegrees(109, 34),
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW, // 点的颜色
    outlineColor: Cesium.Color.RED, // 外边框颜色
    outlineWidth: 2,  // 外边框宽度
  },
});

2. 第二种

const pointentity2 = new Cesium.Entity({
  id: "point2",
  position: Cesium.Cartesian3.fromDegrees(109, 34),
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
    outlineColor: Cesium.Color.RED,
    outlineWidth: 2,
  },
});
viewer.value.entites.add(pointentity2)

二、绘制面

viewer.value.entities.add({
   id: 'polygontest',
   name: 'mian',
   polygon: {
       hierarchy: Cesium.Cartesian3.fromDegreesArray([
           109.080842, 45.002073,
           105.91517, 45.002073,
           104.058488, 44.996596,
           104.053011, 43.002989,
           104.053011, 41.003906,
           105.728954, 40.998429,
           107.919731, 41.003906,
           109.04798, 40.998429,
           111.047063, 40.998429,
           111.047063, 42.000709,
           111.047063, 44.476286,
           111.05254, 45.002073,
           109.080842, 45.002073]),
       height: 100,
       material: Cesium.Color.RED.withAlpha(0.5),
       outline: true,
       outlineColor: Cesium.Color.BLUE,
       outlineWidth: 1,
       fill: true
       }
});

三、绘制线

viewer.value.entities.add({
   id: 'polygontest',
   name: 'line',
   polygon: {
       positions: Cesium.Cartesian3.fromDegreesArray([
           109.080842, 45.002073,
           105.91517, 45.002073,
           104.058488, 44.996596,
           104.053011, 43.002989,
           104.053011, 41.003906,
           105.728954, 40.998429,
           107.919731, 41.003906,
           109.04798, 40.998429,
           111.047063, 40.998429,
           111.047063, 42.000709,
           111.047063, 44.476286,
           111.05254, 45.002073,
           109.080842, 45.002073]),
       width: 2,
       material: Cesium.Color.YELLOW,
       }
});

四、移除 Entity

var tempEntity = viewer.value.entites.getById("point1");
// 第一种移除
viewer.value.entities.remove(tempEntity);
// 第二种移除
viewer.value.entities.removeById("point1");