【Cesium实体创建】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Cesium

如何引用Cesium ，代码如下（示例）：

  mounted() {console.log(this.mapUrl);setTimeout(() => {this.into();}, 315);},into() {if (window.viewer) { window.viewer.destroy(); }Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNzRiNzNkYS0zZTRmLTRhOTMtODFlNS0zOWFhN2FmYzZmYjkiLCJpZCI6MTUyMTEwLCJpYXQiOjE2ODg2OTYyMDl9.sWkoSUmLFPfbMTMFgAZeQKjBQERg-TZPBBtIN34sDNQ";window.viewer = new Cesium.Viewer("cesiumContainer", {selectionIndicator: false, //关闭绿色点击框//需要进行可视化的数据源的集合animation: false, //是否显示动画控件timeline: false, //是否显示时间线控件shouldAnimate: false,homeButton: false, //是否显示Home按钮fullscreenButton: false, //是否显示全屏按钮baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件infoBox: false, //是否显示点击要素之后显示的信息requestRenderMode: true, //启用请求渲染模式scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneModefullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处//加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",}),// 天地图地形terrainProvider: new Cesium.CesiumTerrainProvider({url: "http://data.mars3d.cn/terrain",}),});window.viewer.cesiumWidget.creditContainer.style.display = "none";    // 去除logowindow.viewer.scene.globe.depthTestAgainstTerrain = false;      //解决地形遮挡entity问题console.log(this.mapUrl);// 加载 3DpalaceTileset = new Cesium.Cesium3DTileset({//加载倾斜示范数据url: this.mapUrl,maximumMemoryUsage: 1024 * 1024 * 1024, // 设置3D Tiles的最大内存使用量maximumScreenSpaceError: 1, // 数值加大，能让最终成像变模糊,加载快;初始化的清晰度skipScreenSpaceErrorFactor: 16,dynamicScreenSpaceErrorDensity: 0.8, // 数值加大，能让周边加载变快dynamicScreenSpaceError: true, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋});palaceTileset.readyPromise.then((palaceTileset) => {viewer.scene.primitives.add(palaceTileset);var heightOffset = -10.0; //高度 高度你调这个就可以了var boundingSphere = palaceTileset.boundingSphere;var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude,0.0);var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude,heightOffset);var translation = Cesium.Cartesian3.subtract(offset,surface,new Cesium.Cartesian3());palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);window.viewer.zoomTo(palaceTileset,new Cesium.HeadingPitchRange(0.6,-0.4,palaceTileset.boundingSphere.radius * 0.55));});},

二、点 线 实体

1.点实体

代码如下（示例）：

/**笛卡尔坐标**/pointdata.position =Cesium.Cartesian3.fromDegrees(pointdata.longitude, pointdata.latitude, pointdata.height)
/**点模型**/var pointEntity = new Cesium.Entity({position: pointdata.position,label: {font: '16px sans-serif', // 设置字体大小为16像素，使用sans-serif字体text: "航点" + parseInt(this.pointCoordinatesList.length),horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式为中心verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式为底部pixelOffset: new Cesium.Cartesian2(0, -10) // 标签相对于点的偏移量},id: this.pointCoordinatesList[this.pointCoordinatesList.length - 1].id,point: {color: Cesium.Color.YELLOW,pixelSize: 10,},})window.viewer.entities.add(pointEntity)

视口朝向点 代码如下（示例）

window.viewer.zoomTo(pointEntity, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 100));

2.线实体

代码如下（示例）：

/**线坐标**/this.arraymap.push(pointEntity.position.getValue())
/**线模型**/this.lineEntity = window.viewer.entities.add({id: "polyline",name: "航线",polyline: {positions: this.arraymap,width: 2,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.RED,outlineWidth: 3,outlineColor: Cesium.Color.RED}),},});

有时候存在延迟 手动 请求刷新

     let viewer = window.viewer;viewer.scene.requestRender();

