当前位置： 首页 > news >正文

【Cesium实体创建】

news 2025/7/8 12:11:38

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

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.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);},

总结

http://www.lryc.cn/news/431798.html

相关文章：

  • 为何一些包的Priority在apt-cache和deb文件当中的不一样
  • CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(三)
  • nvidia-cuda-tensorrt-cudnn下载网站
  • GitLab 是什么？GitLab使用常见问题解答
  • 数字时代，寻找新的生意增长点之前要做什么准备？
  • 使用Python本地搭建http.server文件共享服务并实现公网环境远程访问——“cpolar内网穿透”
  • STM32——Flash闪存
  • python科学计算：NumPy 数组的高级操作
  • 【补-网络安全】日常运维（二）终端端口占用排查
  • 设计模式之适配器模式：软件世界的桥梁建筑师
  • Java 入门指南：Java 并发编程 —— Fork/Join 框架 实现任务的拆分与合并
  • token过期时间分平台(web和app)设置方法
  • [000-01-008].Seata案例应用
  • 超详细！！！electron-vite-vue开发桌面应用之创建新窗口以及主进程和子进程的通信监听（十二）
  • java编辑器——IntelliJ IDEA
  • 经验笔记：SSL证书
  • 设计模式之装饰器模式：让对象功能扩展更优雅的艺术
  • Anchor Alignment Metric来优化目标检测的标签分配和损失函数。
  • C++---由优先级队列认识仿函数
  • Client访问Server访问慢的原因
  • 用RPC Performance Inspector 优化你的区块链
  • linux如何查看内存条是ddr几代
  • LeetCode 3153.所有数对中数位差之和：计数
  • Spring Boot 整合 Sentinel 实现流量控制
  • Elasticsearch倒排索引
  • 速盾：ddos常用防御方法是什么？
  • 二分算法入门(简单题)
  • 在使用React Hooks中，如何避免状态更新时的性能问题？
  • Pytest插件pytest-selenium-让自动化测试更简洁
  • 视觉语言模型（VLMs）知多少？