【Cesium实体创建】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
Cesium目录
- 前言
- 一、Cesium
- 二、点 线 实体
-
- 1.点实体
- 2.线实体
- 总结
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、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.SceneMode
fullscreenElement: 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"; // 去除logo
window.viewer.scene.globe.depthTestAgainstTerrain = false; //解决地形遮挡entity问题
console.log(this.mapUrl);
// 加载 3D
palaceTileset = 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 = true
this.$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$$undefined
if (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 = arraymap
viewer.scene.requestRender();
}
// 启用按钮
this.disableButton = false;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},