在光伏巡检项目中 ：点击生成航线------这个代码并不是点击瓦片就生成航点–而是点击拿去这个点去查询附近点将附近最近的作为 航点
标准代码：

    // 创建航线async PointAdd() {// 设置最后点击时间戳的初始值var lastClickTimestamp = 0;this.createARouteOrNot = truethis.$emit('send', !this.createARouteOrNot);if (this.disableButton) return; // 如果按钮被禁用，则退出函数// 禁用按钮，防止重复点击this.disableButton = true;// 清除实体this.clearAllDrawn()this.lineEntity = null; // 保存航线的变量// 注册屏幕点击事件this.$handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);await this.$handler.setInputAction(async (event) => {//定义一个屏幕(瓦片)点击的事件，pickPosition封装的是获取点击的位置的坐标(范围触发)let earthPosition = window.viewer.camera.pickEllipsoid(event.position,window.viewer.scene.globe.ellipsoid);var currentTimestamp = Date.now();if (currentTimestamp - lastClickTimestamp <= 500) {console.log(currentTimestamp, lastClickTimestamp);// this.showToast('点击太快')console.log("点击太快，取消上一次点击的操作");return}// 更新最后点击的时间戳lastClickTimestamp = currentTimestamp;var position = window.viewer.scene.pickPosition(event.position);//将笛卡尔坐标转化为经纬度坐标var cartographic = Cesium.Cartographic.fromCartesian(position);var x = Cesium.Math.toDegrees(cartographic.longitude);var y = Cesium.Math.toDegrees(cartographic.latitude);var z = cartographic.height;// 获取数据点坐标 ----- 拿去点击事件的经纬发送请求获取附近存在的光伏板经纬度const pointdata = await this.queryBoardGroupByPos(y, x)// 点清单 存在不等于null$$undefinedif (pointdata && pointdata != null && pointdata != "undefined") {//     if (!this.pointCoordinatesList.includes(this.value)) {//       this.pointCoordinatesList.push(this.value);//   console.log('值已成功添加到数组中。');// } else {//   console.log('值已经存在于数组中。');// }const found = this.pointCoordinatesList.some(item => item.id === parseInt(pointdata.id));if (found) {this.showMessage('点击太快：请勿重复标记！', 'warning');// console.log('ID存在于数组中。');} else {// console.log('ID不存在于数组中。');if (z > pointdata.height) {pointdata.position = Cesium.Cartesian3.fromDegrees(pointdata.longitude, pointdata.latitude, z)} else {pointdata.position = Cesium.Cartesian3.fromDegrees(pointdata.longitude, pointdata.latitude, pointdata.height)}this.pointCoordinatesList.push(pointdata)window.viewer.scene.globe.depthTestAgainstTerrain = false;// new 模型var pointEntity = new Cesium.Entity({position: pointdata.position,label: {font: '16px sans-serif', // 设置字体大小为16像素，使用sans-serif字体text: "航点" + parseInt(this.pointCoordinatesList.length),horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式为中心verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式为底部pixelOffset: new Cesium.Cartesian2(0, -10) // 标签相对于点的偏移量},id: this.pointCoordinatesList[this.pointCoordinatesList.length - 1].id,point: {color: Cesium.Color.YELLOW,pixelSize: 10,},})// 如果 是多个点赋值给航线this.arraymap.push(pointEntity.position.getValue())//  、、、、、、}}window.viewer.entities.add(pointEntity)window.viewer.zoomTo(pointEntity, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 100));if (this.lineEntity === null) {this.lineEntity = window.viewer.entities.add({id: "polyline",name: "航线",polyline: {positions: this.arraymap,width: 2,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.RED,outlineWidth: 3,outlineColor: Cesium.Color.RED}),},});} else {let viewer = window.viewer;var tempEntities = viewer.entities.getById("polyline")tempEntities.polyline.positions = this.arraymap// lineEntity.polyline.positions = arraymapviewer.scene.requestRender();}// 启用按钮this.disableButton = false;}, Cesium.ScreenSpaceEventType.LEFT_CLICK);},

---

总结