Cesium 使用 Entity 绘制点线面

文章目录

- 一、绘制点
- - 1. 第一种
  - 2. 第二种
- 二、绘制面
- 三、绘制线
- 四、移除 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");