【Cesium实体创建】

琳沫lerlee

于 2024-09-06 21:36:34 发布

阅读量124

点赞数

分类专栏： cesium 文章标签： elasticsearch cesium

本文链接：https://blog.csdn.net/weixin_45655721/article/details/132152273

版权

cesium 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

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);

    },